// Sections 6–9: 特徴・比較 / 導入の流れ / FAQ / 最終CTA / Footer

// ── 6. このサービスの特徴（比較表） ──────────────────────────────────────
function CompareSection() {
  const rows = [
    { k: '月額費用',     a: '月額 1〜3万円〜',     b: '0円（買い切り）', highlightB: true },
    { k: '初期費用',     a: '別途 数十万円のことも', b: '39,800円ぽっきり' },
    { k: '導入難易度',   a: '高（要件定義から）',   b: '低（設定込み納品）' },
    { k: '操作習得',     a: '研修・マニュアル必要',  b: 'LINEを使うだけ' },
    { k: 'サポート工数', a: '社内の管理者が必要',    b: '不要' },
    { k: '導入スピード', a: '数週間〜数ヶ月',       b: '最短3営業日' },
    { k: '商談・打合せ', a: '必要',                b: '不要' },
  ];
  return (
    <section className="section soft" id="compare">
      <style>{`
        .cmp-wrap {
          background: #fff;
          border: 1px solid var(--c-line);
          border-radius: var(--radius-lg);
          overflow: hidden;
          box-shadow: var(--shadow-sm);
        }
        .cmp-head {
          display: grid;
          grid-template-columns: 1.1fr 1fr 1.1fr;
          background: var(--c-bg-soft);
          border-bottom: 1px solid var(--c-line);
        }
        .cmp-head > div {
          padding: 18px 18px;
          font-size: 13px;
          font-weight: 700;
          color: var(--c-ink-3);
          text-align: center;
        }
        .cmp-head .ours {
          background: var(--c-ink);
          color: #fff;
          display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .cmp-head .ours .mark {
          width: 24px; height: 24px; border-radius: 7px;
          background: url('assets/brand-icon.png') center/cover no-repeat;
          color: transparent;
          font-size: 0;
        }
        .cmp-row {
          display: grid;
          grid-template-columns: 1.1fr 1fr 1.1fr;
          border-bottom: 1px solid var(--c-line-2);
        }
        .cmp-row:last-child { border-bottom: 0; }
        .cmp-row > div {
          padding: 16px 18px;
          font-size: 14px;
          display: flex; align-items: center;
          line-height: 1.5;
        }
        .cmp-row .k {
          background: var(--c-bg-soft);
          font-weight: 600;
          color: var(--c-ink-2);
          font-size: 13px;
        }
        .cmp-row .a {
          color: var(--c-ink-3);
          justify-content: center; text-align: center;
        }
        .cmp-row .b {
          color: var(--c-ink);
          font-weight: 600;
          justify-content: center; text-align: center;
          background: rgba(31,186,104,.04);
          border-left: 1px solid var(--c-line-2);
        }
        .cmp-row .a .x, .cmp-row .b .o {
          margin-right: 8px;
          flex: 0 0 auto;
        }
        .cmp-row .a .x { color: var(--c-ink-4); }
        .cmp-row .b .o { color: var(--c-green); }
        .cmp-row .b .strong {
          font-weight: 700;
          color: var(--c-green-ink);
          background: var(--c-green-soft);
          padding: 4px 10px;
          border-radius: 999px;
          font-size: 13px;
        }
        @media (max-width: 720px) {
          .cmp-head, .cmp-row { grid-template-columns: 1.2fr 1fr 1fr; }
          .cmp-row > div { padding: 12px 10px; font-size: 12.5px; }
          .cmp-row .a, .cmp-row .b { font-size: 12.5px; }
        }

        .strong-pills {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
          gap: 10px;
          margin-bottom: 36px;
        }
        .sp {
          display: flex; align-items: center; gap: 10px;
          background: #fff;
          border: 1px solid var(--c-line);
          border-radius: 12px;
          padding: 14px 16px;
          font-size: 14px;
          font-weight: 600;
        }
        .sp .ck {
          width: 26px; height: 26px; border-radius: 8px;
          background: var(--c-green-soft);
          color: var(--c-green-ink);
          display: grid; place-items: center;
          flex: 0 0 auto;
        }
      `}</style>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">このサービスの特徴</span>
          <h2>「ぽっきり、ラク、すぐ」を、形に。</h2>
        </div>

        <div className="strong-pills">
          {[
            '39,800円ぽっきり',
            '買い切り（月額0円）',
            '商談・打合せ不要',
            '最短3営業日で導入',
            '初期設定・連携込み',
            '小規模事業者向け設計',
          ].map((t, i) => (
            <div key={i} className="sp">
              <span className="ck"><IconCheck size={16} /></span>
              {t}
            </div>
          ))}
        </div>

        <div className="cmp-wrap">
          <div className="cmp-head">
            <div>項目</div>
            <div>一般的なDXツール</div>
            <div className="ours">
              <span className="mark"></span>
              LINE秘書
            </div>
          </div>
          {rows.map((r, i) => (
            <div key={i} className="cmp-row">
              <div className="k">{r.k}</div>
              <div className="a">
                <IconCross size={16} className="x" />
                <span>{r.a}</span>
              </div>
              <div className="b">
                <IconCheckCircle size={16} className="o" />
                {r.highlightB ? <span className="strong">{r.b}</span> : <span>{r.b}</span>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── 7. 導入の流れ ───────────────────────────────────────────────────────────
function StepsSection() {
  const steps = [
    {
      n: '01',
      title: 'お申し込み',
      body: 'LINEまたはWebフォームから、お支払いまで完了。商談や事前ヒアリングは一切ありません。',
      meta: '所要 約3分',
      Ico: IconChat,
    },
    {
      n: '02',
      title: 'Google連携設定',
      body: 'こちらで初期設定を代行します。お客様にお願いするのは、Google Workspaceの管理者承認だけ。',
      meta: '所要 約1営業日',
      Ico: IconShield,
    },
    {
      n: '03',
      title: '納品・利用開始',
      body: 'LINEの「友だち追加」で完了。届いたその瞬間から、社員全員が使い始められます。',
      meta: '最短 3営業日',
      Ico: IconBolt,
    },
  ];
  return (
    <section className="section" id="steps">
      <style>{`
        .steps-banner {
          display: inline-flex; align-items: center; gap: 10px;
          padding: 8px 16px;
          background: var(--c-ink);
          color: #fff;
          border-radius: 999px;
          font-size: 13px;
          font-weight: 700;
          margin: 0 0 10px;
        }
        .steps-banner .acc { color: var(--c-orange); }
        .steps-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
          margin-top: 12px;
        }
        @media (max-width: 820px) {
          .steps-grid { grid-template-columns: 1fr; }
        }
        .step-card {
          position: relative;
          background: #fff;
          border: 1px solid var(--c-line);
          border-radius: var(--radius-lg);
          padding: 28px 24px;
          display: flex; flex-direction: column; gap: 12px;
        }
        .step-card .n {
          font-family: var(--font-num);
          font-size: 14px;
          color: var(--c-ink-4);
          letter-spacing: .12em;
          font-weight: 700;
        }
        .step-card .ic {
          width: 52px; height: 52px; border-radius: 16px;
          background: var(--c-green-soft);
          color: var(--c-green-ink);
          display: grid; place-items: center;
        }
        .step-card .tt { font-size: 19px; font-weight: 700; }
        .step-card .bd { font-size: 13.5px; color: var(--c-ink-3); line-height: 1.7; flex: 1; }
        .step-card .meta {
          margin-top: 4px;
          font-size: 12px;
          color: var(--c-ink-3);
          padding: 6px 10px;
          background: var(--c-bg-soft);
          border-radius: 8px;
          align-self: flex-start;
          font-weight: 600;
        }
        .step-card .arrow {
          position: absolute;
          right: -22px; top: 50%;
          transform: translateY(-50%);
          width: 28px; height: 28px; border-radius: 50%;
          background: #fff;
          border: 1px solid var(--c-line);
          color: var(--c-ink-3);
          display: grid; place-items: center;
          z-index: 2;
        }
        @media (max-width: 820px) {
          .step-card .arrow {
            right: 50%; top: auto; bottom: -22px;
            transform: translateX(50%) rotate(90deg);
          }
        }
      `}</style>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow blue">導入の流れ</span>
          <h2>たった3ステップで、利用開始。</h2>
          <div className="steps-banner">
            <IconCheckCircle size={16} className="acc" />
            <span>打ち合わせ・商談は<span className="acc">不要</span></span>
          </div>
        </div>

        <div className="steps-grid">
          {steps.map((s, i) => (
            <div key={i} className="step-card">
              <span className="n">STEP {s.n}</span>
              <div className="ic"><s.Ico size={26} /></div>
              <div className="tt">{s.title}</div>
              <div className="bd">{s.body}</div>
              <span className="meta">{s.meta}</span>
              {i < steps.length - 1 && (
                <div className="arrow"><IconArrow size={14} /></div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── 8. FAQ ─────────────────────────────────────────────────────────────────
function FAQItem({ q, a, defaultOpen = false }) {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <div className={`faq-item ${open ? 'open' : ''}`}>
      <button className="faq-q" onClick={() => setOpen(!open)} aria-expanded={open}>
        <span className="q-mark">Q</span>
        <span className="q-text">{q}</span>
        <span className="q-ic">{open ? <IconMinus size={18} /> : <IconPlus size={18} />}</span>
      </button>
      <div className="faq-a" style={{ maxHeight: open ? 400 : 0 }}>
        <div className="faq-a-inner">
          <span className="a-mark">A</span>
          <div>{a}</div>
        </div>
      </div>
    </div>
  );
}

function FAQSection() {
  const items = [
    {
      q: '本当に月額費用はかかりませんか？',
      a: '現状のままで問題ありません。買い切り39,800円のみで、月額費用やアカウント数による追加料金は一切いただきません。',
    },
    {
      q: 'Gmailアカウントがあれば使えますか？',
      a: 'はい、Gmailアカウントをお持ちなら、すぐにご利用いただけます。普段GoogleカレンダーやGoogleドライブをお使いの方なら、新しく何かを契約したり、特別な準備をする必要はありません。いつものGoogle環境のまま始められます。',
    },
    {
      q: 'LINEは個人のLINEでも使えますか？',
      a: 'はい、お使いの個人LINEからご利用いただけます。LINE WORKSは不要です。会社用に別途LINEアカウントを取得いただく必要もありません。',
    },
    {
      q: 'セキュリティ面は大丈夫ですか？',
      a: '通信はすべて暗号化されています。領収書の読み取りには、GoogleのAIを利用しています。保存先のGoogleドライブも読み取りのAIもすべてGoogleのサービス内で完結するため、お客様が普段お使いのGoogle以外に、新たに業務データを預ける先は増えません。読み取った領収書のデータは、お客様ご自身のGoogleドライブとスプレッドシートに保存され、当社が長期的に保管・管理することはありません。',
    },
    {
      q: '導入までどれくらいかかりますか？',
      a: '最短で3営業日です。お申し込み後、ご利用になるGoogleアカウントとの連携設定を当社で行い、LINE友だち追加でご利用開始となります。商談やお打ち合わせは必要ありません。',
    },
    {
      q: '何名まで利用できますか？',
      a: '人数の制限はありません。会社のLINEに秘書を追加すれば、社員の方が何人で送っても、同じGoogleドライブとスプレッドシートにまとめて記録されます。買い切り価格39,800円のまま、社内の全員でご利用いただけます。なお、ひとつのご契約で連携するGoogle環境は1社分（1つのGoogleアカウント）です。複数の事業で別々に使いたい場合は、その数だけお申し込みください。',
    },
  ];
  return (
    <section className="section soft" id="faq">
      <style>{`
        .faq-list {
          max-width: 760px; margin: 0 auto;
          display: flex; flex-direction: column; gap: 10px;
        }
        .faq-item {
          background: #fff;
          border: 1px solid var(--c-line);
          border-radius: 14px;
          overflow: hidden;
          transition: border-color .2s;
        }
        .faq-item.open { border-color: var(--c-ink-2); }
        .faq-q {
          width: 100%;
          appearance: none; background: transparent; border: 0;
          padding: 18px 20px;
          display: grid;
          grid-template-columns: 28px 1fr 28px;
          align-items: center;
          gap: 14px;
          cursor: pointer;
          text-align: left;
        }
        .faq-q .q-mark {
          font-family: var(--font-num);
          font-weight: 800;
          color: var(--c-green);
          font-size: 18px;
        }
        .faq-q .q-text {
          font-size: 15px;
          font-weight: 600;
          color: var(--c-ink);
          line-height: 1.55;
        }
        .faq-q .q-ic { color: var(--c-ink-4); }
        .faq-a {
          overflow: hidden;
          transition: max-height .25s ease;
        }
        .faq-a-inner {
          padding: 0 20px 20px;
          display: grid;
          grid-template-columns: 28px 1fr;
          gap: 14px;
          font-size: 14px;
          color: var(--c-ink-3);
          line-height: 1.8;
        }
        .a-mark {
          font-family: var(--font-num);
          font-weight: 800;
          color: var(--c-orange);
          font-size: 18px;
        }
      `}</style>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow neutral">よくある質問</span>
          <h2>導入前のご不安に、お答えします。</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <FAQItem key={i} q={it.q} a={it.a} defaultOpen={i === 0} />
          ))}
        </div>
      </div>
    </section>
  );
}

// ── 9. 最終CTA ──────────────────────────────────────────────────────────────
function FinalCTASection() {
  return (
    <section className="section" id="cta">
      <style>{`
        .cta-card {
          background: var(--c-ink);
          color: #fff;
          border-radius: 28px;
          padding: 56px 40px;
          overflow: hidden;
          position: relative;
          text-align: center;
        }
        .cta-card::before {
          content: '';
          position: absolute; inset: 0;
          background:
            radial-gradient(40% 60% at 18% 100%, rgba(31,186,104,.22), transparent 70%),
            radial-gradient(40% 60% at 90% 0%, rgba(47,123,229,.18), transparent 70%);
          pointer-events: none;
        }
        .cta-card > * { position: relative; }
        .cta-card .eyebrow {
          background: rgba(255,255,255,.10);
          color: #fff;
        }
        .cta-card h2 {
          font-size: clamp(28px, 5vw, 44px);
          font-weight: 800;
          letter-spacing: -.01em;
          margin: 18px 0 14px;
          line-height: 1.35;
        }
        .cta-card h2 .g { color: var(--c-green); }
        .cta-card p { color: rgba(255,255,255,.7); margin: 0 0 28px; font-size: 15px; }
        .cta-price {
          display: inline-flex; align-items: baseline; gap: 10px;
          background: rgba(255,255,255,.08);
          padding: 16px 28px;
          border-radius: 16px;
          margin-bottom: 28px;
        }
        .cta-price .v {
          font-family: var(--font-num);
          font-size: 38px; font-weight: 800; letter-spacing: -.02em;
        }
        .cta-price .yen { font-size: 22px; font-weight: 700; }
        .cta-price .sub { color: rgba(255,255,255,.6); font-size: 13px; margin-left: 6px; }
        .cta-actions {
          display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
        }
        .cta-actions .btn-ghost {
          background: rgba(255,255,255,.05);
          color: #fff;
          border-color: rgba(255,255,255,.15);
        }
        .cta-actions .btn-ghost:hover {
          border-color: rgba(255,255,255,.45);
        }
        .cta-note {
          margin-top: 18px;
          font-size: 12.5px;
          color: rgba(255,255,255,.55);
        }
      `}</style>
      <div className="wrap">
        <div className="cta-card">
          <span className="eyebrow">最後にもう一度</span>
          <h2>そのGoogle作業、<br /><span className="g">LINE</span>に任せませんか？</h2>
          <p>申込みから利用開始まで、最短3営業日。</p>

          <div className="cta-price">
            <span className="yen">¥</span>
            <span className="v">39,800</span>
            <span className="sub">税抜・買い切り</span>
          </div>

          <div className="cta-actions">
            <a href="https://lin.ee/tCd8Occ" target="_blank" rel="noopener noreferrer" className="btn btn-line btn-xl"><LogoLine size={28} /> LINEで申し込む</a>
            <a href="https://lin.ee/tCd8Occ" target="_blank" rel="noopener noreferrer" className="btn btn-ghost btn-xl"><LogoLine size={28} /> LINEで問い合わせ</a>
          </div>

          <div className="cta-note">月額費用・追加費用はかかりません。</div>
        </div>
      </div>
    </section>
  );
}

// ── Footer ─────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap row">
        <div>
          <div className="brand" style={{ marginBottom: 6 }}>
            <span className="mark"></span>
            <span>LINE<span style={{ color: 'var(--c-ink-3)', fontWeight: 600 }}>秘書</span></span>
          </div>
          <div style={{ fontSize: 12 }}>© 2026 ResetCamp AI</div>
        </div>
        <div>
          <a href="#">特定商取引法に基づく表記</a>
          <a href="#">プライバシーポリシー</a>
          <a href="#">利用規約</a>
          <a href="https://lin.ee/tCd8Occ" target="_blank" rel="noopener noreferrer">LINEで問い合わせ</a>
        </div>
      </div>
      <div className="wrap" style={{ marginTop: 18, fontSize: 11, color: 'var(--c-ink-4)' }}>
        ※ LINE は LINE株式会社の登録商標です。Google および Google Workspace は Google LLC の商標です。本サービスはこれら各社が提供する公式サービスではなく、各サービスのAPIを利用した第三者連携ツールです。
      </div>
    </footer>
  );
}

Object.assign(window, { CompareSection, StepsSection, FAQSection, FinalCTASection, Footer });
