/* Stream Translations — section components. Exports to window. */
const { useState, useEffect, useRef } = React;

/* Reveal-on-scroll wrapper */
function Reveal({ children, delay, as, className, ...rest }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // immediate check — anything already in view reveals at once
    if (el.getBoundingClientRect().top < window.innerHeight * 0.92) { setSeen(true); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setSeen(true); io.unobserve(el); } });
    }, { threshold: 0.15, rootMargin: "0px 0px -8% 0px" });
    io.observe(el);
    // safety fallback: never leave content hidden
    const fb = setTimeout(() => setSeen(true), 2200);
    return () => { io.disconnect(); clearTimeout(fb); };
  }, []);
  const Tag = as || "div";
  const cls = ["reveal", delay ? "d" + delay : "", seen ? "in" : "", className || ""].join(" ").trim();
  return <Tag ref={ref} className={cls} {...rest}>{children}</Tag>;
}

const Arrow = () => (
  <svg className="arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />
  </svg>
);

/* ---------- Header ---------- */
function Header({ c, lang, setLang, scrolled, overHero, onNav, onContact }) {
  return (
    <header className={["lp-header", scrolled ? "scrolled" : "", overHero ? "over-hero" : ""].join(" ")}>
      <div className="lp-header__inner">
        <button className="lp-brand" onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}>
          <span className="mark">S</span>{c.brand}
        </button>
        <nav className="lp-nav">
          {c.nav.map((n) => (
            <button key={n.id} className="lp-nav__link" onClick={() => onNav(n.id)}>{n.label}</button>
          ))}
        </nav>
        <div className="lp-header__actions">
          <div className="lp-lang" role="group" aria-label="language">
            <button className={lang === "ja" ? "active" : ""} onClick={() => setLang("ja")}>JA</button>
            <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <button className="lp-btn lp-btn--primary lp-btn--nav" onClick={onContact}>{c.navCta}</button>
        </div>
      </div>
    </header>
  );
}

/* ---------- Hero ---------- */
function Hero({ c, variant, parallax, onContact, scrollLabel }) {
  return (
    <section className={["lp-hero", "lp-hero--" + variant].join(" ")} id="top">
      <div className="lp-hero__bg" style={{ transform: `translateY(${parallax}px)` }}>
        <img src="assets/swell-bg.jpg" alt="" />
      </div>
      <div className="lp-hero__overlay" />
      <div className="lp-hero__inner">
        <div className="lp-hero__content">
          <p className="lp-hero__eyebrow"><span className="bar" />{c.hero.eyebrow}</p>
          <h1 className="lp-hero__title">{c.hero.title}</h1>
          <p className="lp-hero__lede">{c.hero.lede}</p>
          <div className="lp-hero__actions">
            <button className="lp-btn lp-btn--on-dark lp-btn--lg" onClick={onContact}>
              {c.hero.cta}<Arrow />
            </button>
            <span className="lp-hero__cta-sub">{c.hero.ctaSub}</span>
          </div>
        </div>
      </div>
      <div className="lp-hero__scroll"><span>{scrollLabel}</span><span className="line" /></div>
    </section>
  );
}

