/* Sections of the UbiLog LP. All Japanese copy. */

/* === Nav === */
function Nav({ ctaLabel, onCTA }) {
  const [open, setOpen] = React.useState(false);
  return (
    <header className="nav">
      <div className="container nav-inner">
        <a href="#" className="logo" aria-label="UbiLog ホーム">
          <img src="/ubilog-lp/ubilog-logo5.png" alt="" className="logo-img" />
          <span className="logo-text">Ubi<em>Log</em></span>
        </a>
        <nav className="nav-links">
          <a href="#features">特徴</a>
          <a href="#methods">打刻方法</a>
          <a href="#dashboard">管理画面</a>
          <a href="#pricing">料金</a>
          <a href="#faq">FAQ</a>
        </nav>
        <a href="#cta" className="nav-cta" onClick={onCTA}>{ctaLabel}<Icon.Arrow width="14" height="14" /></a>
        <button className="nav-burger" onClick={() => setOpen(v => !v)} aria-label="メニューを開く">
          <span></span>
        </button>
      </div>
      <div className={"mobile-menu" + (open ? " open" : "")}>
        <a href="#features" onClick={() => setOpen(false)}>特徴</a>
        <a href="#methods" onClick={() => setOpen(false)}>打刻方法</a>
        <a href="#dashboard" onClick={() => setOpen(false)}>管理画面</a>
        <a href="#pricing" onClick={() => setOpen(false)}>料金</a>
        <a href="#faq" onClick={() => setOpen(false)}>FAQ</a>
        <a href="#cta" className="nav-cta" onClick={() => { setOpen(false); onCTA && onCTA(); }}>{ctaLabel}<Icon.Arrow width="14" height="14" /></a>
      </div>
    </header>
  );
}

/* === Hero === */
function PhoneMock() {
  // Fixed display values per v3.1 spec
  const displayTime = "07:01";
  const displayDate = "2026.05.25（月）";
  const displayEmail = "yamada.taro@company.co.jp";
  return (
    <div className="phone-wrap">
      <div className="phone-glow"></div>
      <div className="phone">
        <div className="phone-notch"></div>
        <div className="phone-screen">
          <div className="phone-status">
            <span className="mono">{displayTime}</span>
            <div className="icons">
              <svg width="14" height="10" viewBox="0 0 14 10"><path d="M1 7h2v2H1zM5 5h2v4H5zM9 3h2v6H9zM13 1h-1v8h1z" fill="#fff"/></svg>
              <svg width="14" height="10" viewBox="0 0 14 10"><path d="M7 1.5C4.5 1.5 2.3 2.4.8 3.9l1.4 1.4A6.5 6.5 0 0 1 7 3.5c1.8 0 3.4.7 4.6 1.8l1.4-1.4C11.7 2.4 9.5 1.5 7 1.5z" fill="#fff"/></svg>
              <svg width="22" height="10" viewBox="0 0 22 10"><rect x="0.5" y="0.5" width="18" height="9" rx="2" fill="none" stroke="#fff"/><rect x="2" y="2" width="14" height="6" rx="1" fill="#fff"/><rect x="19" y="3" width="2" height="4" rx="1" fill="#fff"/></svg>
            </div>
          </div>
          <div className="phone-body">
            <div className="phone-greeting">おはようございます</div>
            <div className="phone-name">勅使河原 悠 さん</div>
            <div className="phone-time mono">{displayTime}</div>
            <div className="phone-date mono">{displayDate}</div>
            <div className="phone-email mono">{displayEmail}</div>
            <div className="phone-logo-center">
              <img src="/ubilog-logo3.png" alt="UbiLog" />
            </div>
            <div className="phone-buttons">
              <button className="phone-btn punch-in">出勤</button>
              <button className="phone-btn punch-out">退勤</button>
            </div>
            <div className="phone-tabs">
              <div className="t active">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
                打刻
              </div>
              <div className="t">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                履歴
              </div>
              <div className="t">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="8" r="4"/><path d="M4 22c0-4 4-6 8-6s8 2 8 6"/></svg>
                マイページ
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="chip-float chip-1">
        <span className="ic"><Icon.Check width="14" height="14" stroke="#ffffff"/></span>
        打刻完了 · 09:00
      </div>
      <div className="chip-float chip-2">
        <span className="ic"><Icon.Shield width="14" height="14" stroke="#ffffff"/></span>
        本人確認 OK
      </div>
      <div className="chip-float chip-3">
        <span className="ic"><Icon.Chart width="14" height="14" stroke="#ffffff"/></span>
        今月 21h 28m
      </div>
    </div>
  );
}

