/* global React */

// ─────────────────────────────────────────────────────────────────────────────
// Audience — colloquial
// ─────────────────────────────────────────────────────────────────────────────

function Audience() {
  return (
    <Section id="audience" label="04 / For You" title="こんな方に向けて作っています。">
      <div className="grid md:grid-cols-2 gap-6">
        <div className="glass p-7 md:p-9 relative">
          <div className="brand-mono text-[10px] tracking-[0.25em] uppercase opacity-60 mb-4">★ Yes — for you</div>
          <ul className="space-y-5">
            {[
            "Word / Excel / PowerPoint と業務システム ぐらいしか使ってこなかった職種の方。",
            "AI（Codex / Claude Code / Microsoft Copilot 等）の専門用語の多さに愕然としてしまったビジネスパーソン。",
            "「最近のAIニュース、ぜんぜんついていけてない…」と内心思っている方。",
            "具体的な活用事例でなく、一歩下がって抽象的に理解したり本質を理解し整理することで納得して仕事ができるというタイプの方。"].
            map((t, i) =>
            <li key={i} className="flex gap-4 leading-[1.85]">
                <span className="brand-serif text-xl shrink-0 mt-0.5" style={{ color: "oklch(80% 0.18 var(--hue))" }}>✓</span>
                <span style={{ textWrap: "pretty" }}>{t}</span>
              </li>
            )}
          </ul>
        </div>
        <div className="p-7 md:p-9 rounded-2xl border border-dashed opacity-80" style={{ borderColor: "rgba(170,176,214,0.3)" }}>
          <div className="brand-mono text-[10px] tracking-[0.25em] uppercase opacity-50 mb-4">— Not for</div>
          <p className="text-base leading-[1.9] opacity-70" style={{ textWrap: "pretty" }}>
            専門エンジニアの方は、対象外です。 技術的詳細を細かく解説していくようなサービスではないからです。<br />
            私たちが向き合うのは、<strong>これまで ITを専門にしてこなかった方々</strong>。<br />
            だから、ここに来る方々は安心して、ゼロから一緒に学べます。
          </p>
        </div>
      </div>
    </Section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Difference
// ─────────────────────────────────────────────────────────────────────────────

function Difference() {
  return (
    <Section id="difference" label="05 / Difference" title={<>「しっくりこない」を<br /><span className="neon-text">「しっくりくる」</span>に変える。</>}>
      <div className="grid md:grid-cols-2 gap-5 mb-8">
        <div className="p-7 md:p-8 rounded-2xl border opacity-90" style={{ borderColor: "rgba(170,176,214,0.18)", background: "rgba(255,255,255,0.02)" }}>
          <div className="brand-mono text-[10px] tracking-[0.25em] uppercase opacity-50 mb-4">他のAI講座</div>
          <p className="text-lg md:text-xl leading-[1.7] opacity-80">
            新機能ニュース・活用事例の紹介中心。<span className="opacity-60">「便利そう」だけど、何を言っているか全くしっくりこない。</span>
          </p>
        </div>
        <div className="p-7 md:p-8 rounded-2xl neon-border" style={{ background: "oklch(70% 0.22 var(--hue) / 0.08)" }}>
          <div className="brand-mono text-[10px] tracking-[0.25em] uppercase opacity-70 mb-4" style={{ color: "oklch(80% 0.18 var(--hue))" }}>Codexラボ</div>
          <p className="text-lg md:text-xl leading-[1.7]">
            「<strong>間違ってないけど、少しだけ的外れな解説</strong>」を排し、<br />
            <span className="neon-text font-bold">細かくはないけどピンポイントで概念が噛み合い、他の概念との組み合わせ時に整合してくる説明</span> と <span className="neon-text font-bold">存在意義の解説</span> を提供。
          </p>
        </div>
      </div>
      <p className="text-base md:text-lg ink-fg-dim leading-[1.95] opacity-80 max-w-3xl" style={{ textWrap: "pretty" }}>
        AI の説明や活用事例で「しっくりこない」を「しっくりくる」に変える、<strong>人間の視点</strong>。<br />
        私自身が納得のいくような解説だけを行っていきます。機能を並べて紹介するのではなく、それが <em>なぜ</em> 必要で、<em>いままでとどう違い、どこで</em> 効くのかを、伝えます。
      </p>
    </Section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Offerings
// ─────────────────────────────────────────────────────────────────────────────

function Offerings() {
  const items = [
  { tag: "Article", ja: "記事", desc: "概念の躓きポイントをストーリー仕立てで言語化する読み物。", status: "準備中" },
  { tag: "Material", ja: "教材", desc: "概念の組み合わせを身につけるワークブック。", status: "準備中" },
  { tag: "Video", ja: "動画", desc: "チュートリアルや、解説講義で一歩ずつ。", status: "準備中" },
  { tag: "Training", ja: "企業研修", desc: "Codex・ClaudeCodeの使い方やAIリテラシー底上げ。", status: "順次拡大" },
  { tag: "Lecture", ja: "解説講座", desc: "テーマ別の集中セッション。", status: "順次拡大" }];

  return (
    <Section id="offerings" label="06 / What We Make" title="提供物">
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
        {items.map((it, i) =>
        <div key={i} className="glass p-6 lift relative overflow-hidden">
            <div className="brand-mono text-[10px] tracking-[0.25em] uppercase opacity-50 mb-3">{it.tag}</div>
            <div className="brand-serif text-4xl md:text-5xl mb-3 neon-text">{it.ja}</div>
            <p className="text-sm opacity-80 leading-[1.85] mb-5" style={{ textWrap: "pretty" }}>{it.desc}</p>
            <div className="brand-mono text-[10px] tracking-[0.2em] uppercase opacity-60 inline-flex items-center gap-2 px-3 py-1 rounded-full" style={{ background: "oklch(70% 0.22 var(--hue) / 0.1)" }}>
              <span className="w-1.5 h-1.5 rounded-full bg-amber-300" /> {it.status}
            </div>
          </div>
        )}
        <div className="glass p-6 flex items-center justify-center text-center opacity-70">
          <p className="brand-serif italic text-xl leading-[1.5]">
            ...and more.<br />
            <span className="brand-mono text-[10px] tracking-[0.25em] uppercase opacity-60">順次拡大中</span>
          </p>
        </div>
      </div>
    </Section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// About — operator (Excel-Labo lineage)
// ─────────────────────────────────────────────────────────────────────────────

function About() {
  return (
    <Section id="about" label="07 / Operator" title="運営者について">
      <div className="grid md:grid-cols-[280px_minmax(0,1fr)] gap-8 md:gap-12 items-start">
        <div className="relative">
          <div className="rounded-2xl overflow-hidden border" style={{ borderColor: "rgba(170,176,214,0.18)", aspectRatio: "4/5" }}>
            <img src="assets/portrait-front-cropped.png" alt="代表" className="w-full h-full object-cover" style={{ objectPosition: "center top" }} />
          </div>
          <div className="mt-3">
            <div className="brand-serif text-2xl md:text-3xl" style={{ color: "oklch(85% 0.18 var(--hue))" }}>ラボとみ</div>
            <div className="brand-mono text-[10px] tracking-[0.25em] uppercase opacity-60 mt-1">Codexラボ代表 / Excelラボ代表</div>
          </div>
        </div>
        <div>
          <p className="text-lg md:text-xl leading-[1.95] mb-6" style={{ textWrap: "pretty" }}>
            Codexラボは、<strong>2015年から続く教育会社「Excelラボ」</strong> の新AI 教育プロジェクトです。
          </p>
          <div className="grid grid-cols-3 gap-4 mb-8">
            {[
            { n: "2015", l: "Excelラボ 設立" },
            { n: "10,000–", l: "累計有料講座受講者数（名）" },
            { n: "2026.05", l: "Codexラボ 始動" }].
            map((s, i) =>
            <div key={i} className="glass p-5 text-center">
                <div className="brand-serif text-2xl md:text-3xl neon-text mb-1">{s.n}</div>
                <div className="brand-mono text-[10px] tracking-[0.2em] uppercase opacity-60 leading-[1.5]">{s.l}</div>
              </div>
            )}
          </div>
          <p className="text-base md:text-lg ink-fg-dim leading-[1.95] opacity-80" style={{ textWrap: "pretty" }}>
            Microsoft 365のExcel研修に限らず、Word研修・PowerPoint研修・Outlook研修・Teams研修。Google スプレッドシート研修、Googleドライブ研修などの講座を多数開発し、実施。<br /><br />
            また、企業での業務効率化コンサルティング実績も多数。<br /><br />
            10年以上 多くの現場の方々と対話しながら、<strong>「本質的解説」「メカニズム解説」</strong>を磨いてきた人間が、同じ視点で AI 時代の社会人の皆様の「躓きポイント」に向き合います。
          </p>
        </div>
      </div>
    </Section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Status banner
// ─────────────────────────────────────────────────────────────────────────────

function Status() {
  return (
    <section className="section-band relative overflow-hidden">
      <div className="absolute inset-0 grid-bg opacity-50" />
      <div className="relative max-w-6xl mx-auto px-6 md:px-12 py-20 md:py-28 text-center">
        <div className="brand-mono text-[11px] tracking-[0.3em] uppercase opacity-60 mb-6 inline-flex items-center gap-3">
          <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
          Status · 2026.05 · Now Live
        </div>
        <h2 className="brand-serif text-4xl md:text-6xl leading-[1.2] mb-6 neon-text">
          2026年5月、始動。<br />
          コンテンツ準備、進行中。
        </h2>
        <p className="text-base md:text-lg opacity-75 max-w-2xl mx-auto leading-[1.95]" style={{ textWrap: "pretty" }}>
          記事・教材・動画を順次公開していきます。<br />
          最新情報は X（旧 Twitter）でお知らせします。
        </p>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Contact + Footer
// ─────────────────────────────────────────────────────────────────────────────

function Contact() {
  const [config, setConfig] = React.useState({ loading: true, formEnabled: false, siteKey: "" });
  const [form, setForm] = React.useState({
    name: "",
    email: "",
    organization: "",
    category: "企業研修・法人講座",
    message: "",
    website: "",
    turnstileToken: ""
  });
  const [status, setStatus] = React.useState({ state: "idle", message: "" });

  React.useEffect(() => {
    let active = true;
    fetch("/api/contact-config", { headers: { Accept: "application/json" } })
      .then((res) => res.ok ? res.json() : Promise.reject(new Error("config")))
      .then((data) => {
        if (active) setConfig({ loading: false, formEnabled: Boolean(data.formEnabled), siteKey: data.siteKey || "" });
      })
      .catch(() => {
        if (active) setConfig({ loading: false, formEnabled: false, siteKey: "" });
      });
    return () => { active = false; };
  }, []);

  React.useEffect(() => {
    if (!config.formEnabled || !config.siteKey || !window.turnstile) return;
    const target = document.getElementById("contact-turnstile");
    if (!target || target.dataset.rendered === "true") return;
    target.dataset.rendered = "true";
    window.turnstile.render(target, {
      sitekey: config.siteKey,
      callback: (token) => setForm((current) => ({ ...current, turnstileToken: token })),
      "expired-callback": () => setForm((current) => ({ ...current, turnstileToken: "" })),
      "error-callback": () => setForm((current) => ({ ...current, turnstileToken: "" }))
    });
  }, [config.formEnabled, config.siteKey]);

  const update = (field) => (event) => {
    setForm((current) => ({ ...current, [field]: event.target.value }));
  };

  const submit = async (event) => {
    event.preventDefault();
    if (!form.turnstileToken) {
      setStatus({ state: "error", message: "送信前の確認が完了していません。画面を更新して再度お試しください。" });
      return;
    }
    setStatus({ state: "sending", message: "" });
    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(form)
      });
      const result = await response.json().catch(() => ({}));
      if (!response.ok || !result.ok) throw new Error("send");
      setForm({
        name: "",
        email: "",
        organization: "",
        category: "企業研修・法人講座",
        message: "",
        website: "",
        turnstileToken: ""
      });
      if (window.turnstile) window.turnstile.reset("#contact-turnstile");
      setStatus({ state: "success", message: "送信しました。内容を確認のうえ、折り返しご連絡します。" });
    } catch {
      setStatus({ state: "error", message: "送信できませんでした。お手数ですが時間を置いて再送ください。" });
    }
  };

  return (
    <Section id="contact" label="08 / Contact" title="まずは X で、ゆるくつながってください。">
      <div className="grid md:grid-cols-[1.4fr_1fr] gap-6">
        <a href="https://x.com/codex_labo" target="_blank" rel="noopener"
        className="group relative p-8 md:p-10 rounded-2xl neon-border lift overflow-hidden block"
        style={{ background: "linear-gradient(135deg, oklch(70% 0.22 var(--hue) / 0.18), oklch(60% 0.25 calc(var(--hue) + 50) / 0.1))" }}>
          <div className="absolute -top-16 -right-16 w-64 h-64 rounded-full opacity-50" style={{
            background: "radial-gradient(closest-side, oklch(70% 0.22 var(--hue) / 0.6), transparent)"
          }} />
          <div className="relative">
            <div className="brand-mono text-[10px] tracking-[0.25em] uppercase opacity-70 mb-5">Primary · Follow on X</div>
            <div className="flex items-center gap-4 mb-5">
              <svg viewBox="0 0 24 24" className="w-10 h-10 fill-current"><path d="M18.244 2H21l-6.49 7.41L22 22h-6.18l-4.84-6.34L5.4 22H2.64l6.95-7.94L2 2h6.34l4.38 5.79L18.244 2zm-1.08 18.5h1.7L7.94 3.4H6.16l11.004 17.1z" /></svg>
              <div className="brand-serif text-4xl md:text-5xl">@codex_labo</div>
            </div>
            <p className="opacity-80 leading-[1.85]">
              更新通知・新着記事・始動の経過を、ここでお知らせします。<br />
              <span className="brand-mono text-[10px] tracking-[0.2em] uppercase opacity-60 group-hover:translate-x-1 inline-block transition mt-2">→ Open in X</span>
            </p>
          </div>
        </a>
        {config.formEnabled && config.siteKey ? (
          <form className="glass p-7 md:p-8 contact-form" onSubmit={submit}>
            <div className="brand-mono text-[10px] tracking-[0.25em] uppercase opacity-60 mb-4">Direct · Contact Form</div>
            <div className="grid gap-4">
              <label>
                <span>お名前</span>
                <input value={form.name} onChange={update("name")} required maxLength="80" autoComplete="name" />
              </label>
              <label>
                <span>メールアドレス</span>
                <input value={form.email} onChange={update("email")} required maxLength="160" type="email" autoComplete="email" />
              </label>
              <label>
                <span>会社名・組織名</span>
                <input value={form.organization} onChange={update("organization")} maxLength="120" autoComplete="organization" />
              </label>
              <label>
                <span>お問い合わせ種別</span>
                <select value={form.category} onChange={update("category")}>
                  <option>企業研修・法人講座</option>
                  <option>個別講座</option>
                  <option>メディア・取材</option>
                  <option>その他</option>
                </select>
              </label>
              <label>
                <span>お問い合わせ内容</span>
                <textarea value={form.message} onChange={update("message")} required maxLength="2000" rows="6" />
              </label>
              <label className="contact-hp" aria-hidden="true">
                <span>Web site</span>
                <input value={form.website} onChange={update("website")} tabIndex="-1" autoComplete="off" />
              </label>
              <div id="contact-turnstile" className="min-h-[65px]" />
              <button type="submit" disabled={status.state === "sending"} className="contact-submit">
                {status.state === "sending" ? "送信中" : "送信する"}
              </button>
              {status.message && (
                <p className={`contact-status ${status.state === "success" ? "is-success" : "is-error"}`} role="status">
                  {status.message}
                </p>
              )}
            </div>
          </form>
        ) : (
          <div className="glass p-7 md:p-8">
            <div className="brand-mono text-[10px] tracking-[0.25em] uppercase opacity-60 mb-4">Direct</div>
            <div className="text-sm opacity-70 mb-2">企業研修・講座のご相談</div>
            <a href="https://excel-labo.com/contact/" target="_blank" rel="noopener" className="brand-serif text-2xl md:text-3xl neon-text hover:underline">
              お問い合わせフォームへ
            </a>
            <div className="mt-6 pt-5 border-t" style={{ borderColor: "rgba(170,176,214,0.15)" }}>
              <div className="brand-mono text-[10px] tracking-[0.25em] uppercase opacity-60 mb-2">Location</div>
              <div className="text-sm">東京都</div>
            </div>
          </div>
        )}
      </div>
    </Section>);

}

function Footer() {
  return (
    <footer className="px-6 md:px-12 py-12 border-t" style={{ borderColor: "rgba(170,176,214,0.12)" }}>
      <div className="max-w-6xl mx-auto flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
        <div className="flex items-center gap-4">
          <img src="assets/logo.png" alt="" className="h-10 opacity-90" />
          <div>
            <div className="brand-serif text-xl">Codexラボ</div>
            <div className="brand-mono text-[10px] tracking-[0.2em] uppercase opacity-50">codex-labo.com</div>
          </div>
        </div>
        <div className="brand-mono text-[10px] tracking-[0.2em] uppercase opacity-60 flex flex-wrap gap-x-6 gap-y-2">
          <span className="opacity-70">excel-labo.com（運営母体）</span>
          <a href="https://x.com/codex_labo" target="_blank" rel="noopener" className="hover:opacity-100 opacity-70">→ @codex_labo</a>
          <span className="opacity-40">© 2026 Codex-Labo / Excel-Labo</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Audience, Difference, Offerings, About, Status, Contact, Footer });