/* ---------- Problem ---------- */
function Problem({ c }) {
  return (
    <section className="lp-section" id="problem">
      <div className="lp-wrap">
        <Reveal className="lp-section__head">
          <p className="lp-eyebrow"><span className="bar" />{c.problem.eyebrow}</p>
          <h2 className="lp-h2">{c.problem.title}</h2>
        </Reveal>
        <div className="lp-problem-grid">
          {c.problem.items.map((it, i) => (
            <Reveal key={it.k} delay={i + 1} className="lp-problem-card">
              <div className="num">{it.k}</div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Strengths ---------- */
function Strengths({ c }) {
  return (
    <section className="lp-section lp-section--warm" id="strengths">
      <div className="lp-wrap">
        <Reveal className="lp-section__head">
          <p className="lp-eyebrow"><span className="bar" />{c.strengths.eyebrow}</p>
          <h2 className="lp-h2">{c.strengths.title}</h2>
        </Reveal>
        <div className="lp-strengths">
          {c.strengths.items.map((it, i) => (
            <Reveal key={it.k} delay={i + 1} className="lp-strength">
              <span className="big">{it.k}</span>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Scope ---------- */
function Scope({ c }) {
  const s = c.scope;
  return (
    <section className="lp-section" id="scope">
      <div className="lp-wrap">
        <Reveal className="lp-section__head">
          <p className="lp-eyebrow"><span className="bar" />{s.eyebrow}</p>
          <h2 className="lp-h2">{s.title}</h2>
        </Reveal>
        <div className="lp-scope-grid">
          <Reveal>
            <div className="lp-scope-block">
              <div className="label"><span className="bar" />{s.langs.label}</div>
              <div className="lp-chips">
                {s.langs.items.map((x, i) => <span key={x} className={"lp-chip" + (i === 0 ? " primary" : "")}>{x}</span>)}
              </div>
            </div>
            <div className="lp-scope-block">
              <div className="label"><span className="bar" />{s.industries.label}</div>
              <div className="lp-chips">
                {s.industries.items.map((x) => <span key={x} className="lp-chip">{x}</span>)}
              </div>
            </div>
            <div className="lp-scope-block">
              <div className="label"><span className="bar" />{s.docs.label}</div>
              <div className="lp-chips">
                {s.docs.items.map((x) => <span key={x} className="lp-chip">{x}</span>)}
              </div>
            </div>
          </Reveal>
          <Reveal delay={1}>
            <div className="lp-scope-aside">
              <div className="glow" />
              <div className="lp-scope-aside__inner">
                <h3>{s.docs.body}</h3>
                <p>{s.langs.items.join(" ・ ")}</p>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- Work ---------- */
function Work({ c }) {
  const w = c.work;
  return (
    <section className="lp-section lp-section--deep on-dark" id="work">
      <div className="lp-wrap">
        <Reveal className="lp-section__head">
          <p className="lp-eyebrow"><span className="bar" />{w.eyebrow}</p>
          <h2 className="lp-h2">{w.title}</h2>
          <p className="lp-lede">{w.body}</p>
        </Reveal>
        <Reveal>
          <div className="lp-stats">
            {w.stats.map((st) => (
              <div className="lp-stat" key={st.l}>
                <div className="v">{st.v}</div>
                <div className="l">{st.l}</div>
              </div>
            ))}
          </div>
        </Reveal>
        <Reveal className="lp-work-foot">
          <div className="lp-sectors">
            {w.sectors.map((x) => <span key={x} className="lp-sector">{x}</span>)}
          </div>
          <p className="lp-work-note">{w.note}</p>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Process ---------- */
function Process({ c }) {
  const p = c.process;
  return (
    <section className="lp-section lp-section--warm" id="process">
      <div className="lp-wrap">
        <Reveal className="lp-section__head">
          <p className="lp-eyebrow"><span className="bar" />{p.eyebrow}</p>
          <h2 className="lp-h2">{p.title}</h2>
        </Reveal>
        <div className="lp-steps">
          {p.steps.map((st, i) => (
            <Reveal key={st.k} delay={i + 1} className="lp-step">
              <div className="lp-step__line"><span className="lp-step__dot" /><span className="lp-step__rail" /></div>
              <div className="k">{st.k}</div>
              <h3>{st.t}</h3>
              <p>{st.d}</p>
            </Reveal>
          ))}
        </div>
        <Reveal className="lp-process-note">{p.note}</Reveal>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function Faq({ c }) {
  const [open, setOpen] = useState(0);
  return (
    <section className="lp-section" id="faq">
      <div className="lp-wrap">
        <Reveal className="lp-section__head center">
          <p className="lp-eyebrow"><span className="bar" />{c.faq.eyebrow}</p>
          <h2 className="lp-h2">{c.faq.title}</h2>
        </Reveal>
        <Reveal className="lp-faq">
          {c.faq.items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={"lp-faq__item" + (isOpen ? " open" : "")}>
                <button className="lp-faq__q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span>{it.q}</span><span className="lp-faq__icon" />
                </button>
                <div className="lp-faq__a" style={{ maxHeight: isOpen ? "300px" : "0px" }}>
                  <div className="lp-faq__a-inner">{it.a}</div>
                </div>
              </div>
            );
          })}
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Reveal, Arrow, Header, Hero, Problem, Strengths, Scope, Work, Process, Faq });