// Sections 2–5: 悩み / サービス説明 / できること / 導入メリット

// ── 2. よくある悩み ────────────────────────────────────────────────────────
function PainSection() {
  const pains = [
    { icon: <IconReceipt />, text: '領収書の整理が面倒。経費入力で毎月時間が溶ける。' },
    { icon: <IconDrive />,   text: 'Googleドライブに保存する手間が、地味につらい。' },
    { icon: <IconCalendar />, text: 'カレンダーを毎回開いて予定を確認するのが面倒。' },
    { icon: <IconUsers />,   text: '社員に新しいツールの運用を覚えさせるのが大変。' },
    { icon: <IconBolt />,    text: '新しいシステム導入は、検討も導入も「重い」。' },
  ];
  return (
    <section className="section soft" id="pain">
      <style>{`
        .pain-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
          gap: var(--gap);
        }
        .pain-card {
          background: #fff;
          border: 1px solid var(--c-line);
          border-radius: var(--radius);
          padding: 22px 20px;
          display: flex; flex-direction: column; gap: 12px;
          transition: border-color .2s, transform .2s;
        }
        .pain-card:hover { border-color: var(--c-ink-4); transform: translateY(-2px); }
        .pain-ic {
          width: 44px; height: 44px; border-radius: 12px;
          background: var(--c-bg-soft);
          color: var(--c-ink-3);
          display: grid; place-items: center;
        }
        .pain-text { font-size: 14.5px; color: var(--c-ink-2); line-height: 1.7; }
        .pain-callout {
          margin-top: 36px;
          padding: 28px 24px;
          background: var(--c-ink);
          color: #fff;
          border-radius: var(--radius-lg);
          display: flex; align-items: center; gap: 16px;
          justify-content: center;
          font-size: clamp(16px, 2.4vw, 22px);
          font-weight: 700;
          letter-spacing: .005em;
        }
        .pain-callout .arr {
          color: var(--c-green);
          flex: 0 0 auto;
        }
        .pain-callout em {
          font-style: normal;
          color: var(--c-green);
        }
      `}</style>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow neutral">よくある悩み</span>
          <h2>毎日のこの「面倒」、<br />ぜんぶLINEに任せませんか？</h2>
        </div>

        <div className="pain-grid">
          {pains.map((p, i) => (
            <div key={i} className="pain-card">
              <div className="pain-ic">{React.cloneElement(p.icon, { size: 22 })}</div>
              <div className="pain-text">{p.text}</div>
            </div>
          ))}
        </div>

        <div className="pain-callout">
          <IconArrowDown size={28} className="arr" />
          <span>その面倒、<em>LINEだけ</em>で終わります。</span>
        </div>
      </div>
    </section>
  );
}

