/* sections-bottom.jsx — QR band, Pricing, Final CTA, FAQ, Footer */

function QRBand() {
  return (
    <section className="section section--gray reveal" id="qr">
      <div className="container qrband">
        <div className="qrband__copy">
          <div className="eyebrow">QRコード活用</div>
          <h2 className="section-title">空き枠そのものが、<br />新しい営業チャネルになる。</h2>
          <p className="section-lead">
            空いている看板や交通広告枠にQRコードを設置するだけ。興味を持った事業者がスマートフォンをかざすと、その枠に自社広告を掲載したラフをその場で確認できます。
          </p>
          <div className="hero__badges" style={{ marginTop: 28 }}>
            <div className="hero__badge"><Icon name="qr" size={17} />枠にQRを置くだけ</div>
            <div className="hero__badge"><Icon name="smartphone" size={17} />現地でその場でシミュレーション</div>
          </div>
          <a className="btn btn--cta btn--lg" href="contact.html" style={{ marginTop: 30 }}>無料で試してみる</a>
        </div>

        <div className="qrband__visual">
          <img src="qr-billboard.png" alt="QRコード活用イメージ" style={{ width: "100%", borderRadius: "var(--r-lg)", boxShadow: "var(--shadow-lg)" }} />
        </div>
      </div>
    </section>
  );
}

