const { useState, useEffect, useMemo } = React;

const FORM_URL = "https://docs.google.com/forms/d/e/1FAIpQLSdX5s0z73SJbe-_9jeCBLmvUo4YmFBpnm7ReZv2yOYtGeI69g/viewform?usp=dialog";

function detectInitialLang() {
  try {
    const stored = localStorage.getItem("cd_lang");
    if (stored === "ja" || stored === "en") return stored;
  } catch (e) {}
  const nav = (navigator.language || navigator.userLanguage || "en").toLowerCase();
  return nav.startsWith("ja") ? "ja" : "en";
}

function LangToggle({ lang, setLang }) {
  return (
    <div className="lang-toggle" role="group" aria-label="Language">
      <button
        className={lang === "ja" ? "is-active" : ""}
        onClick={() => setLang("ja")}
        aria-pressed={lang === "ja"}
      >JA</button>
      <button
        className={lang === "en" ? "is-active" : ""}
        onClick={() => setLang("en")}
        aria-pressed={lang === "en"}
      >EN</button>
    </div>
  );
}

function Header({ t, lang, setLang }) {
  return (
    <header className="site-header" data-screen-label="00 Header">
      <div className="container row">
        <a href="#top" className="brand">
          <span className="brand-mark">cd</span>
          <span>Claude Design <span className="muted">/ Studio</span></span>
        </a>
        <nav className="nav">
          <a href="#services">{t.nav.services}</a>
          <a href="#pricing">{t.nav.pricing}</a>
          <a href="#flow">{t.nav.flow}</a>
          <a href="#faq">{t.nav.faq}</a>
        </nav>
        <div className="header-actions">
          <LangToggle lang={lang} setLang={setLang} />
          <a className="btn btn-primary" href={FORM_URL} target="_blank" rel="noopener">
            {t.nav.cta} <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </header>
  );
}