// ── 3. サービス説明 ────────────────────────────────────────────────────────
function ServiceSection() {
  return (
    <section className="section" id="service">
      <style>{`
        .service-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 56px;
          align-items: center;
        }
        @media (max-width: 880px) {
          .service-grid { grid-template-columns: 1fr; gap: 36px; }
        }
        .svc-points { display: grid; gap: 14px; margin-top: 26px; }
        .svc-point {
          display: flex; align-items: flex-start; gap: 14px;
          padding: 14px 16px;
          background: var(--c-bg-warm);
          border-radius: var(--radius);
        }
        .svc-point .ck {
          width: 30px; height: 30px; border-radius: 50%;
          background: var(--c-green);
          color: #fff;
          display: grid; place-items: center;
          flex: 0 0 auto;
        }
        .svc-point .txt b {
          display: block; font-size: 14.5px; margin-bottom: 2px; color: var(--c-ink);
        }
        .svc-point .txt span {
          font-size: 13px; color: var(--c-ink-3); line-height: 1.6;
        }
        .svc-diagram {
          position: relative;
          aspect-ratio: 1 / 1;
          max-width: 440px;
          width: 100%;
          margin: 0 auto;
        }
      `}</style>
      <div className="wrap">
        <div className="service-grid">
          <div>
            <span className="eyebrow blue">サービス概要</span>
            <h2 style={{
              fontSize: 'clamp(26px, 4.4vw, 38px)',
              fontWeight: 700,
              letterSpacing: '-.01em',
              margin: '14px 0 16px',
              lineHeight: 1.4,
              textWrap: 'balance',
            }}>
              普段使っている<span style={{ color: 'var(--c-blue)' }}>Google</span>を、<br />
              もっとラクに。
            </h2>
            <p style={{ color: 'var(--c-ink-3)', fontSize: 15, lineHeight: 1.85, margin: 0 }}>
              LINE秘書は、Googleカレンダー・Googleドライブ・スプレッドシートと連携し、
              日々の細かな作業を、すべてLINEから完結できるサービスです。
            </p>

            <div className="svc-points">
              <div className="svc-point">
                <div className="ck"><IconCheck size={16} /></div>
                <div className="txt">
                  <b>新しいアプリを覚える必要なし</b>
                  <span>普段の「LINEを開く」だけで、業務が片付きます。</span>
                </div>
              </div>
              <div className="svc-point">
                <div className="ck"><IconCheck size={16} /></div>
                <div className="txt">
                  <b>既存のGoogle環境にそのまま接続</b>
                  <span>データはお手元のドライブ・カレンダーに保存。乗り換え不要。</span>
                </div>
              </div>
              <div className="svc-point">
                <div className="ck"><IconCheck size={16} /></div>
                <div className="txt">
                  <b>商談・導入研修は不要</b>
                  <span>初期設定込みで納品。届いたその日から、社員全員が使えます。</span>
                </div>
              </div>
            </div>
          </div>

          <ServiceDiagram />
        </div>
      </div>
    </section>
  );
}

// 連携図（LINE秘書 hub → 各サービス）
function ServiceDiagram() {
  return (
    <div className="svc-diagram">
      <style>{`
        .diag-card {
          position: absolute;
          background: #fff;
          border: 1px solid var(--c-line);
          border-radius: 18px;
          box-shadow: var(--shadow);
          padding: 12px 14px;
          display: flex; align-items: center; gap: 10px;
          min-width: 138px;
        }
        .diag-card .tile {
          width: 34px; height: 34px;
          border-radius: 10px;
          display: grid; place-items: center;
          background: var(--c-bg-soft);
          flex: 0 0 auto;
        }
        .diag-card .nm { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
        .diag-card .sub { font-size: 10.5px; color: var(--c-ink-3); }

        .diag-hub {
          position: absolute;
          left: 50%; top: 50%;
          transform: translate(-50%, -50%);
          background: var(--c-ink);
          color: #fff;
          border-radius: 22px;
          padding: 18px 22px;
          display: flex; align-items: center; gap: 12px;
          box-shadow: 0 14px 30px rgba(15,21,32,.20);
          z-index: 2;
        }
        .diag-hub .mark {
          width: 48px; height: 48px; border-radius: 14px;
          background: url('assets/brand-icon.png') center/cover no-repeat;
          color: transparent;
          font-size: 0;
          box-shadow: 0 2px 8px rgba(0,0,0,.18);
        }
        .diag-hub b { font-size: 14px; font-weight: 700; }
        .diag-hub span { display: block; font-size: 10.5px; color: rgba(255,255,255,.65); }

        .diag-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
        .diag-svg path {
          stroke: var(--c-line); stroke-width: 1.5;
          fill: none; stroke-dasharray: 4 4;
        }
        .diag-svg .ping {
          fill: var(--c-green);
          animation: pingMove 4s linear infinite;
        }
      `}</style>
      <svg className="diag-svg" viewBox="0 0 400 400" preserveAspectRatio="none">
        <path d="M70 80 Q 200 80 200 200" />
        <path d="M70 320 Q 200 320 200 200" />
        <path d="M330 80 Q 200 80 200 200" />
        <path d="M330 320 Q 200 320 200 200" />
      </svg>

      <div className="diag-card" style={{ top: '8%', left: '2%' }}>
        <div className="tile" style={{ background: '#fff' }}>
          <LogoCalendar size={26} />
        </div>
        <div>
          <div className="nm">カレンダー</div>
          <div className="sub">予定・リマインド</div>
        </div>
      </div>
      <div className="diag-card" style={{ bottom: '8%', left: '2%' }}>
        <div className="tile" style={{ background: '#fff' }}>
          <LogoDrive size={26} />
        </div>
        <div>
          <div className="nm">ドライブ</div>
          <div className="sub">領収書・書類</div>
        </div>
      </div>
      <div className="diag-card" style={{ top: '8%', right: '2%' }}>
        <div className="tile" style={{ background: '#fff' }}>
          <LogoSheet size={26} />
        </div>
        <div>
          <div className="nm">スプレッドシート</div>
          <div className="sub">経費・記録</div>
        </div>
      </div>
      <div className="diag-card" style={{ bottom: '8%', right: '2%' }}>
        <div className="tile" style={{ background: 'var(--c-orange-soft)' }}>
          <IconBolt size={20} color="var(--c-orange)" />
        </div>
        <div>
          <div className="nm">自動連携</div>
          <div className="sub">設定済み</div>
        </div>
      </div>

      <div className="diag-hub">
        <div className="mark"></div>
        <div>
          <b>LINE秘書</b>
          <span>あなた専属のアシスタント</span>
        </div>
      </div>
    </div>
  );
}

