// Hero (ファーストビュー) + Nav

function NavBar() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a className="brand" href="#top">
          <span className="mark"></span>
          <span>LINE<span style={{ color: 'var(--c-ink-3)', fontWeight: 600 }}>秘書</span></span>
        </a>
        <div className="nav-links">
          <a href="#features">できること</a>
          <a href="#benefits">導入メリット</a>
          <a href="#compare">比較</a>
          <a href="#steps">導入の流れ</a>
          <a href="#faq">よくある質問</a>
        </div>
        <a href="https://lin.ee/tCd8Occ" target="_blank" rel="noopener noreferrer" className="btn btn-line btn-sm nav-cta">
          <LogoLine size={22} /> 申し込む
        </a>
      </div>
    </nav>
  );
}

// Connection diagram — the LINE秘書 hub connecting the user's chat to
// Calendar / Drive / Sheet tiles. Rendered as floating tiles around the
// chat mock.
function ConnectionBadges() {
  const items = [
    { label: 'カレンダー',  Ico: LogoCalendar, raw: true, pos: { top: 18, left: -28 } },
    { label: 'ドライブ',    Ico: LogoDrive,    raw: true, pos: { top: 130, left: -54 } },
    { label: 'スプレッドシート', Ico: LogoSheet, raw: true, pos: { top: 250, left: -34 } },
    { label: 'OCR読み取り', Ico: IconSparkle,  color: 'var(--c-orange)', pos: { top: 60, right: -42 } },
    { label: '自動記録',     Ico: IconBolt,    color: 'var(--c-green)',  pos: { top: 210, right: -32 } },
  ];
  return (
    <>
      {items.map((it, i) => (
        <div key={i} className="hero-badge" style={{ ...it.pos }}>
          <span className="hero-badge-ic" style={{
            background: '#fff',
            color: it.color,
            padding: it.raw ? 2 : 0,
          }}>
            <it.Ico size={it.raw ? 22 : 18} />
          </span>
          <span>{it.label}</span>
        </div>
      ))}
    </>
  );
}