function WidgetBand() {
  return (
    <section className="section reveal" id="widget">
      <div className="container qrband" style={{ direction: "ltr" }}>
        <div className="qrband__visual">
          <img src="widget-band.png" alt="ウィジェット活用イメージ" style={{ width: "100%", borderRadius: "var(--r-lg)", boxShadow: "var(--shadow-lg)" }} />
        </div>

        <div className="qrband__copy">
          <div className="eyebrow">ウィジェット活用</div>
          <h2 className="section-title">Webサイトから、<br />広告主候補に体験させる。</h2>
          <p className="section-lead">
            自社の媒体資料ページや営業サイトにOOH Simのウィジェットを埋め込み。訪問した広告主候補がURLを入れるだけで、実際の掲載枠に自社広告のラフをその場でシミュレーションできます。
          </p>
          <div className="hero__badges" style={{ marginTop: 28 }}>
            <div className="hero__badge"><Icon name="layout" size={17} />サイトに貼るだけ</div>
            <div className="hero__badge"><Icon name="users" size={17} />訪問者が自分で体験</div>
          </div>
          <a className="btn btn--cta btn--lg" href="contact.html" style={{ marginTop: 30 }}>導入について相談する</a>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Pricing ---------------- */
const PLANS = [
  {
    name: "無料プラン", price: { free: "無料" }, desc: "まずは操作感を試したい方向け。",
    cta: { label: "無料で試してみる", href: "/signup", style: "ghost" },
    list: ["URL入力でのイメージ作成", "基本的な看板テンプレート", "作成イメージの共有"],
  },
  {
    name: "スタンダードプラン", price: { amt: "1万円", unit: "〜 / 月" }, desc: "営業担当者が日常的に提案画像を作成するための基本プラン。",
    cta: { label: "プランについて相談する", href: "contact.html", style: "ghost" },
    list: ["無料プランのすべて", "提案画像の無制限作成", "作成後の修正・再作成", "掲載枠の管理"],
  },
  {
    name: "プレミアムプラン", price: { amt: "3万円", unit: "〜 / 月" }, desc: "代理店・広告主向けアカウントやQRコード活用を行いたい企業向け。", featured: true,
    cta: { label: "プランについて相談する", href: "contact.html", style: "cta" },
    list: ["スタンダードのすべて", "代理店・広告主アカウント発行", "QRコード活用", "複数掲載枠の比較"],
  },
  {
    name: "エンタープライズプラン", price: { amt: "お問い合わせ" }, desc: "多数の掲載枠、自社Webサイトへの組み込み、個別運用に対応。",
    cta: { label: "導入について相談する", href: "contact.html", style: "navy" },
    list: ["プレミアムのすべて", "自社Webサイトへの組み込み", "多数掲載枠の一括運用", "個別サポート体制"],
  },
];

function Plan({ p }) {
  return (
    <div className={"plan" + (p.featured ? " plan--featured" : "")}>
      {p.featured && <span className="plan__flag">人気のプラン</span>}
      <div className="plan__name">{p.name}</div>
      <div className="plan__price">
        {p.price.free ? <span className="free">{p.price.free}</span> : <span className="amt">{p.price.amt}</span>}
        {p.price.unit && <span className="unit">{p.price.unit}</span>}
      </div>
      <p className="plan__desc">{p.desc}</p>
      <a className={"btn plan__btn btn--block btn--" + p.cta.style} href={p.cta.href}>{p.cta.label}</a>
      <ul className="plan__list">
        {p.list.map((li) => <li key={li}><Icon name="check" size={15} stroke={2.2} />{li}</li>)}
      </ul>
    </div>
  );
}

function Pricing() {
  return (
    <section className="section section--blue reveal" id="pricing">
      <div className="container">
        <div className="section-head section-head--center">
          <div className="eyebrow" style={{ justifyContent: "center" }}>料金プラン</div>
          <h2 className="section-title">御社の運用に合わせて選べるプラン</h2>
          <p className="section-lead">小さく試してから、運用規模に合わせて拡張できます。</p>
        </div>
        <div className="price-grid">
          {PLANS.map((p) => <Plan key={p.name} p={p} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Final CTA ---------------- */
const FINAL_FEATS = ["クレジットカード不要", "最短1分で登録", "すぐに使える", "いつでも解約可能"];

function FinalCTA() {
  return (
    <section className="section finalcta">
      <div className="container finalcta__grid reveal">
        <h2>掲載イメージが、<br />営業の武器になる。</h2>
        <p>
          掲載イメージがすぐに伝われば、広告主との会話はもっと早く始まります。<br />
          御社の営業を、もっとスマートに。
        </p>
        <div className="finalcta__btn">
          <a className="btn btn--cta btn--lg" href="contact.html">まずは無料で始める</a>
        </div>
        <div className="finalcta__feats">
          {FINAL_FEATS.map((f) => (
            <div className="finalcta__feat" key={f}><Icon name="check" size={16} stroke={2.2} />{f}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FAQ ---------------- */
const FAQS = [
  { q: "専門的なデザイン知識は必要ですか？", a: "必要ありません。広告主のWebサイトURLを入力するだけで、AIが掲載イメージを自動で作成します。画像編集ソフトの操作や、デザインの専門知識がなくても、すぐに提案イメージを用意できます。" },
  { q: "AIが作った広告イメージを修正できますか？", a: "はい。文章の修正・画像の変更・レイアウトの調整・再作成に対応しています。AIが作成した内容をそのまま使う必要はなく、営業担当者や広告主が最後に調整できます。" },
  { q: "広告主にも利用してもらえますか？", a: "可能です。代理店・広告主向けにアカウントを発行でき、広告主自身が複数の掲載枠を見比べながらシミュレーションを試せます（プレミアムプラン以上）。" },
  { q: "空き枠にQRコードを設置できますか？", a: "はい。空いている広告枠にQRコードを設置すると、興味を持った事業者がその場でスマートフォンから自社の掲載イメージを体験できます。空き枠が新しい営業チャネルになります。" },
  { q: "自社のWebサイトにも設置できますか？", a: "埋め込みウィジェットを使って、自社Webサイト上でシミュレーション体験を提供できます。組み込みや個別運用はエンタープライズプランで対応します。" },
  { q: "無料プランを試すためにクレジットカードは必要ですか？", a: "不要です。クレジットカードの登録なしで、最短1分でアカウントを作成し、すぐにお試しいただけます。" },
];

function FaqItem({ item, open, onToggle }) {
  const innerRef = React.useRef(null);
  return (
    <div className={"acc" + (open ? " is-open" : "")}>
      <button className="acc__q" aria-expanded={open} onClick={onToggle}>
        <span>{item.q}</span>
        <span className="acc__icon"><Icon name="plus" size={15} stroke={2.4} /></span>
      </button>
      <div className="acc__a" style={{ maxHeight: open ? (innerRef.current ? innerRef.current.scrollHeight : 400) : 0 }}>
        <div className="acc__a-inner" ref={innerRef}>{item.a}</div>
      </div>
    </div>
  );
}

function FAQ() {
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section className="section reveal" id="faq">
      <div className="container">
        <div className="section-head section-head--center">
          <div className="eyebrow" style={{ justifyContent: "center" }}>よくある質問</div>
          <h2 className="section-title">よくある質問</h2>
        </div>
        <div className="faq">
          {FAQS.map((item, i) => (
            <FaqItem key={i} item={item} open={openIdx === i} onToggle={() => setOpenIdx(openIdx === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
const FOOTER_LINKS = [
  { label: "利用規約", href: "terms.html" },
  { label: "プライバシーポリシー", href: "privacy.html" },
  { label: "お問い合わせ", href: "contact.html" },
];

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__top">
          <div>
            <Logo />
            <p className="footer__tag">屋外広告営業を、もっと速く、具体的に。URLを入れるだけで、提案ラフをすぐに共有できます。</p>
          </div>
          <nav className="footer__links" aria-label="フッターナビゲーション">
            {FOOTER_LINKS.map((l) => <a key={l.href} href={l.href}>{l.label}</a>)}
          </nav>
        </div>
        <div className="footer__bottom">
          <span>© OOH Sim</span>
          <span>屋外広告シミュレーション SaaS</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { QRBand, WidgetBand, Pricing, FinalCTA, FAQ, Footer });