// ── 4. できること（カードUI） ────────────────────────────────────────────
function FeaturesSection() {
  return (
    <section className="section warm" id="features">
      <style>{`
        .feat-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 24px;
        }
        @media (max-width: 920px) {
          .feat-grid { grid-template-columns: 1fr; }
        }
        .feat-card {
          background: #fff;
          border: 1px solid var(--c-line);
          border-radius: var(--radius-lg);
          padding: 32px 28px 24px;
          display: flex; flex-direction: column; gap: 18px;
          overflow: hidden;
          position: relative;
        }
        .feat-num {
          font-family: var(--font-num);
          font-size: 14px;
          font-weight: 700;
          color: var(--c-green);
          letter-spacing: .12em;
        }
        .feat-title { font-size: 24px; font-weight: 700; letter-spacing: -.005em; line-height: 1.4; }
        .feat-bullets {
          list-style: none; padding: 0; margin: 0;
          display: grid; gap: 10px;
        }
        .feat-bullets li {
          display: flex; align-items: flex-start; gap: 10px;
          font-size: 14.5px;
          color: var(--c-ink-2);
          line-height: 1.6;
        }
        .feat-bullets li .ck {
          width: 22px; height: 22px; border-radius: 7px;
          background: var(--c-green-soft);
          color: var(--c-green-ink);
          display: grid; place-items: center;
          flex: 0 0 auto; margin-top: 2px;
        }
        .feat-note {
          margin-top: auto;
          padding: 12px 14px;
          background: var(--c-bg-soft);
          border-radius: 12px;
          font-size: 12.5px;
          color: var(--c-ink-3);
          display: flex; align-items: center; gap: 8px;
        }
        .feat-mock { display: flex; justify-content: center; padding: 12px 0 0; }
      `}</style>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">できること</span>
          <h2>LINEで送るだけ、聞くだけ。</h2>
          <p>難しい操作はありません。普段のLINEのやり取りと同じ感覚で使えます。</p>
        </div>

        <div className="feat-grid">
          <div className="feat-card">
            <span className="feat-num">FEATURE 01</span>
            <div className="feat-title">領収書OCR<br/>― 撮って送るだけで経費整理</div>
            <ul className="feat-bullets">
              <li><span className="ck"><IconCheck size={14} /></span>領収書の写真をLINEに送るだけ</li>
              <li><span className="ck"><IconCheck size={14} /></span>AIが日付・金額・店名を自動で読み取り</li>
              <li><span className="ck"><IconCheck size={14} /></span>Google Driveに自動保存</li>
              <li><span className="ck"><IconCheck size={14} /></span>スプレッドシートにも自動記録</li>
            </ul>
            <div className="feat-mock">
              <div style={{ width: '100%', maxWidth: 280 }}>
                <ChatMock variant="receipt" />
              </div>
            </div>
            <div className="feat-note">
              <IconSparkle size={14} color="var(--c-orange)" />
              <span>経費入力・ファイリングの手間を、まるごと削減</span>
            </div>
          </div>

          <div className="feat-card">
            <span className="feat-num" style={{ color: 'var(--c-blue)' }}>FEATURE 02</span>
            <div className="feat-title">スケジュール管理<br/>― 聞けば、すぐ返事が来る</div>
            <ul className="feat-bullets">
              <li><span className="ck"><IconCheck size={14} /></span>「今日の予定は？」と聞くだけ</li>
              <li><span className="ck"><IconCheck size={14} /></span>「来週の予定は？」にも即答</li>
              <li><span className="ck"><IconCheck size={14} /></span>Googleカレンダーと完全連携</li>
              <li><span className="ck"><IconCheck size={14} /></span>会議前のリマインドもLINEで通知</li>
            </ul>
            <div className="feat-mock">
              <div style={{ width: '100%', maxWidth: 280 }}>
                <ChatMock variant="schedule" />
              </div>
            </div>
            <div className="feat-note">
              <IconClock size={14} color="var(--c-blue)" />
              <span>カレンダーをわざわざ開く必要がなくなります</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── 5. 導入メリット ─────────────────────────────────────────────────────────
function BenefitsSection() {
  const items = [
    { Ico: IconBolt,    title: '入力作業を削減',         body: '経費入力・予定確認に費やしていた時間が、まるごと不要に。' },
    { Ico: IconUsers,   title: '社員教育が不要',         body: 'みんなが使い慣れているLINE。導入研修も覚えることもなし。' },
    { Ico: IconChat,    title: 'LINEだから、定着する',   body: '新しいアプリと違って、自然に使われ続けるツールに。' },
    { Ico: IconDrive,   title: 'Google環境はそのまま',   body: 'データ移行も乗り換えも不要。今の環境にそのまま接続。' },
    { Ico: IconNoMonthly, title: '月額コストなし',       body: '買い切り39,800円で、追加課金もアカウント課金もありません。' },
  ];
  return (
    <section className="section" id="benefits">
      <style>{`
        .ben-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
          gap: var(--gap);
        }
        .ben-card {
          background: #fff;
          border: 1px solid var(--c-line);
          border-radius: var(--radius);
          padding: 24px 22px;
          display: flex; flex-direction: column; gap: 12px;
          transition: transform .2s, box-shadow .2s;
        }
        .ben-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
        .ben-ic {
          width: 44px; height: 44px; border-radius: 12px;
          background: var(--c-green-soft);
          color: var(--c-green-ink);
          display: grid; place-items: center;
        }
        .ben-ic.b { background: var(--c-blue-soft); color: var(--c-blue); }
        .ben-ic.o { background: var(--c-orange-soft); color: var(--c-orange); }
        .ben-title { font-size: 16px; font-weight: 700; }
        .ben-body  { font-size: 13.5px; color: var(--c-ink-3); line-height: 1.7; }
      `}</style>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow orange">導入メリット</span>
          <h2>導入したその日から、効いてくる。</h2>
        </div>

        <div className="ben-grid">
          {items.map((it, i) => {
            const cls = i % 3 === 1 ? 'b' : i % 3 === 2 ? 'o' : '';
            return (
              <div key={i} className="ben-card">
                <div className={`ben-ic ${cls}`}><it.Ico size={22} /></div>
                <div className="ben-title">{it.title}</div>
                <div className="ben-body">{it.body}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PainSection, ServiceSection, FeaturesSection, BenefitsSection });