/* sections-mid.jsx — Solution (Before/After), Features (4), Use cases (3) */

function Solution() {
  return (
    <section className="section reveal" id="solution">
      <div className="container">
        <div className="section-head section-head--center">
          <div className="eyebrow" style={{ justifyContent: "center" }}>OOH Sim の解決策</div>
          <h2 className="section-title">OOH Simなら、<br />掲載イメージをすぐに見せられます。</h2>
        </div>

        <div className="solve">
          <div className="solve__col">
            <div className="solve__cap"><span className="pill">Before</span>空き看板</div>
            <Billboard variant="empty" code="billboard-before" />
          </div>

          <div className="solve__mid">
            <div className="solve__arrow"><Icon name="arrow" size={26} stroke={2.2} /></div>
            <div className="solve__midtext">URL入力だけで、<br />掲載イメージを作成</div>
          </div>

          <div className="solve__col">
            <div className="solve__cap is-after"><span className="pill">After</span>広告を合成した看板</div>
            <Billboard variant="ad" creative={{ brand: "CLIENT BRAND", head: "あなたの広告が、\nこの街に。", cta: "今すぐチェック", logo: "C" }} />
          </div>
        </div>

        <div className="solve__note">
          <div className="ic"><Icon name="shield" size={20} /></div>
          <p>
            AIが出すのはあくまで<strong>ラフ案・叩き台</strong>です。自動作成された内容は必要に応じて<strong>修正・再作成</strong>できます。
            「まず見せる」ための速さを重視しているため、仕上がりの精度は営業担当者が確認・調整してから使うスタイルを想定しています。
          </p>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Features ---------------- */
function FeatDemo1() {
  return (
    <div className="demo-surface">
      <div className="sim__field" style={{ marginBottom: 12 }}>
        <div className="sim__input" style={{ height: 40, fontSize: 12.5 }}>
          <Icon name="link" size={14} /><span>https://client-site.co.jp</span>
        </div>
        <button className="btn btn--cta" style={{ height: 40, padding: "0 14px", fontSize: 12.5 }}>
          <Icon name="sparkle" size={13} />作成
        </button>
      </div>
      <div style={{ position: "relative" }}>
        <Billboard variant="ad" creative={{ brand: "CLIENT", head: "新サービス、\n登場。", cta: "詳細を見る", logo: "C" }} />
        <span className="tag tag--ai"><Icon name="sparkle" size={12} />AIが自動作成</span>
      </div>
    </div>
  );
}

function FeatDemo2() {
  const btns = [
    { icon: "edit", label: "文章を修正" },
    { icon: "image", label: "画像を変更" },
    { icon: "layout", label: "レイアウトを調整" },
  ];
  return (
    <div className="demo-surface">
      <div className="editbtns">
        {btns.map((b) => (
          <button className="editbtn" key={b.label}><Icon name={b.icon} size={16} />{b.label}</button>
        ))}
        <button className="editbtn editbtn--regen"><Icon name="refresh" size={16} />再作成</button>
      </div>
    </div>
  );
}

function FeatDemo3() {
  const inv = [
    { name: "駅前ロータリー", meta: "大型ビジョン・空き" },
    { name: "国道沿いボード", meta: "ロードサイド・空き" },
  ];
  return (
    <div className="demo-surface">
      <div className="inv-grid">
        {inv.map((s) => (
          <div className="inv" key={s.name}>
            <div className="inv__thumb"><div className="mini-frame"></div></div>
            <div className="inv__name">{s.name}</div>
            <div className="inv__meta">{s.meta}</div>
            <button className="inv__try">この枠で試す</button>
          </div>
        ))}
      </div>
    </div>
  );
}

function FeatDemo4() {
  return (
    <div className="demo-surface">
      <div className="embed">
        <div className="embed__board" style={{ position: "relative" }}>
          <Billboard variant="empty" />
          <div className="qr-tag" style={{ width: 52, height: 52, bottom: -10 }}><QRGlyph color="var(--navy)" /></div>
        </div>
        <div className="phone">
          <div className="phone__screen">
            <div className="phone__top"><Icon name="smartphone" size={9} style={{ marginRight: 4 }} />OOH Sim</div>
            <div className="phone__body">
              <div className="phone__board"></div>
              <div className="phone__cta"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const FEATURES = [
  { n: "01", icon: "edit", title: "作成後に内容を調整・再作成", body: "AIが出すのは叩き台です。文章・画像・レイアウトを調整したり再作成したりして、提案に使えるイメージに短時間で整えられます。", demo: <FeatDemo2 /> },
  { n: "02", icon: "users", title: "広告主や代理店と検討の輪を作る", body: "広告主や代理店にもアカウントを発行可能。顧客自身でイメージを確認・比較できるから検討が具体化しやすく、情報共有もスムーズ。競合他社より先に話を前に進められます。", demo: <FeatDemo3 /> },
];

function Features() {
  return (
    <section className="section section--blue reveal" id="features">
      <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">作成・修正・共有・体験まで、OOH営業に必要な機能をシンプルにまとめました。</p>
        </div>
        <div className="feat-grid">
          {FEATURES.map((f) => (
            <article className="fcard" key={f.n}>
              <div className="fcard__head">
                <div className="fcard__n"><b><Icon name={f.icon} size={14} /></b>FEATURE {f.n}</div>
                <h3>{f.title}</h3>
                <p>{f.body}</p>
              </div>
              <div className="fcard__demo">{f.demo}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Use cases ---------------- */
const USECASES = [
  { step: "商談前", code: "usecase-before-meeting", title: "提案ラフをあらかじめ準備", body: "営業担当者が広告主専用の提案ラフを準備。「このイメージです」とすぐ見せられる叩き台を商談に持ち込めます。" },
  { step: "商談中・商談後", code: "usecase-in-meeting", title: "掲載枠を自分で見比べる", body: "代理店や広告主が、自分で複数の掲載枠を比較。気になる枠でその場でイメージを確認できます。" },
  { step: "Webサイト上", code: "usecase-web", title: "HPから掲載シミュレーションを体験", body: "自社WebサイトにウィジェットとしてOOH Simを埋め込み。サイトを訪れた広告主候補が、URLを入れるだけで自社の掲載イメージをその場でシミュレーションできます。" },
  { step: "実際の空き枠・現地", code: "usecase-onsite", title: "看板の前でQRからシミュレーション", body: "空いている看板や交通広告枠にQRコードを設置。興味を持った事業者がスマートフォンをかざすだけで、その枠に自社広告を掲載したラフをその場で確認できます。" },
];

function UseCases() {
  return (
    <section className="section reveal" id="usecases">
      <div className="container">
        <div className="section-head section-head--center">
          <div className="eyebrow" style={{ justifyContent: "center" }}>利用シーン</div>
          <h2 className="section-title">営業担当者だけでなく、<br />広告主自身が試せます。</h2>
        </div>
        <div className="uc-grid">
          {USECASES.map((u) => (
            <article className="uc" key={u.code}>
              <div className="uc__media">
                <span className="uc__step">{u.step}</span>
                <div className="person">
                  <div className="person__ph">
                    <Icon name="users" size={30} />
                    <code>{u.code}</code>
                  </div>
                </div>
              </div>
              <div className="uc__body">
                <h3>{u.title}</h3>
                <p>{u.body}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Solution, Features, UseCases });