// home.jsx — landing page sections

function Hero({ t, onNav }) {
  return (
    <section className="hero">
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <div className="kicker" style={{ marginBottom: 32 }}>
              <Dot /> {t.hero.kicker}
            </div>
            <h1 className="h-display">
              {t.hero.title1}<span style={{ color: 'var(--accent)' }}>{t.hero.title2}</span>{t.hero.title3}<br/>
              {t.hero.title4}
            </h1>
            <p className="lede" style={{ marginTop: 32 }}>{t.hero.lede}</p>
            <div style={{ display: 'flex', gap: 12, marginTop: 40, flexWrap: 'wrap' }}>
              <button className="btn btn-accent" onClick={() => onNav('contact')}>
                {t.hero.ctaPrimary} <Arrow />
              </button>
              <a className="btn btn-ghost" href="#services" onClick={(e) => {
                e.preventDefault();
                document.getElementById('services').scrollIntoView({ behavior: 'smooth', block: 'start' });
              }}>
                {t.hero.ctaSecondary} <Arrow />
              </a>
            </div>
          </div>
          <div className="hero-meta">
            {t.hero.meta.map((m, i) => (
              <div key={i}>
                <div className="tag">{m.k}</div>
                <div style={{ marginTop: 6, fontSize: 14, color: 'var(--ink-2)' }}>{m.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div style={{ marginTop: 64 }}>
        <div className="marq">
          <div className="marq-track">
            {[...t.hero.marquee, ...t.hero.marquee, ...t.hero.marquee].map((m, i) => (
              <span key={i} className="marq-item"><span className="star">✱</span> {m}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function RobotShuffler() {
  const total = 20;
  const [idx, setIdx] = React.useState(() => Math.floor(Math.random() * total));
  React.useEffect(() => {
    const id = setInterval(() => {
      setIdx((prev) => {
        let next = Math.floor(Math.random() * total);
        if (next === prev) next = (next + 1) % total;
        return next;
      });
    }, 700);
    return () => clearInterval(id);
  }, []);
  const num = String(idx + 1).padStart(2, '0');
  return (
    <div className="robot-shuffler" aria-hidden="true">
      <img
        key={idx}
        src={`assets/robot-${num}.png`}
        alt=""
        className="robot-shuffler-img"
      />
    </div>
  );
}

function Why({ t }) {
  return (
    <section id="why" className="section">
      <div className="wrap">
        <div className="section-head">
          <div className="why-left">
            <div className="eyebrow">{t.why.eyebrow}</div>
            <RobotShuffler />
          </div>
          <div>
            <h2 className="h-1">{t.why.title}</h2>
            <p className="lede" style={{ marginTop: 24 }}>{t.why.lede}</p>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--line)' }} className="why-grid">
          {t.why.points.map((p, i) => (
            <div key={i} style={{
              padding: '40px 32px 36px 0',
              borderRight: i < 2 ? '1px solid var(--line)' : 0,
              paddingLeft: i > 0 ? 32 : 0,
            }}>
              <div className="tag">{p.n}</div>
              <h3 className="h-3" style={{ marginTop: 24 }}>{p.h}</h3>
              <p style={{ marginTop: 14, color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.6, maxWidth: '32ch' }}>{p.b}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .why-grid { grid-template-columns: 1fr !important; }
          .why-grid > div { border-right: 0 !important; padding-left: 0 !important; border-bottom: 1px solid var(--line); padding-right: 0 !important; }
          .why-grid > div:last-child { border-bottom: 0; }
        }
      `}</style>
    </section>
  );
}

function CoopShuffler() {
  const total = 3;
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => {
      setIdx((p) => (p + 1) % total);
    }, 1500);
    return () => clearInterval(id);
  }, []);
  const num = String(idx + 1).padStart(2, '0');
  return (
    <div className="coop-shuffler" aria-hidden="true">
      <img key={idx} src={`assets/coop-${num}.png`} alt="" className="coop-shuffler-img" />
    </div>
  );
}

function Services({ t, onNav }) {
  return (
    <section id="services" className="section section-tight">
      <div className="wrap">
        <div className="section-head">
          <div className="services-left">
            <div className="eyebrow">{t.services.eyebrow}</div>
            <CoopShuffler />
          </div>
          <div>
            <h2 className="h-1">{t.services.title}</h2>
            <p className="lede" style={{ marginTop: 20 }}>{t.services.lede}</p>
          </div>
        </div>
        <div className="svc-grid">
          {t.services.cards.map((s, i) => (
            <div key={i} className="svc">
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span className="svc-num">{s.num}</span>
                <span className="svc-pill">{s.pill}</span>
              </div>
              <h3 className="svc-title h-2">{s.title}</h3>
              <div className="mono" style={{ marginTop: 6, color: 'var(--ink-3)', fontSize: 12, letterSpacing: '0.1em' }}>{s.subtitle}</div>
              <p className="svc-body">{s.body}</p>
              <ul className="svc-list">
                {s.features.map((f, j) => (
                  <li key={j}>
                    <span>{f[0]}</span>
                    <span className="mono">{f[1]}</span>
                  </li>
                ))}
              </ul>
              <div className="svc-foot">
                <a href="#" onClick={(e) => { e.preventDefault(); onNav('contact'); }} style={{ color: 'var(--accent)', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                  {s.cta} <Arrow size={12} />
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function IndShuffler() {
  const total = 10;
  const [idx, setIdx] = React.useState(() => Math.floor(Math.random() * total));
  React.useEffect(() => {
    const id = setInterval(() => {
      setIdx((prev) => {
        let next = Math.floor(Math.random() * total);
        if (next === prev) next = (next + 1) % total;
        return next;
      });
    }, 1100);
    return () => clearInterval(id);
  }, []);
  const num = String(idx + 1).padStart(2, '0');
  return (
    <div className="ind-shuffler" aria-hidden="true">
      <img key={idx} src={`assets/ind-${num}.png`} alt="" className="ind-shuffler-img" />
    </div>
  );
}

function Industries({ t }) {
  return (
    <section id="industries" className="section section-tight">
      <div className="wrap">
        <div className="section-head">
          <div className="industries-left">
            <div className="eyebrow">{t.industries.eyebrow}</div>
            <IndShuffler />
          </div>
          <div>
            <h2 className="h-1">{t.industries.title}</h2>
            <p className="lede" style={{ marginTop: 20 }}>{t.industries.lede}</p>
          </div>
        </div>
        <div className="ind-groups">
          {t.industries.groups.map((g, gi) => (
            <div key={gi} className="ind-group">
              <div className="ind-group-head">
                <span className="ind-group-tag">{g.tag}</span>
                <span className="ind-group-en mono">{g.en}</span>
                <span className="ind-group-line"></span>
              </div>
              <div className="ind-grid">
                {g.list.map((ind, i) => (
                  <div key={i} className="ind">
                    <div className="ind-num">/{ind.num}</div>
                    <div className="ind-name">{ind.name}</div>
                    <div className="ind-en">{ind.en}</div>
                    <div className="ind-pain">{ind.pain}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ModShuffler() {
  const total = 2;
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => {
      setIdx((p) => (p + 1) % total);
    }, 2000);
    return () => clearInterval(id);
  }, []);
  const num = String(idx + 1).padStart(2, '0');
  return (
    <div className="mod-shuffler" aria-hidden="true">
      <img key={idx} src={`assets/mod-${num}.png`} alt="" className="mod-shuffler-img" />
    </div>
  );
}

function Modules({ t }) {
  return (
    <section id="modules" className="section section-tight">
      <div className="wrap">
        <div className="section-head">
          <div className="modules-left">
            <div className="eyebrow">{t.modules.eyebrow}</div>
            <ModShuffler />
          </div>
          <div>
            <h2 className="h-1">{t.modules.title}</h2>
            <p className="lede" style={{ marginTop: 20 }}>{t.modules.lede}</p>
          </div>
        </div>
        <div className="mod-grid">
          {t.modules.cards.map((m, i) => (
            <div key={i} className="mod">
              <div className="mod-head">
                <div>
                  <div className="tag">{m.en}</div>
                  <h3 className="h-2" style={{ marginTop: 14 }}>{m.name}</h3>
                </div>
                <span className="svc-pill">{m.purpose}</span>
              </div>
              <p style={{ marginTop: 18, color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.6 }}>{m.desc}</p>
              <div className="mod-agents">
                {m.agents.map((a, j) => (
                  <span key={j} className="agent-chip"><span className="dot"></span>{a}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 24, padding: '20px 24px',
          border: '1px dashed var(--line)', borderRadius: 14,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap',
          color: 'var(--ink-2)', fontSize: 14,
        }}>
          <span>{t.modules.custom}</span>
          <span className="mono" style={{ color: 'var(--accent)', fontSize: 11, letterSpacing: '0.12em' }}>BESPOKE · MONTHLY</span>
        </div>
      </div>
    </section>
  );
}

function Process({ t }) {
  return (
    <section id="process" className="section section-tight">
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow">{t.process.eyebrow}</div>
          <div>
            <h2 className="h-1">{t.process.title}</h2>
          </div>
        </div>
        <div className="process">
          {t.process.steps.map((s, i) => (
            <div key={i} className="step">
              <div className="step-num">/{s.n}</div>
              <div className="step-title">{s.t}</div>
              <div className="step-body">{s.b}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Cases({ t, onNav }) {
  return (
    <section id="cases" className="section section-tight">
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow">{t.cases.eyebrow}</div>
          <div>
            <h2 className="h-1">{t.cases.title}</h2>
          </div>
        </div>
        <div>
          {t.cases.list.map((c, i) => (
            <article key={i} className="case">
              <div>
                <div className="case-num">{c.num}</div>
                <div className="case-industry">{c.industry}</div>
                <div className="case-img" style={{ marginTop: 28, aspectRatio: '4/3' }}>
                  <img src={`assets/case-${String(i + 1).padStart(2, '0')}.png`} alt="" />
                </div>
              </div>
              <div>
                <p className="case-quote" style={{ textWrap: 'pretty' }}>
                  <span style={{ color: 'var(--accent)', marginRight: 4 }}>“</span>
                  {c.quote}
                  <span style={{ color: 'var(--accent)', marginLeft: 4 }}>”</span>
                </p>
                <div className="case-stats">
                  {c.stats.map((s, j) => (
                    <div key={j}>
                      <div className="stat-num">{s.num}</div>
                      <div className="stat-label">{s.label}</div>
                    </div>
                  ))}
                </div>
              </div>
            </article>
          ))}
        </div>
        <div style={{ marginTop: 48, display: 'flex', justifyContent: 'center' }}>
          <a className="btn btn-ghost" href="#" onClick={(e) => { e.preventDefault(); onNav('contact'); }}>
            {t.cases.moreCta} <Arrow size={12} />
          </a>
        </div>
      </div>
    </section>
  );
}

function BlogTeaser({ t, lang }) {
  const posts = lang === 'zh' ? [
    { tag: 'AI 轉型', date: '2026.04.20', title: '為什麼我們不收 AI 開發費 — 結果分潤的真實邏輯', read: '8 分鐘' },
    { tag: '案例剖析', date: '2026.04.12', title: '一個行銷人 + AI 團隊 = 五間旅館的營運模式拆解', read: '12 分鐘' },
    { tag: 'Agent 設計', date: '2026.03.30', title: 'AI 客服 Agent 怎麼避免「客戶覺得不像人」的陷阱', read: '6 分鐘' },
  ] : [
    { tag: 'AI Transformation', date: '2026.04.20', title: 'Why we don\'t charge dev fees — the real logic of revenue share', read: '8 min' },
    { tag: 'Case Study', date: '2026.04.12', title: 'One marketer + an AI team = running 5 hotels. Here\'s how.', read: '12 min' },
    { tag: 'Agent Design', date: '2026.03.30', title: 'How to keep AI support agents from feeling robotic', read: '6 min' },
  ];

  const blogTitle = lang === 'zh' ? '思考、案例、做法' : 'Thoughts, cases, and how-tos';
  const blogEyebrow = lang === 'zh' ? '部落格' : 'Blog';
  const blogLede = lang === 'zh'
    ? '我們不太會行銷自己。但我們會把實際在做的事情寫下來，給正在思考要不要導入 AI 的你。'
    : "We don't market ourselves much. But we write down what we actually do, for anyone deciding whether to bring AI into their work.";
  const allBtn = lang === 'zh' ? '查看所有文章' : 'View all posts';

  return (
    <section id="blog" className="section section-tight">
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow">{blogEyebrow}</div>
          <div>
            <h2 className="h-1">{blogTitle}</h2>
            <p className="lede" style={{ marginTop: 20 }}>{blogLede}</p>
          </div>
        </div>
        <div style={{ borderTop: '1px solid var(--line)' }}>
          {posts.map((p, i) => (
            <a key={i} href="#" onClick={(e) => e.preventDefault()}
               style={{
                 display: 'grid', gridTemplateColumns: '120px 1fr 100px 80px',
                 alignItems: 'center', gap: 24,
                 padding: '28px 0',
                 borderBottom: '1px solid var(--line)',
                 transition: 'padding-left .2s ease',
               }}
               onMouseEnter={(e) => e.currentTarget.style.paddingLeft = '12px'}
               onMouseLeave={(e) => e.currentTarget.style.paddingLeft = '0'}
               className="blog-row">
              <span className="mono" style={{ fontSize: 11, letterSpacing: '0.1em', color: 'var(--ink-3)' }}>{p.date}</span>
              <span style={{ fontSize: 18, fontWeight: 500, letterSpacing: '-0.012em', textWrap: 'pretty' }}>{p.title}</span>
              <span className="svc-pill" style={{ justifySelf: 'start' }}>{p.tag}</span>
              <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', textAlign: 'right' }}>{p.read}</span>
            </a>
          ))}
        </div>
        <div style={{ marginTop: 32, display: 'flex', justifyContent: 'flex-end' }}>
          <a className="btn btn-ghost" href="#" onClick={(e) => e.preventDefault()}>
            {allBtn} <Arrow size={12} />
          </a>
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .blog-row { grid-template-columns: 1fr !important; gap: 8px !important; }
          .blog-row .mono:last-child { display: none; }
        }
      `}</style>
    </section>
  );
}

function CTAStrip({ t, onNav }) {
  return (
    <section className="section section-tight">
      <div className="wrap">
        <div className="cta-strip">
          <div>
            <div className="kicker" style={{ marginBottom: 24, color: '#FFC2A6', borderColor: '#E8643C66' }}>{t.cta.kicker}</div>
            <h2 className="h-1">
              {t.cta.title[0]}
              <span className="accent-mark">{t.cta.title[1]}</span>
              {t.cta.title[2]}
            </h2>
            <p className="lede" style={{ marginTop: 24 }}>{t.cta.lede}</p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }}>
            <button className="btn btn-accent" onClick={() => onNav('contact')}>
              {t.cta.btnPrimary} <Arrow />
            </button>
            <a className="mono" href={`mailto:${t.cta.btnSecondary}`} style={{ color: 'rgba(245,244,239,0.6)', fontSize: 12, letterSpacing: '0.08em' }}>
              ↳ {t.cta.btnSecondary}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Home({ t, lang, onNav }) {
  return (
    <>
      <Hero t={t} onNav={onNav} />
      <Why t={t} />
      <Services t={t} onNav={onNav} />
      <Industries t={t} />
      <Modules t={t} />
      <Process t={t} />
      <Cases t={t} onNav={onNav} />
      <CTAStrip t={t} onNav={onNav} />
    </>
  );
}

Object.assign(window, { Home });