// courses.jsx — per-course content sections + 先行お問い合わせ form (受付完了 dummy)
// Exports to window: CourseContent

const COURSE_CONTENT = {
  tax: {
    problemTitle: "確定申告、また後回しにしてませんか？",
    problemLede: "「いつかやらなきゃ」のまま、気づけば期限間際。ひとりで抱えなくて大丈夫です。",
    pains: [
      "領収書やレシートが、引き出しに山積み",
      "何から手をつければいいのか分からない",
      "毎年ギリギリで、結局バタバタしてしまう",
    ],
    featuresTitle: "申告の「めんどう」を、3つのサポートで。",
    features: [
      { Icon: IconSparkle, title: "AI入力サポート", body: "スマホで撮るだけ。AIが金額や項目を読み取り、入力の手間をぐっと減らします。" },
      { Icon: IconReview, title: "もれなく確認", body: "控除のもれや入力ミスがないか、専門家の視点でやさしくチェックします。" },
      { Icon: IconSend, title: "提出まで伴走", body: "e-Taxでの提出まで一緒に。はじめての方でも、最後まで迷いません。" },
    ],
    steps: ["撮る・入力する", "いっしょに確認", "そのまま提出"],
  },
  guardian: {
    problemTitle: "親のお金の管理、誰に相談していますか？",
    problemLede: "離れて暮らすご家族のこと。気になりながら、後回しになっていませんか。",
    pains: [
      "通帳や手続きが本人任せで、なんとなく不安",
      "離れて暮らしていて、なかなか目が届かない",
      "「成年後見」って、何から始めればいいの？",
    ],
    featuresTitle: "ご家族の安心を、3つのサポートで。",
    features: [
      { Icon: IconWallet, title: "財産管理サポート", body: "日々の入出金を見える化。ご家族みんなで、安心して見守れる仕組みをつくります。" },
      { Icon: IconScale, title: "後見人制度のご案内", body: "成年後見・任意後見の違いから必要な手続きまで、やさしい言葉でご説明します。" },
      { Icon: IconPeople, title: "専門家連携", body: "司法書士・弁護士など、信頼できる専門家へ。状況に合わせておつなぎします。" },
    ],
    steps: ["まずは相談", "制度を知る", "専門家へつなぐ"],
  },
};

function PainItem({ text, color }) {
  return (
    <li className="pain-item">
      <span className="pain-dot" style={{ background: color }} aria-hidden="true" />
      {text}
    </li>
  );
}

function FeatureCard({ f, meta, index }) {
  return (
    <div className="feature-card" style={{ "--fc-color": meta.color, "--fc-tint": meta.tint, animationDelay: (0.06 * index) + "s" }}>
      <span className="fc-icon" aria-hidden="true">
        <f.Icon size={28} color={meta.colorDeep} sw={1.7} />
      </span>
      <h3 className="fc-title">{f.title}</h3>
      <p className="fc-body">{f.body}</p>
    </div>
  );
}