function Hero({ tagline, sub, ctaLabel, onCTA }) {
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          <div><span className="hero-tag"><Icon.Spark/> 次世代の勤怠管理 SaaS</span></div>
          <h1>
            その指で、<br/>
            <span className="accent-gold">全てを打刻。</span>
          </h1>
          <p className="hero-sub" style={{whiteSpace:"pre-line"}}>{sub}</p>
          <div className="hero-cta">
            <button className="btn btn-primary" onClick={onCTA}>
              {ctaLabel}<Icon.Arrow/>
            </button>
            <a href="#dashboard" className="btn btn-ghost">
              管理画面を見る
            </a>
          </div>
          <div className="hero-meta">
            <div><Icon.Lock stroke="#f59e0b"/> クレカ登録不要</div>
            <div><Icon.Clock stroke="#f59e0b"/> 最短3分で導入</div>
            <div><Icon.Doc stroke="#f59e0b"/> 厚労省ガイドライン準拠</div>
          </div>
        </div>
        <PhoneMock/>
      </div>
    </section>
  );
}

/* === Problem === */
function Problem() {
  const items = [
    { q: "01", h: "打刻環境がバラバラで管理が大変", p: "現場はタイムカード、本社はExcel、リモートは申告ベース。集計の度に転記と確認で半日が消えていく。" },
    { q: "02", h: "勤怠記録の修正・改ざんが心配", p: "誰がいつ修正したかが追えない。労基署対応や監査で説明できる状態にしておきたい。" },
    { q: "03", h: "CSV出力が面倒でもっと楽にしたい", p: "給与ソフトに渡すための加工作業が毎月数時間。フォーマットの調整だけで疲弊している。" },
    { q: "04", h: "厚労省ガイドラインに準拠できているか不安", p: "客観的記録の保存、改ざん防止、本人確認 ── どこまでが必要なのか自信が持てない。" },
  ];
  return (
    <section id="problem">
      <div className="container">
        <div className="section-head">
          <span className="kicker"><span className="dot"></span>こんなお悩みありませんか？</span>
          <h2 className="section-title"><span style={{color:"#f59e0b"}}>勤怠管理</span>、<br className="m-br"/>毎月「同じ手戻り」が起きていませんか。</h2>
          <p className="section-sub" style={{whiteSpace:"pre-line"}}>{"副業・フリーランス・中小企業の現場でよく聞く声を集めました。\n一つでも当てはまったら、UbiLog で解決できます。"}</p>
        </div>
        <div className="problem-grid">
          {items.map(it => (
            <div className="card problem-card hover" key={it.q}>
              <div className="qmark">{it.q}</div>
              <div>
                <h4>{it.h}</h4>
                <p>{it.p}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* === Features (3 ubi) === */
function FeatureVisual({ kind }) {
  if (kind === "bio") {
    return (
      <>
        <span className="ubi-mark">UBI · 01</span>
        <img src="/ubilog-logo3.png" alt="UbiLog" style={{
          width:220,height:220,maxWidth:"90%",maxHeight:"90%",
          objectFit:"contain",
          filter:"drop-shadow(0 0 16px rgba(245,158,11,0.6)) drop-shadow(0 0 6px rgba(245,158,11,0.8))"
        }} />
      </>
    );
  }
  if (kind === "shield") {
    return (
      <>
        <span className="ubi-mark">UBI · 02</span>
        <Icon.Shield width="96" height="96"/>
      </>
    );
  }
  return (
    <>
      <span className="ubi-mark">UBI · 03</span>
      <Icon.Chart width="96" height="96"/>
    </>
  );
}

function Features() {
  const feats = [
    { n: "FEATURE 01", kind: "bio", h: "指紋1本でOK。", body: "スマホで顔・指紋・居場所打刻（GPS）。専用端末は不要、設備投資ゼロで「すぐ運用」を開始。", tags:["顔認証","指紋認証","設備不要"] },
    { n: "FEATURE 02", kind: "shield", h: "鈴打まれない信頼性。", body: "厚生労働省ガイドラインに準拠。改ざん防止機能と監査ログで、誰が・いつ・何を変えたかを全て記録。", tags:["改ざん防止","監査ログ","ガイドライン準拠"] },
    { n: "FEATURE 03", kind: "chart", h: "データは自動集計。", body: "CSV / Excel 出力、AI分析レポート、給与ソフト連携で月末の手作業ゼロへ。", tags:["CSV出力","AI分析","給与連携"] },
  ];
  // Fix typo intentionally: 鈴打まれない → 鳴き止まない is "ringing"; brief says 「鈴打まれない」 which is unusual wording. Keep brief literal:
  feats[1].h = "改ざんされない信頼性。";
  return (
    <section id="features">
      <div className="container">
        <div className="section-head">
          <span className="kicker"><span className="dot"></span>2つの意味、3つの強み</span>
          <h2 className="section-title"><span style={{color:"#f59e0b"}}>指</span>で、<span style={{color:"#f59e0b"}}>信頼</span>で、<span style={{color:"#f59e0b"}}>データ</span>で。</h2>
          <p className="section-sub" style={{whiteSpace:"pre-line"}}>{"UbiLog は「ユビキタス（どこでも）」と「指（ubi）」の二重の意味を込めて、\n勤怠管理に必要な3つを一つに束ねます。"}</p>
        </div>
        <div className="feat-grid">
          {feats.map(f => (
            <div className="card feat-card hover" key={f.n}>
              <div className="feat-num">{f.n}</div>
              <div className="feat-visual">
                <FeatureVisual kind={f.kind}/>
              </div>
              <h3>{f.h}</h3>
              <p>{f.body}</p>
              <div style={{display:"flex",flexWrap:"wrap",gap:6,marginTop:"auto"}}>
                {f.tags.map(t => (
                  <span key={t} className="feat-tag">{t}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* === Punch methods === */
function Methods() {
  const items = [
    { ic: <Icon.PhoneFace/>, h: "スマホ生体認証", p: "顔・指紋でセルフ打刻。本人確認まで1秒。", tag:"オススメ" },
    { ic: <Icon.Wifi/>, h: "Wi-Fi ジオフェンス", p: "オフィスのSSIDに繋がった時だけ打刻可能に。" },
    { ic: <Icon.Pin/>, h: "GPS打刻", p: "現場・客先での位置情報付き打刻。" },
    { ic: <Icon.Tablet/>, h: "端末打刻", p: "受付タブレットで全員分を一括運用も可能。" },
  ];
  return (
    <section id="methods" style={{
      paddingTop:40,
      position:"relative",
      backgroundImage:"linear-gradient(rgba(10,15,30,0.75), rgba(10,15,30,0.75)), url('/ubilog-punch-bg.png')",
      backgroundSize:"cover",
      backgroundPosition:"center",
      backgroundAttachment:"fixed",
    }}>
      <div className="container">
        <div className="section-head">
          <span className="kicker"><span className="dot"></span>打刻方法</span>
          <h2 className="section-title">4つの<span style={{color:"#f59e0b"}}>打刻</span>、1つの<span style={{color:"#f59e0b"}}>記録</span>。</h2>
          <p className="section-sub">働き方や現場に合わせて使い分け可能。どの方法で打刻しても、管理画面では同じデータとして自動集計されます。</p>
        </div>
        <div className="methods-grid">
          {items.map(m => (
            <div className="card method-card hover" key={m.h} style={{position:"relative"}}>
              {m.tag && <span style={{
                position:"absolute",top:14,right:14,
                fontSize:10,padding:"3px 10px",borderRadius:999,
                background:"var(--gold)",color:"#0a0a18",fontWeight:800,letterSpacing:"0.05em"
              }}>{m.tag}</span>}
              <div className="method-icon">{m.ic}</div>
              <h4>{m.h}</h4>
              <p>{m.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* === Dashboard mock === */
function Dashboard() {
  const [tab, setTab] = React.useState("attendance");
  const rows = [
    { who:"佐藤 美咲", av:"av-a", in:"08:58", out:"18:02", work:"8h 04m", st:"on", stLabel:"打刻済" },
    { who:"鈴木 翔太", av:"av-b", in:"09:15", out:"—", work:"進行中", st:"warn", stLabel:"遅刻 +15m" },
    { who:"田中 玲奈", av:"av-c", in:"08:55", out:"—", work:"進行中", st:"on", stLabel:"勤務中" },
    { who:"高橋 健", av:"av-d", in:"—", out:"—", work:"—", st:"off", stLabel:"休暇" },
    { who:"渡辺 真", av:"av-e", in:"09:02", out:"17:58", work:"7h 56m", st:"pend", stLabel:"承認待ち" },
  ];
  return (
    <section id="dashboard" style={{paddingTop:"clamp(80px,9vw,140px)",position:"relative",zIndex:1,background:"var(--ink)"}}>
      <div className="container">
        <div className="section-head">
          <span className="kicker"><span className="dot"></span>管理画面プレビュー</span>
          <h2 className="section-title">「誰がいつ働いたか」が、<span style={{color:"#f59e0b"}}>1画面</span>で。</h2>
          <p className="section-sub" style={{whiteSpace:"pre-line"}}>{"出欠一覧・休憩時間・承認フローまで。発展性のあるダッシュボードで、\n月末の集計をワンクリックに変えます。"}</p>
        </div>
        <div className="dash">
          <div className="dash-bar">
            <div className="dash-dots">
              <span></span><span></span><span></span>
            </div>
            <div className="dash-url mono">admin.ubilog.app / dashboard</div>
            <div style={{width:42}}></div>
          </div>
          <div className="dash-tabs">
            {[
              ["attendance","出欠一覧"],
              ["break","休憩時間"],
              ["approve","承認フロー"],
              ["export","CSV出力"],
              ["report","AIレポート"],
            ].map(([k,l]) => (
              <button className={"dash-tab" + (tab===k?" active":"")} key={k} onClick={() => setTab(k)}>{l}</button>
            ))}
          </div>
          <div className="dash-body">
            <aside className="dash-side">
              <div className="dash-side-item active"><span className="dot"></span>ダッシュボード</div>
              <div className="dash-side-item"><span className="dot"></span>従業員</div>
              <div className="dash-side-item"><span className="dot"></span>シフト</div>
              <div className="dash-side-item"><span className="dot"></span>申請・承認</div>
              <div className="dash-side-item"><span className="dot"></span>給与連携</div>
              <div className="dash-side-h">分析</div>
              <div className="dash-side-item"><span className="dot"></span>残業傾向</div>
              <div className="dash-side-item"><span className="dot"></span>AIレポート</div>
              <div className="dash-side-h">設定</div>
              <div className="dash-side-item"><span className="dot"></span>打刻ルール</div>
              <div className="dash-side-item"><span className="dot"></span>連携</div>
            </aside>
            <div className="dash-main">
              <div className="dash-head">
                <h3 style={{color:"#ffffff",fontWeight:700}}>{tab === "attendance" ? "本日の出欠一覧" : tab === "break" ? "休憩時間サマリ" : tab === "approve" ? "承認待ち申請" : tab === "export" ? "CSV出力" : "AIレポート"}</h3>
                <div className="date mono">2026.05.24 (日)</div>
              </div>
              <div className="dash-kpis">
                <div className="kpi"><div className="lbl">出勤</div><div className="val">42<span style={{fontSize:14,color:"var(--fg-dim)",marginLeft:6}}>名</span></div><div className="delta up">+3 vs. 先週</div></div>
                <div className="kpi"><div className="lbl">遅刻</div><div className="val">2<span style={{fontSize:14,color:"var(--fg-dim)",marginLeft:6}}>件</span></div><div className="delta dn">-1 vs. 先週</div></div>
                <div className="kpi"><div className="lbl">承認待ち</div><div className="val">7<span style={{fontSize:14,color:"var(--fg-dim)",marginLeft:6}}>件</span></div><div className="delta up">+2 件</div></div>
                <div className="kpi"><div className="lbl">残業時間</div><div className="val">38h<span style={{fontSize:14,color:"var(--fg-dim)",marginLeft:6}}>/月</span></div><div className="delta dn">-12% MoM</div></div>
              </div>
              <div className="dash-table">
                <div className="row head">
                  <div>氏名</div>
                  <div>出勤</div>
                  <div>退勤</div>
                  <div>労働時間</div>
                  <div>状態</div>
                </div>
                {rows.map(r => (
                  <div className="row" key={r.who}>
                    <div style={{display:"flex",alignItems:"center"}}>
                      <span className={"avatar " + r.av}>{r.who[0]}</span>{r.who}
                    </div>
                    <div className="mono">{r.in}</div>
                    <div className="mono">{r.out}</div>
                    <div className="mono">{r.work}</div>
                    <div>
                      <span className={"badge " + (r.st === "on" ? "b-on" : r.st === "off" ? "b-off" : r.st === "warn" ? "b-warn" : "b-pend")}>
                        {r.stLabel}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
              <div className="dash-2col">
                <div className="chart">
                  <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                    <h4>今週の打刻ボリューム</h4>
                    <span style={{fontSize:11,color:"var(--fg-dim)"}} className="mono">May 19–25</span>
                  </div>
                  <div className="bars">
                    <div className="bar" style={{height:"55%"}}></div>
                    <div className="bar" style={{height:"72%"}}></div>
                    <div className="bar" style={{height:"68%"}}></div>
                    <div className="bar" style={{height:"82%"}}></div>
                    <div className="bar" style={{height:"90%"}}></div>
                    <div className="bar muted" style={{height:"22%"}}></div>
                    <div className="bar muted" style={{height:"10%"}}></div>
                  </div>
                  <div className="bars-labels">
                    <span>月</span><span>火</span><span>水</span><span>木</span><span>金</span><span>土</span><span>日</span>
                  </div>
                </div>
                <div className="chart">
                  <h4>承認待ち申請</h4>
                  <div className="approvals">
                    <div className="approval">
                      <span className="avatar av-b" style={{margin:0}}>鈴</span>
                      <div>
                        <div className="who">鈴木 翔太</div>
                        <div className="reason">5/22 退勤打刻忘れ</div>
                      </div>
                      <div className="actions">
                        <button className="ok">承認</button>
                        <button className="ng">差戻</button>
                      </div>
                    </div>
                    <div className="approval">
                      <span className="avatar av-e" style={{margin:0}}>渡</span>
                      <div>
                        <div className="who">渡辺 真</div>
                        <div className="reason">5/23 休憩時間修正</div>
                      </div>
                      <div className="actions">
                        <button className="ok">承認</button>
                        <button className="ng">差戻</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <p style={{marginTop:14,textAlign:"center",fontSize:12,color:"var(--fg-dim)"}}>※こちらは開発中の管理画面イメージです。実際の画面は異なる場合があります。</p>
      </div>
    </section>
  );
}

/* === Stats === */
function Stats() {
  const items = [
    { big: "0", unit:"円", lbl:"導入コスト（初期費用）", sub:"クレカ登録不要・最短3分で導入" },
    { big: "78", unit:"%", lbl:"不正打刻の平均減少率", sub:"生体認証 × 改ざんログ運用後", note:"測定中" },
    { big: "100", unit:"%", lbl:"厚労省ガイドライン準拠", sub:"客観的記録の保存・改ざん防止に対応", note:"測定中" },
  ];
  return (
    <section id="stats">
      <div className="container">
        <div className="section-head">
          <span className="kicker"><span className="dot"></span>数字で見る UbiLog</span>
          <h2 className="section-title" style={{color:"#ffffff"}}>小さく<span style={{color:"#f59e0b"}}>始めて</span>、確かに<span style={{color:"#f59e0b"}}>変わる</span>。</h2>
        </div>
        <div className="stats-grid">
          {items.map(s => (
            <div className="stat-card" key={s.lbl}>
              {s.note && <span className="measuring-badge">【{s.note}】</span>}
              <div className="big mono">{s.big}<sup>{s.unit}</sup></div>
              <div className="lbl">{s.lbl}</div>
              <div className="sub">{s.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* === Pricing === */
function Pricing() {
  return (
    <section id="pricing">
      <div className="container">
        <div className="section-head">
          <span className="kicker"><span className="dot"></span>料金プラン</span>
          <h2 className="section-title">必要な<span style={{color:"#f59e0b"}}>機能</span>だけ、必要な<span style={{color:"#f59e0b"}}>分</span>だけ。</h2>
          <p className="section-sub">個人から企業まで、規模に合わせて選べる3プラン。年契約で2ヶ月分お得に。</p>
        </div>
        <div className="price-grid">
          <div className="card price-card free">
            <div className="price-name">FREE</div>
            <div className="price-title">フリープラン</div>
            <div className="price-amount">
              <span className="amount">0</span>
              <span className="unit">円 / 月</span>
            </div>
            <div className="price-desc">個人・少人数のチーム向け。まずは触ってみたい方に。</div>
            <ul className="price-features">
              <li><span className="check"><Icon.Check/></span>3ユーザーまで</li>
              <li><span className="check"><Icon.Check/></span>スマホ生体認証打刻</li>
              <li><span className="check"><Icon.Check/></span>CSV出力（基本）</li>
              <li className="muted"><span className="check"><Icon.Check/></span>承認フロー</li>
              <li className="muted"><span className="check"><Icon.Check/></span>AI分析レポート</li>
            </ul>
            <button className="btn btn-ghost">無料で始める<Icon.Arrow/></button>
          </div>

          <div className="card price-card featured standard">
            <span className="price-tag">おすすめ</span>
            <div className="price-name">STANDARD</div>
            <div className="price-title">スタンダード</div>
            <div className="price-amount">
              <span className="amount">300</span>
              <span className="unit">円 / 人・月</span>
            </div>
            <div className="price-desc">フリープランの全機能に加え、以下が利用可能。中小企業の標準運用に。</div>
            <ul className="price-features">
              <li><span className="check"><Icon.Check/></span>無制限ユーザー</li>
              <li><span className="check"><Icon.Check/></span>全打刻方法（生体・Wi-Fi・GPS・端末）</li>
              <li><span className="check"><Icon.Check/></span>承認フロー・改ざん防止ログ</li>
              <li><span className="check"><Icon.Check/></span>給与ソフト連携（freee / マネーフォワード 他）</li>
              <li><span className="check"><Icon.Check/></span>厚労省ガイドライン準拠運用</li>
            </ul>
            <button className="btn btn-primary">14日間無料で試す<Icon.Arrow/></button>
          </div>

          <div className="card price-card ent">
            <div className="price-name">ENTERPRISE</div>
            <div className="price-title">エンタープライズ</div>
            <div className="price-amount">
              <span className="amount">カスタム</span>
            </div>
            <div className="price-desc">スタンダードの全機能に加え、以下が利用可能。30名以上・複雑な就業規則・SSO連携が必要な組織向け。</div>
            <ul className="price-features">
              <li><span className="check"><Icon.Check/></span>SSO / SAML 連携</li>
              <li><span className="check"><Icon.Check/></span>専任カスタマーサクセス</li>
              <li><span className="check"><Icon.Check/></span>就業規則カスタマイズ</li>
              <li><span className="check"><Icon.Check/></span>SLA保証・監査支援</li>
              <li><span className="check"><Icon.Check/></span>API・Webhook 利用枠拡張</li>
            </ul>
            <button className="btn btn-ghost">お問い合わせ<Icon.Arrow/></button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* === AI Report (full section) === */
function AISection() {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open]);
  const plans = [
    { label: "10名まで", price: "2,000", unit: "円 / 社・月" },
    { label: "11～30名", price: "5,000", unit: "円 / 社・月", popular: true },
    { label: "31名以上", price: "お問合せ", unit: "" },
  ];
  return (
    <section id="ai-report" className="ai-section">
      <div className="container">
        <div className="section-head">
          <span className="kicker"><span className="dot"></span>AI分析レポートオプション</span>
          <h2 className="section-title">経営の判断を、<span style={{color:"#f59e0b"}}>データ</span>が語る。</h2>
        </div>
        <div className="ai-grid">
          <div className="ai-visual">
            <AIReportMock/>
          </div>
          <div className="ai-copy">
            <p className="ai-lead">残業傾向・有給取得率・部署別パフォーマンスを月次でAIが自動集計し報告いたします。<br/>月次レポートはSlack／メールで配信可。意思決定を支える「経営コクピット」として機能します。</p>
            <div className="ai-bullets">
              <div><span className="ic"><Icon.Check width="12" height="12"/></span>残業・有給取得の足並みを見える化</div>
              <div><span className="ic"><Icon.Check width="12" height="12"/></span>部署・個人レベルの偏りを検出</div>
              <div><span className="ic"><Icon.Check width="12" height="12"/></span>取るべきアクションをAIが提案</div>
            </div>
            <div className="ai-price-table">
              {plans.map(p => (
                <div key={p.label} className={"ai-price-row" + (p.popular ? " pop" : "")}>
                  <span className="plabel">【{p.label}】{p.popular && <span className="phot">人気</span>}</span>
                  <span className="pamt mono">{p.price}<span className="punit">{p.unit}</span></span>
                </div>
              ))}
            </div>
            <button className="btn btn-ghost ai-sample-btn" onClick={() => setOpen(true)}>
              サンプルレポートを見る<Icon.Arrow/>
            </button>
          </div>
        </div>
        <p style={{marginTop:18,textAlign:"center",fontSize:12,color:"var(--fg-dim)"}}>※こちらはAI分析レポートのイメージです。実際のデータは異なる場合があります。</p>
      </div>
      {open && <AIReportModal onClose={() => setOpen(false)}/>}
    </section>
  );
}

function AIReportMock() {
  return (
    <div className="ai-mock">
      <div className="ai-mock-head">
        <div style={{display:"flex",alignItems:"center",gap:10}}>
          <span className="ai-badge"><Icon.Spark width="14" height="14"/> AI</span>
          <div>
            <div style={{fontSize:13,fontWeight:800,color:"#ffffff"}}>月次レポート</div>
            <div className="mono" style={{fontSize:11,color:"var(--fg-dim)"}}>2026.04 / 生成 04.30 23:00</div>
          </div>
        </div>
        <span className="mono" style={{fontSize:11,color:"var(--fg-dim)"}}>UBI-AI v1.2</span>
      </div>
      <div className="ai-summary">
        <div className="ai-summary-h">今月のサマリ</div>
        <p>今月は全体の残業時間が<b>前月比 -12%</b>と改善。一方で<b>営業部</b>の有給取得率が<b>32%</b>と準法ラインを下回っています。</p>
      </div>
      <div className="ai-chart">
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
          <span style={{fontSize:12,fontWeight:700}}>部署別 残業時間 (h)</span>
          <span className="mono" style={{fontSize:10,color:"var(--fg-dim)"}}>vs. 前月</span>
        </div>
        {[
          {n:"エンジニア", v:0.62, d:"-8%"},
          {n:"営業", v:0.88, d:"+4%", warn:true},
          {n:"コーポレート", v:0.45, d:"-22%"},
          {n:"CS", v:0.30, d:"-18%"},
        ].map(r => (
          <div className="ai-bar-row" key={r.n}>
            <span className="bn">{r.n}</span>
            <span className="bv"><span className={"bf" + (r.warn?" warn":"")} style={{width:(r.v*100)+"%"}}></span></span>
            <span className={"bd mono" + (r.d.startsWith("-")?" good":" bad")}>{r.d}</span>
          </div>
        ))}
      </div>
      <div className="ai-actions">
        <div className="ai-action-h"><Icon.Spark width="12" height="12"/> AIからの提案</div>
        <ul>
          <li>営業部の有給取得促進キャンペーンを推奨</li>
          <li>その他部署との残業時間ギャップの要因分析を提案</li>
        </ul>
      </div>
    </div>
  );
}

function AIReportModal({ onClose }) {
  return (
    <div className="ai-modal-back" onClick={onClose}>
      <div className="ai-modal" onClick={e => e.stopPropagation()}>
        <button className="ai-modal-close" onClick={onClose} aria-label="閉じる">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
        </button>
        <div className="ai-modal-head">
          <div>
            <span className="ai-badge"><Icon.Spark width="14" height="14"/> SAMPLE</span>
            <h3>月次AI分析レポート・サンプル</h3>
            <p className="mono">2026.04 / 株式会社サンプル様</p>
          </div>
        </div>
        <div className="ai-modal-body">
          <div className="ai-modal-kpis">
            <div className="kpi"><div className="lbl">平均残業</div><div className="val">23.4<span style={{fontSize:13,color:"var(--fg-dim)",marginLeft:4}}>h</span></div><div className="delta up">-12% MoM</div></div>
            <div className="kpi"><div className="lbl">有給取得率</div><div className="val">58<span style={{fontSize:13,color:"var(--fg-dim)",marginLeft:4}}>%</span></div><div className="delta dn">-3% MoM</div></div>
            <div className="kpi"><div className="lbl">遅刻件数</div><div className="val">14<span style={{fontSize:13,color:"var(--fg-dim)",marginLeft:4}}>件</span></div><div className="delta up">-30% MoM</div></div>
            <div className="kpi"><div className="lbl">打刻カバレッジ</div><div className="val">99.7<span style={{fontSize:13,color:"var(--fg-dim)",marginLeft:4}}>%</span></div><div className="delta up">+0.4pt</div></div>
          </div>
          <div className="ai-modal-section">
            <h4><Icon.Spark width="14" height="14"/> AIが見つけた3つのインサイト</h4>
            <ol className="ai-insights">
              <li><b>営業部の有給取得が不足</b><br/>他部署平均65%に対して営業部は32%。取得促進キャンペーンを推奨します。</li>
              <li><b>火・水曜に残業が集中</b><br/>週初のミーティング多発が原因と推測。ミーティングを金曜に集約して負荷平準化を検討。</li>
              <li><b>新入社員の離脱リスク低下</b><br/>今月2名の長時間労働が改善。オンボーディングの効果が反映されている可能性。</li>
            </ol>
          </div>
          <div className="ai-modal-section">
            <h4>取るべきアクション</h4>
            <div className="ai-actions-grid">
              <div className="ai-action-card"><div className="num mono">01</div><div><b>有給キャンペーン起動</b><p>営業部長と連携して計画付与推進。推奨期間：5/13〜5/31。</p></div></div>
              <div className="ai-action-card"><div className="num mono">02</div><div><b>ミーティングスケジュール見直し</b><p>火・水集中を金曜に一部移動。会議体減も同時に検討。</p></div></div>
              <div className="ai-action-card"><div className="num mono">03</div><div><b>月次一対一の頻度保証</b><p>入社6ヶ月未満メンバーは偶数週一度の1on1を推奨。</p></div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* === FAQ === */
function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q:"無料トライアルはいつまで使えますか？", a:"フリープランは期間制限なくご利用いただけます。スタンダードプランは14日間の無料トライアルをご用意。期間中は全機能を制限なくお試しいただけ、自動課金もありません。" },
    { q:"対応デバイスは今後増えますか？", a:"現在は iOS / Android スマートフォン、Web ブラウザ、受付タブレットに対応しています。今後はスマートウォッチ・専用打刻端末への対応も予定しています。ご要望は随時お受けします。" },
    { q:"給与ソフトと連携できますか？", a:"freee人事労務・マネーフォワードクラウド給与・SmartHR など主要サービスとAPI連携しています。連携先にない場合もCSV / Excel 出力のフォーマット調整に対応します。" },
    { q:"厚労省ガイドラインに準拠していますか？", a:"勤怠記録の客観的記録の保存・改ざん防止・本人確認に対応しており、厚生労働省「労働時間の適正な把握のために使用者が講ずべき措置に関するガイドライン」に準拠しています。詳細資料はお問い合わせください。" },
    { q:"導入に専門知識は必要ですか？", a:"いいえ、ITが苦手な方でも大丈夫です。オンボーディングはご担当者1名に対して導入支援（無償）を行います。スタンダード以上のプランでは平均3営業日で運用開始までサポートします。" },
    { q:"既存の打刻機からの移行は大変ですか？", a:"既存のタイムカード・打刻機のデータはCSV取込で移行できます。導入支援チームが過去データの統合まで伴走しますので、現場の混乱なくスムーズに切り替えていただけます。" },
    { q:"支払い方法は？", a:"クレジットカード（VISA / Mastercard / JCB / American Express）・銀行振込に対応しています。年払いを選んでいただくと2ヶ月分お得になります。" },
    { q:"解約はいつでもできますか？", a:"はい。月払いプランは当月末までに手続きいただければ翌月から停止されます。長期契約縛りはありません。年払いプランを途中解約された場合、未使用期間分を日割りで返金いたします。" },
  ];
  return (
    <section id="faq">
      <div className="container">
        <div className="section-head">
          <span className="kicker"><span className="dot"></span>よくあるご質問</span>
          <h2 className="section-title">疑問は、ここで<span style={{color:"#f59e0b"}}>解消</span>。</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div className={"faq-item" + (open === i ? " open" : "")} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span className="q-mark mono">Q.{String(i+1).padStart(2,'0')}</span>
                <span className="label">{it.q}</span>
                <span className="plus"><Icon.Plus/></span>
              </button>
              <div className="faq-a" style={{maxHeight: open === i ? 400 : 0}}>
                <div className="faq-a-inner">{it.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* === Final CTA === */
function FinalCTA({ ctaLabel, onCTA }) {
  return (
    <section id="cta" className="final">
      <div className="container">
        <h2>まずは <span className="accent-gold">無料</span> で始める。</h2>
        <p>クレジットカード登録不要・3分で完了。フリープランは期間制限なくお使いいただけます。</p>
        <div className="final-cta">
          <button className="btn btn-primary" onClick={onCTA}>{ctaLabel}<Icon.Arrow/></button>
          <a href="#" className="btn btn-ghost">お問い合わせ</a>
        </div>
        <div>
          <span className="jiima">
            <span className="badge-i">J</span>
            JIIMA認証 取得目標展開中
          </span>
        </div>
      </div>
    </section>
  );
}

/* === Footer === */
function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="foot-grid">
          <div>
            <a href="#" className="logo">
              <img src="/ubilog-logo3.png" alt="" className="logo-img" />
              <span className="logo-text">Ubi<em>Log</em></span>
            </a>
            <p style={{marginTop:14,maxWidth:320,fontSize:13,color:"var(--fg-dim)",lineHeight:1.7}}>
              その指で、全てを打刻。<br/>
              スマホ生体認証で1台で完結する、<br/>
              次世代の勤怠管理 SaaS。
            </p>
          </div>
          <div>
            <h5>プロダクト</h5>
            <ul>
              <li><a href="#features">特徴</a></li>
              <li><a href="#methods">打刻方法</a></li>
              <li><a href="#dashboard">管理画面</a></li>
              <li><a href="#pricing">料金</a></li>
            </ul>
          </div>
          <div>
            <h5>サポート</h5>
            <ul>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="#cta">導入支援</a></li>
              <li><a href="#cta">お問い合わせ</a></li>
              <li><a href="#faq">ヘルプセンター</a></li>
            </ul>
          </div>
          <div>
            <h5>会社情報</h5>
            <ul>
              <li><a href="#cta">運営会社</a></li>
              <li><a href="#cta">利用規約</a></li>
              <li><a href="#cta">プライバシー</a></li>
              <li><a href="#cta">セキュリティ</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© 2026 ㈱インペリアル・メッセンジャー</div>
          <div className="mono" style={{fontSize:11}}>v1.0.0 · made with ♥ in Japan</div>
        </div>
      </div>
    </footer>
  );
}

window.Nav = Nav;
window.Hero = Hero;
window.Problem = Problem;
window.Features = Features;
window.Methods = Methods;
window.Dashboard = Dashboard;
window.Stats = Stats;
window.Pricing = Pricing;
window.AISection = AISection;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;