// Home page — hero, services (3 with images), philosophies (4 with bg images), CTA
function HomePage({ t, lang, variant, setPage }) {
  return (
    <div className="page-enter">
      <HomeHero t={t} lang={lang} variant={variant} setPage={setPage} />
      <ServicesBlock t={t} lang={lang} setPage={setPage} />
      <PhilosophiesBlock t={t} lang={lang} />
      <ClosingCTA title={t.closingTitle} primaryLabel={t.closingCta} />
    </div>
  );
}

const SERVICE_IMGS = [
  `${IMG}/2021/07/2-People-collaborating.png`,
  `${IMG}/2021/07/20210717-044902-001.png`,
  `${IMG}/2021/07/20210719-223959-001.png`,
];

const PHILOSOPHY_IMGS = [
  `${IMG}/2021/07/Industry-4.0.png`,
  `${IMG}/2021/08/pexels-johannes-plenio-1105379-1024x682.jpg`,
  `${IMG}/2021/07/20210717-082155-001.png`,
  `${IMG}/2021/07/some-logs-create-wooden-steps-between-tall-trees-683x1024.jpg`,
];

function HomeHero({ t, lang, variant, setPage }) {
  const [scrollY, setScrollY] = React.useState(0);
  React.useEffect(() => {
    const on = () => setScrollY(window.scrollY);
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);

  return (
    <section style={{
      position: "relative", minHeight: "92vh",
      paddingTop: 120, paddingBottom: 64, overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", inset: 0, zIndex: 0,
        background: variant === "bold"
          ? "radial-gradient(ellipse at 30% 40%, rgba(127,227,220,0.18) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(191,246,240,0.10) 0%, transparent 50%), var(--c-bg)"
          : "radial-gradient(ellipse at 70% 20%, rgba(168,218,220,0.18) 0%, transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(92,184,178,0.08) 0%, transparent 50%), var(--c-bg)",
      }} />

      <AirflowCanvas density={1.1} variant={variant} />

      <div className="shell" style={{ position: "relative", zIndex: 2 }}>
        <div className="eyebrow" style={{ marginBottom: 24 }}>{t.heroEyebrow}</div>

        <h1
          className="h-display"
          style={{
            fontSize: "clamp(40px, 5.4vw, 86px)",
            maxWidth: 1100,
            transform: `translateY(${scrollY * -0.06}px)`,
          }}
        >
          {t.heroTitle.map((line, i) => (
            <span key={i} style={{
              display: "block",
              color: i === 2 ? "var(--c-aqua)" : "var(--c-ink)",
              fontStyle: i === 2 ? "italic" : "normal",
            }}>
              {line}
            </span>
          ))}
        </h1>

        <div style={{
          marginTop: 22, fontFamily: "var(--f-mono)",
          fontSize: 15, letterSpacing: "0.06em", color: "var(--c-aqua)",
        }}>
          {t.heroTagline}
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64,
          marginTop: 44, alignItems: "end",
        }}>
          <p style={{
            fontSize: 16, lineHeight: 1.8, color: "var(--c-muted)",
            maxWidth: 560, margin: 0,
          }}>
            {t.heroBody}
          </p>
          <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => setPage("consulting")}>
              {t.heroCtaPrimary}
              <span style={{ fontFamily: "var(--f-mono)" }}>→</span>
            </button>
            <button className="btn btn-ghost" onClick={() => setPage("about")}>
              {t.heroCtaSecondary}
            </button>
          </div>
        </div>

        <div style={{
          position: "absolute", bottom: -40, left: 56,
          display: "flex", alignItems: "center", gap: 12,
          fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.2em",
          textTransform: "uppercase", color: "var(--c-muted)",
        }}>
          <span style={{ width: 40, height: 1, background: "var(--c-aqua)",
                         animation: "scrollPulse 1.8s var(--ease-out) infinite" }} />
          {t.scrollHint}
        </div>
        <style>{`@keyframes scrollPulse { 0%,100% { transform: translateX(0); opacity: 0.4; } 50% { transform: translateX(8px); opacity: 1; } }`}</style>
      </div>
    </section>
  );
}