function Steps({ steps, meta }) {
  return (
    <div className="steps">
      {steps.map((s, i) => (
        <React.Fragment key={i}>
          <div className="step">
            <span className="step-num" style={{ background: meta.color }}>{i + 1}</span>
            <span className="step-label">{s}</span>
          </div>
          {i < steps.length - 1 && (
            <span className="step-arrow" aria-hidden="true">
              <IconArrowRight size={20} color={TOKENS.gray} sw={1.8} />
            </span>
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

// ---- 先行お問い合わせフォーム + 受付完了ダミー --------------------------
function ContactForm({ meta }) {
  const [name, setName] = useState("");
  const [method, setMethod] = useState("メール");
  const [contact, setContact] = useState("");
  const [message, setMessage] = useState("");
  const [touched, setTouched] = useState(false);
  const [done, setDone] = useState(false);

  const nameOk = name.trim().length > 0;
  const contactOk = contact.trim().length > 0;
  const valid = nameOk && contactOk;

  const submit = (e) => {
    e.preventDefault();
    setTouched(true);
    if (!valid) return;
    setDone(true);
  };

  if (done) {
    return (
      <div className="form-done" style={{ "--fd-color": meta.color, "--fd-tint": meta.tint }}>
        <span className="fd-check" aria-hidden="true">
          <IconCheck size={36} color="#fff" sw={2.2} />
        </span>
        <h3 className="fd-title">お問い合わせを受け付けました</h3>
        <p className="fd-body">
          {name.trim()} 様、ありがとうございます。<br />
          サービス提供開始のご案内を、{method}でいちばんにお届けします。
        </p>
        <p className="fd-note">
          ※ これは需要確認のための先行受付（デモ）です。実際の送信は行われません。
        </p>
        <button type="button" className="fd-reset" onClick={() => { setDone(false); setName(""); setContact(""); setMessage(""); setTouched(false); }}>
          入力内容を見直す
        </button>
      </div>
    );
  }

  return (
    <form className="contact-form" onSubmit={submit} style={{ "--cf-color": meta.color, "--cf-deep": meta.colorDeep, "--cf-tint": meta.tint, "--cf-border": meta.tintBorder }} noValidate>
      <div className="cf-head">
        <StatusBadge />
        <h3 className="cf-title">まずはお気軽にご相談ください</h3>
        <p className="cf-sub">先行お問い合わせ受付フォーム。提供開始まで、しつこい連絡はいたしません。</p>
      </div>

      <label className="field">
        <span className="field-label">お名前 <em>必須</em></span>
        <input
          type="text" value={name} placeholder="例：山田 花子"
          onChange={(e) => setName(e.target.value)}
          className={"field-input" + (touched && !nameOk ? " field-input--err" : "")}
        />
        {touched && !nameOk && <span className="field-err">お名前をご入力ください</span>}
      </label>

      <div className="field">
        <span className="field-label">ご希望の連絡方法</span>
        <div className="method-row" role="radiogroup">
          {["メール", "お電話", "LINE"].map((m) => (
            <button
              type="button" key={m}
              className={"method-chip" + (method === m ? " method-chip--on" : "")}
              aria-pressed={method === m}
              onClick={() => setMethod(m)}
            >{m}</button>
          ))}
        </div>
      </div>

      <label className="field">
        <span className="field-label">ご連絡先（{method}） <em>必須</em></span>
        <input
          type="text" value={contact}
          placeholder={method === "メール" ? "you@example.com" : method === "LINE" ? "LINEのID / お名前" : "090-1234-5678"}
          onChange={(e) => setContact(e.target.value)}
          className={"field-input" + (touched && !contactOk ? " field-input--err" : "")}
        />
        {touched && !contactOk && <span className="field-err">ご連絡先をご入力ください</span>}
      </label>

      <label className="field">
        <span className="field-label">ご相談内容（任意）</span>
        <textarea
          value={message} rows={3}
          placeholder="例：副業の申告がはじめてで不安です／離れて暮らす父の通帳管理について 等"
          onChange={(e) => setMessage(e.target.value)}
          className="field-input field-textarea"
        />
      </label>

      {/* TODO: 実運用の Google フォーム URL が決まったら href="#" を差し替える（現状は仮置き） */}
      <a href="#" target="_blank" rel="noopener" className="cf-submit" style={{ textDecoration: "none" }}>
        先行お問い合わせを送る
        <IconArrowRight size={20} color="#fff" sw={2.1} />
      </a>
      <p className="cf-fine">送信いただいた内容は、サービスのご案内のみに利用します。</p>
    </form>
  );
}

function CourseContent({ course, onBack }) {
  const meta = COURSE_META[course];
  const c = COURSE_CONTENT[course];
  return (
    <div className={"course course--" + course} key={course}>
      <div className="course-topbar">
        <button type="button" className="back-btn" onClick={onBack}>
          <span className="back-arrow" aria-hidden="true">←</span> コースを選び直す
        </button>
        <span className="course-pill" style={{ background: meta.tint, color: meta.colorDeep, borderColor: meta.tintBorder }}>
          <meta.Icon size={16} color={meta.colorDeep} sw={1.9} /> {meta.label}
        </span>
      </div>

      {/* Problem */}
      <section className="sec sec--problem">
        <div className="problem-card" style={{ "--p-color": meta.color, "--p-tint": meta.tint }}>
          <p className="problem-kicker">こんなお悩み、ありませんか？</p>
          <h2 className="problem-title">{c.problemTitle}</h2>
          <p className="problem-lede">{c.problemLede}</p>
          <ul className="pain-list">
            {c.pains.map((p, i) => <PainItem key={i} text={p} color={meta.color} />)}
          </ul>
        </div>
      </section>

      {/* Features */}
      <section className="sec sec--features">
        <h2 className="sec-title">{c.featuresTitle}</h2>
        <div className="feature-grid">
          {c.features.map((f, i) => <FeatureCard key={i} f={f} meta={meta} index={i} />)}
        </div>
        <Steps steps={c.steps} meta={meta} />
      </section>

      {/* CTA / form */}
      <section className="sec sec--cta" id="contact">
        <ContactForm meta={meta} />
      </section>
    </div>
  );
}

Object.assign(window, { COURSE_CONTENT, CourseContent });