function Hero() {
  return (
    <section id="top" className="hero">
      <style>{`
        .hero { position: relative; overflow: hidden; padding: 56px 0 80px; }
        .hero::before {
          content: '';
          position: absolute; inset: -20% -10% auto -10%; height: 110%;
          background:
            radial-gradient(60% 40% at 20% 10%, rgba(31,186,104,.10), transparent 70%),
            radial-gradient(50% 40% at 90% 0%, rgba(47,123,229,.08), transparent 70%);
          z-index: 0;
          pointer-events: none;
        }
        .hero-grid {
          position: relative; z-index: 1;
          display: grid;
          grid-template-columns: 1.05fr .95fr;
          gap: 48px;
          align-items: center;
        }
        @media (max-width: 880px) {
          .hero-grid { grid-template-columns: 1fr; gap: 56px; }
        }
        .hero h1 {
          font-size: clamp(34px, 5.6vw, 56px);
          line-height: 1.25;
          letter-spacing: -.015em;
          font-weight: 800;
          margin: 18px 0 16px;
          text-wrap: balance;
        }
        .hero h1 .hl-g { color: var(--c-green); }
        .hero h1 .hl-b { color: var(--c-blue); }
        .hero .sub {
          font-size: clamp(15px, 1.4vw, 17px);
          color: var(--c-ink-2);
          line-height: 1.85;
          margin: 0 0 28px;
          text-wrap: pretty;
        }
        .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
        .hero-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
        .hero-meta {
          margin-top: 12px;
          display: flex; align-items: center; gap: 12px;
          font-size: 12px; color: var(--c-ink-3);
        }
        .hero-mock-wrap {
          position: relative;
          padding: 20px 50px;
          display: flex; justify-content: center;
        }
        .hero-badge {
          position: absolute;
          background: #fff;
          border: 1px solid var(--c-line);
          border-radius: 999px;
          padding: 7px 12px 7px 7px;
          display: inline-flex; align-items: center; gap: 8px;
          font-size: 12px; font-weight: 600;
          box-shadow: var(--shadow);
          z-index: 2;
          animation: float 6s ease-in-out infinite;
        }
        .hero-badge:nth-child(2) { animation-delay: -1.2s; }
        .hero-badge:nth-child(3) { animation-delay: -2.4s; }
        .hero-badge:nth-child(4) { animation-delay: -3.6s; }
        .hero-badge:nth-child(5) { animation-delay: -4.8s; }
        .hero-badge-ic {
          width: 28px; height: 28px; border-radius: 50%;
          display: grid; place-items: center;
          border: 1px solid var(--c-line-2);
        }
        @keyframes float {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-6px); }
        }
        @media (max-width: 560px) {
          .hero-badge { display: none; }
          .hero-badge.show-mobile { display: inline-flex; }
        }
        .price-row {
          display: inline-flex; align-items: baseline; gap: 8px;
          background: var(--c-ink);
          color: #fff;
          padding: 14px 20px;
          border-radius: 16px;
          margin-bottom: 22px;
        }
        .price-row .big {
          font-family: var(--font-num);
          font-weight: 800;
          font-size: 30px;
          letter-spacing: -.02em;
        }
        .price-row .yen { font-size: 18px; font-weight: 700; }
        .price-row .label { color: rgba(255,255,255,.7); font-size: 12px; margin-left: 4px; }
        .hero-strong {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 8px;
          margin-bottom: 26px;
        }
        .gmail-ready {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 16px 18px;
          margin-bottom: 16px;
          background: linear-gradient(180deg, #fff 0%, #f7fbf9 100%);
          border: 1.5px solid var(--c-green);
          border-radius: 16px;
          box-shadow: 0 6px 18px rgba(31,186,104,.10);
          position: relative;
        }
        .gmail-ready::before {
          content: 'すぐ使える';
          position: absolute;
          top: -10px; left: 16px;
          background: var(--c-green);
          color: #fff;
          font-size: 11px;
          font-weight: 700;
          padding: 3px 10px;
          border-radius: 999px;
          letter-spacing: .04em;
        }
        .gmail-ic {
          width: 44px; height: 44px;
          border-radius: 12px;
          background: #fff;
          border: 1px solid var(--c-line);
          display: grid; place-items: center;
          flex: 0 0 auto;
        }
        .gmail-tx b {
          display: block;
          font-size: 15px;
          font-weight: 700;
          color: var(--c-ink);
          line-height: 1.4;
          margin-bottom: 2px;
        }
        .gmail-tx span {
          font-size: 12.5px;
          color: var(--c-ink-3);
          line-height: 1.6;
        }
        @media (max-width: 560px) {
          .gmail-tx b { font-size: 14px; }
          .gmail-tx span { font-size: 12px; }
        }
        .hero-strong .it {
          display: flex; align-items: center; gap: 8px;
          font-size: 13px; font-weight: 600;
          color: var(--c-ink-2);
        }
        .hero-strong .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;
        }
      `}</style>

      <div className="wrap">
        <div className="hero-grid">
          <div>
            <span className="eyebrow">
              <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: 'var(--c-green)' }}></span>
              法人向け／買い切り 39,800円
            </span>

            <h1>
              <span className="hl-b">Google</span>の面倒を、<br />
              <span className="hl-g">LINE</span>ひとつで。
            </h1>

            <p className="sub">
              領収書整理も、予定確認も。<br />
              いつものLINEに送るだけで、自動で片づく。
            </p>

            <div className="price-row">
              <span className="yen">¥</span>
              <span className="big">39,800</span>
              <span className="label">税抜・買い切り／月額0円</span>
            </div>

            <div className="gmail-ready">
              <div className="gmail-ic" aria-hidden="true">
                <img src="assets/gmail-logo.png" alt="Gmail" width="28" height="28" style={{ display: 'block' }} />
              </div>
              <div className="gmail-tx">
                <b>Gmailをお持ちなら、すぐ使えます。</b>
                <span>新しい契約・特別な準備は一切不要。いつものGoogle環境のまま始められます。</span>
              </div>
            </div>

            <div className="hero-strong">
              <div className="it"><span className="ck"><IconCheck size={14} /></span>月額費用なし</div>
              <div className="it"><span className="ck"><IconCheck size={14} /></span>商談・打合せ不要</div>
              <div className="it"><span className="ck"><IconCheck size={14} /></span>設定・連携も込み</div>
              <div className="it"><span className="ck"><IconCheck size={14} /></span>最短3営業日で利用開始</div>
            </div>

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

          </div>

          <div className="hero-mock-wrap">
            <ConnectionBadges />
            <ChatMock variant="receipt" />
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { NavBar, Hero });