function ServicesBlock({ t, lang, setPage }) {
  return (
    <section style={{ padding: "120px 0 80px" }}>
      <div className="shell">
        <SectionHead index="01" eyebrow={lang === "zh" ? "服務範疇" : "Services"}
                     title={t.servicesTitle} lead={t.servicesLead} />

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {t.services.map((s, i) => (
            <ServiceCard key={s.code} s={s} img={SERVICE_IMGS[i]} lang={lang} setPage={setPage} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ s, img, lang, setPage }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div className="card"
         onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
         onClick={() => setPage(s.page)}
         style={{ padding: 0, cursor: "pointer", position: "relative", overflow: "hidden",
                  display: "flex", flexDirection: "column" }}>
      <RemoteImage src={img} alt={s.name} ratio="16/10"
                   style={{ borderRadius: 0 }} />
      <div style={{ padding: 28, display: "flex", flexDirection: "column", flex: 1 }}>
        <div style={{
          fontFamily: "var(--f-mono)", fontSize: 11,
          color: "var(--c-aqua)", letterSpacing: "0.18em",
        }}>
          {s.code}
        </div>
        <h3 style={{
          fontFamily: "var(--f-serif)", fontSize: 22, fontWeight: 400,
          margin: "12px 0 14px", letterSpacing: "-0.01em", color: "var(--c-ink)",
          lineHeight: 1.3,
        }}>
          {s.name}
        </h3>
        <p style={{ fontSize: 14, lineHeight: 1.7, color: "var(--c-muted)", margin: 0, flex: 1 }}>
          {s.summary}
        </p>
        <div style={{
          marginTop: 22, paddingTop: 14, borderTop: "1px solid var(--c-line)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          color: "var(--c-aqua)", fontSize: 12.5, fontFamily: "var(--f-mono)",
        }}>
          <span>{lang === "zh" ? "了解更多" : "Learn more"}</span>
          <span style={{
            transform: hover ? "translateX(6px)" : "translateX(0)",
            transition: "transform 0.3s var(--ease-out)",
          }}>→</span>
        </div>
      </div>
    </div>
  );
}

function PhilosophiesBlock({ t, lang }) {
  return (
    <section style={{ padding: "100px 0 120px", background: "var(--c-mist)" }}>
      <div className="shell">
        <SectionHead index="02" eyebrow={lang === "zh" ? "四大理念" : "Principles"}
                     title={t.philosophiesTitle} lead={t.philosophiesLead} />

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16,
        }}>
          {t.philosophies.map((p, i) => (
            <PhilosophyCell key={p.code} p={p} img={PHILOSOPHY_IMGS[i]} />
          ))}
        </div>
      </div>
    </section>
  );
}

function PhilosophyCell({ p, img }) {
  return (
    <div className="card" style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
      <div style={{ position: "relative" }}>
        <RemoteImage src={img} alt={p.k} ratio="4/3" style={{ borderRadius: 0 }} overlay />
        <div style={{
          position: "absolute", left: 18, bottom: 14,
          fontFamily: "var(--f-mono)", fontSize: 11,
          color: "rgba(255,255,255,0.85)", letterSpacing: "0.15em",
        }}>
          {p.code}
        </div>
      </div>
      <div style={{ padding: "22px 22px 26px" }}>
        <h4 style={{
          fontFamily: "var(--f-serif)", fontSize: 21, fontWeight: 400,
          margin: "0 0 12px", letterSpacing: "-0.01em", color: "var(--c-ink)",
        }}>
          {p.k}
        </h4>
        <p style={{
          fontSize: 13.5, color: "var(--c-muted)", lineHeight: 1.7, margin: 0,
        }}>
          {p.b}
        </p>
      </div>
    </div>
  );
}

window.HomePage = HomePage;