function Hero({ t, lang }) {
  const prompts = lang === "ja"
    ? ["LP を作って。サービスは AI 活用の制作支援", "営業資料 10 枚、トーンは落ち着いた感じで", "アプリのオンボーディング画面、3 ステップ"]
    : ["Build an LP for an AI design enablement service", "10-slide sales deck, calm professional tone", "App onboarding flow, 3 steps"];
  const outputs = lang === "ja"
    ? [["Output", "PPTX / PDF / HTML"], ["Time", "数分〜数時間"], ["Edit", "会話形式で修正可"], ["Use", "そのまま実務へ"]]
    : [["Output", "PPTX / PDF / HTML"], ["Time", "Minutes to hours"], ["Edit", "Refine via chat"], ["Use", "Ready for production"]];
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow">
              <span className="dot"></span>
              <span>{t.hero.eyebrow}</span>
            </div>
            <h1>
              <span className="line">{t.hero.title_1}</span>
              <span className="line accent">{t.hero.title_2}</span>
              <span className="line muted">{t.hero.title_3}</span>
            </h1>
            <p className="hero-lede">{t.hero.lede}</p>
            <div className="hero-cta">
              <a className="btn btn-primary" href={FORM_URL} target="_blank" rel="noopener">
                {t.hero.primary} <span className="arrow">→</span>
              </a>
              <a className="btn btn-ghost" href="#services">{t.hero.secondary}</a>
            </div>
            <div className="hero-meta">
              <span>{t.hero.meta_1}</span>
              <span>{t.hero.meta_2}</span>
              <span>{t.hero.meta_3}</span>
            </div>
          </div>
          <div className="hero-card" aria-hidden="true">
            <div className="pill">Sample prompts</div>
            <div className="hero-prompts">
              {prompts.map((p, i) => <div key={i} className="prompt">{p}</div>)}
            </div>
            <div className="hero-output">
              {outputs.map(([k, v], i) => (
                <div key={i}><b>{k}</b>{v}</div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Intro({ t }) {
  return (
    <section id="intro" data-screen-label="02 Intro">
      <div className="container">
        <div className="section-head">
          <div className="kicker">{t.intro.kicker}</div>
          <h2 className="section-title">{t.intro.title}</h2>
          <p className="section-sub">{t.intro.body}</p>
        </div>
        <div className="cap-grid">
          {t.intro.capabilities.map((c, i) => (
            <div className="cap" key={i}>
              <div className="num">{c.k}</div>
              <h3 className="t">{c.t}</h3>
              <p className="d">{c.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services({ t }) {
  const cards = [t.services.card1, t.services.card2];
  return (
    <section id="services" data-screen-label="03 Services">
      <div className="container">
        <div className="section-head">
          <div className="kicker">{t.services.kicker}</div>
          <h2 className="section-title">{t.services.title}</h2>
          <p className="section-sub">{t.services.sub}</p>
        </div>
        <div className="svc-grid">
          {cards.map((c, i) => (
            <div key={i} className={"svc-card" + (i === 1 ? " is-featured" : "")}>
              <div className="tag">{c.tag}</div>
              <h3>{c.title}</h3>
              <div className="price">
                <span className="amount">{c.price}</span>
                <span className="unit">{c.unit}</span>
              </div>
              <p className="desc">{c.desc}</p>
              <ul>
                {c.items.map((it, j) => <li key={j}>{it}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing({ t }) {
  return (
    <section id="pricing" data-screen-label="04 Pricing">
      <div className="container">
        <div className="section-head">
          <div className="kicker">{t.pricing.kicker}</div>
          <h2 className="section-title">{t.pricing.title}</h2>
          <p className="section-sub">{t.pricing.sub}</p>
        </div>
        <div className="pricing-table">
          <table>
            <thead>
              <tr>
                <th>{t.pricing.head.item}</th>
                <th>{t.pricing.head.type}</th>
                <th>{t.pricing.head.price}</th>
              </tr>
            </thead>
            <tbody>
              {t.pricing.rows.map((r, i) => (
                <tr key={i}>
                  <td className="item">{r.item}</td>
                  <td className="type">{r.type}</td>
                  <td className="price">{r.price}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="pricing-note">{t.pricing.note}</p>
      </div>
    </section>
  );
}

function Features({ t }) {
  return (
    <section id="features" data-screen-label="05 Features">
      <div className="container">
        <div className="section-head">
          <div className="kicker">{t.features.kicker}</div>
          <h2 className="section-title">{t.features.title}</h2>
        </div>
        <div className="feat-grid">
          {t.features.items.map((f, i) => (
            <div className="feat" key={i}>
              <h3 className="t">{f.t}</h3>
              <p className="d">{f.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Audience({ t }) {
  return (
    <section id="audience" data-screen-label="06 Audience">
      <div className="container">
        <div className="section-head">
          <div className="kicker">{t.audience.kicker}</div>
          <h2 className="section-title">{t.audience.title}</h2>
        </div>
        <ul className="aud-list">
          {t.audience.items.map((it, i) => <li key={i}>{it}</li>)}
        </ul>
      </div>
    </section>
  );
}

function Showcase({ t }) {
  return (
    <section id="showcase" data-screen-label="07 Showcase">
      <div className="container">
        <div className="section-head">
          <div className="kicker">{t.showcase.kicker}</div>
          <h2 className="section-title">{t.showcase.title}</h2>
          <p className="section-sub">{t.showcase.sub}</p>
        </div>
        <div className="cases">
          {t.showcase.cases.map((c, i) => (
            <div className="case" key={i}>
              <div className="tag">{c.tag}</div>
              <div className="ba">
                <div className="row">
                  <div className="label">Before</div>
                  <div className="before">{c.before}</div>
                </div>
                <div className="row">
                  <div className="label">After</div>
                  <div className="after">{c.after}</div>
                </div>
              </div>
              <div className="time">{c.time}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Flow({ t }) {
  return (
    <section id="flow" data-screen-label="08 Flow">
      <div className="container">
        <div className="section-head">
          <div className="kicker">{t.flow.kicker}</div>
          <h2 className="section-title">{t.flow.title}</h2>
        </div>
        <div className="steps">
          {t.flow.steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="n">{s.n}</div>
              <h3 className="t">{s.t}</h3>
              <p className="d">{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ({ t }) {
  return (
    <section id="faq" data-screen-label="09 FAQ">
      <div className="container">
        <div className="section-head">
          <div className="kicker">{t.faq.kicker}</div>
          <h2 className="section-title">{t.faq.title}</h2>
        </div>
        <div className="faq-list">
          {t.faq.items.map((it, i) => (
            <details className="faq-item" key={i}>
              <summary>
                <span>{it.q}</span>
                <span className="icon">+</span>
              </summary>
              <div className="a">{it.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA({ t }) {
  return (
    <section id="cta" data-screen-label="10 CTA">
      <div className="container">
        <div className="cta-block">
          <div className="kicker">{t.cta.kicker}</div>
          <h2>{t.cta.title}</h2>
          <p>{t.cta.sub}</p>
          <a className="btn btn-primary" href={FORM_URL} target="_blank" rel="noopener">
            {t.cta.button} <span className="arrow">→</span>
          </a>
          <div className="micro">{t.cta.micro}</div>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer className="site-footer">
      <div className="container row">
        <div>{t.footer.copy}</div>
        <div className="muted">{t.footer.desc}</div>
      </div>
    </footer>
  );
}

function App() {
  const [lang, setLang] = useState(() => detectInitialLang());
  const t = useMemo(() => window.I18N[lang], [lang]);

  useEffect(() => {
    document.documentElement.lang = lang;
    try { localStorage.setItem("cd_lang", lang); } catch (e) {}
  }, [lang]);

  return (
    <>
      <Header t={t} lang={lang} setLang={setLang} />
      <main>
        <Hero t={t} lang={lang} />
        <Intro t={t} />
        <Services t={t} />
        <Pricing t={t} />
        <Features t={t} />
        <Audience t={t} />
        <Showcase t={t} />
        <Flow t={t} />
        <FAQ t={t} />
        <CTA t={t} />
      </main>
      <Footer t={t} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);