// All landing page sections
const { useState, useEffect, useRef } = React;

// === Countdown hook ===
function useCountdown(target) {
  const [d, setD] = useState({ days: 0, hours: 0, mins: 0, secs: 0 });
  useEffect(() => {
    const tick = () => {
      const ms = Math.max(0, target - Date.now());
      const days = Math.floor(ms / 86400000);
      const hours = Math.floor((ms % 86400000) / 3600000);
      const mins = Math.floor((ms % 3600000) / 60000);
      const secs = Math.floor((ms % 60000) / 1000);
      setD({ days, hours, mins, secs });
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, [target]);
  return d;
}

const RELEASE_DATE = new Date('2026-06-01T00:00:00+09:00').getTime();

// === Reveal wrapper ===
function Reveal({ children, delay = 0, as: Tag = 'div', ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        setTimeout(() => el.classList.add('in'), delay);
        obs.disconnect();
      }
    }, { threshold: 0.12 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [delay]);
  return <Tag ref={ref} className={'reveal ' + (rest.className||'')} style={rest.style}>{children}</Tag>;
}

// === NAV ===
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      padding: scrolled ? '12px 0' : '20px 0',
      background: scrolled ? 'rgba(7,9,13,.7)' : 'transparent',
      backdropFilter: scrolled ? 'blur(20px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(255,255,255,.06)' : '1px solid transparent',
      transition: 'all .35s ease',
    }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <img src="assets/logo.png" alt="リピケア" style={{ width: 32, height: 32, objectFit: 'contain', filter: 'drop-shadow(0 4px 16px rgba(34,197,94,.35))' }} />
          <div style={{ fontWeight: 800, fontSize: 17, letterSpacing: '-.01em' }}>リピケア</div>
          <div className="font-mono" style={{ fontSize: 10, color: '#6b7280', padding: '2px 6px', borderRadius: 4, border: '1px solid rgba(255,255,255,.08)', marginLeft: 4 }}>BETA</div>
        </div>
        <div className="hide-mobile" style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          {[['機能','#features'],['流れ','#flow'],['料金','#pricing'],['FAQ','#faq']].map(([l,h]) => (
            <a key={h} href={h} style={{ color: '#9ca3af', fontSize: 14, textDecoration: 'none', fontWeight: 500 }}>{l}</a>
          ))}
        </div>
        <a href="https://calendar.app.google/kCVCTAi7FEZw2XZv6" target="_blank" rel="noopener" className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 13 }}>導入予約</a>
      </div>
      <style>{`@media (max-width: 768px) { .hide-mobile { display: none !important; } }`}</style>
    </nav>
  );
}

// === COUNTDOWN PILL ===
function CountdownPill({ small = false }) {
  const { days, hours, mins, secs } = useCountdown(RELEASE_DATE);
  const items = [
    { v: days, l: 'DAYS' },
    { v: hours, l: 'HRS' },
    { v: mins, l: 'MIN' },
    { v: secs, l: 'SEC' },
  ];
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: small ? 8 : 12,
      padding: small ? '8px 12px' : '10px 18px',
      borderRadius: 999,
      background: 'rgba(255,255,255,.03)',
      border: '1px solid rgba(255,255,255,.1)',
      backdropFilter: 'blur(20px)',
    }}>
      <div style={{ width: 6, height: 6, borderRadius: 999, background: '#fb7847', boxShadow: '0 0 12px #fb7847' }} className="pulse-dot" />
      <div className="font-mono" style={{ fontSize: small ? 10 : 11, color: '#9ca3af', letterSpacing: '.18em' }}>6/1 RELEASE IN</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: small ? 6 : 10 }}>
        {items.map((it, i) => (
          <React.Fragment key={it.l}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: small ? 22 : 28 }}>
              <div className="font-en" style={{ fontWeight: 800, fontSize: small ? 14 : 18, lineHeight: 1, letterSpacing: '-.01em' }}>
                {String(it.v).padStart(2, '0')}
              </div>
              <div className="font-mono" style={{ fontSize: 8, color: '#6b7280', letterSpacing: '.12em', marginTop: 2 }}>{it.l}</div>
            </div>
            {i < items.length - 1 && <div style={{ color: '#374151', fontWeight: 700 }}>:</div>}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

// === HERO ===
function Hero() {
  return (
    <section style={{ paddingTop: 140, paddingBottom: 80, position: 'relative', minHeight: '100vh' }}>
      <div className="mesh-bg" style={{ opacity: .9 }} />
      <div className="wrap" style={{ position: 'relative' }}>
        <div className="hero-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.1fr .9fr',
          gap: 60,
          alignItems: 'center',
        }}>
          <div>
            <Reveal>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999, background: 'rgba(34,197,94,.08)', border: '1px solid rgba(34,197,94,.25)', marginBottom: 24 }}>
                <span className="font-mono" style={{ fontSize: 10, letterSpacing: '.2em', color: '#22c55e' }}>FOR 整骨院・接骨院</span>
                <span style={{ fontSize: 10, color: '#6b7280' }}>·</span>
                <span className="font-mono" style={{ fontSize: 10, letterSpacing: '.2em', color: '#9ca3af' }}>2026.06.01 LAUNCH</span>
              </div>
            </Reveal>
            <Reveal delay={80}>
              <h1 style={{
                fontSize: 'clamp(34px, 5.4vw, 72px)',
                fontWeight: 900, lineHeight: 1.05,
                letterSpacing: '-.03em',
              }}>
                整骨院専用<span style={{ color: '#22c55e' }}>AI</span>で、<br/>
                <span style={{ color: '#fff' }}>リピート率を</span><br/>
                <span className="ai-text-mix">仕組み</span>に変える。
              </h1>
            </Reveal>
            <Reveal delay={160}>
              <p style={{ fontSize: 'clamp(15px, 1.4vw, 19px)', color: '#9ca3af', marginTop: 28, maxWidth: 560, lineHeight: 1.8 }}>
                <span style={{ color: '#e5e7eb' }}>AI問診</span> × <span style={{ color: '#e5e7eb' }}>AI傾向分析</span> × <span style={{ color: '#e5e7eb' }}>AIフォローLINE</span>。<br/>
                現場で後手にまわっていた作業を、AIで前に出す。すべてLINEで完結します。
              </p>
            </Reveal>
            <Reveal delay={220}>
              <div style={{ marginTop: 32 }}>
                <CountdownPill />
              </div>
            </Reveal>
            <Reveal delay={280}>
              <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
                <a href="https://calendar.app.google/kCVCTAi7FEZw2XZv6" target="_blank" rel="noopener" className="btn btn-primary">
                  導入予約する
                  <span style={{ fontSize: 11, fontWeight: 600, opacity: .8 }}>月5,000円・導入費0円</span>
                  <span style={{ fontSize: 16, lineHeight: 1 }}>→</span>
                </a>
                <a href="#features" className="btn btn-ghost">機能を見る</a>
              </div>
            </Reveal>
            <Reveal delay={340}>
              <div style={{ display: 'flex', gap: 32, marginTop: 56, flexWrap: 'wrap' }}>
                {[
                  { v: '78', s: '%', l: 'リピート率の目安' },
                  { v: '3.2', s: 'h', l: '院長の事務削減 / 週' },
                  { v: '0', s: '円', l: 'LINE運用コスト追加' },
                ].map((s,i) => (
                  <div key={i}>
                    <div className="font-en" style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-.02em' }}>
                      {s.v}<span style={{ color: '#22c55e', fontSize: 22 }}>{s.s}</span>
                    </div>
                    <div className="font-mono" style={{ fontSize: 10, color: '#6b7280', letterSpacing: '.15em', marginTop: 2 }}>{s.l}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
          <Reveal delay={200} className="hero-mock">
            <HeroDashboard />
          </Reveal>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </section>
  );
}

// === Marquee logos ===
function Marquee() {
  const items = ['AI問診', '傾向分析', 'フォローLINE', '予約システム', 'スタッフ管理', 'ダッシュボード', 'リピート分析', 'LTV最大化'];
  const doubled = [...items, ...items, ...items];
  return (
    <div style={{
      padding: '40px 0', borderTop: '1px solid rgba(255,255,255,.05)', borderBottom: '1px solid rgba(255,255,255,.05)',
      background: 'rgba(0,0,0,.2)', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', gap: 64, animation: 'scroll-x 40s linear infinite', whiteSpace: 'nowrap' }}>
        {doubled.map((t,i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, color: '#374151', fontSize: 14, fontWeight: 600 }}>
            <div style={{ width: 5, height: 5, borderRadius: 999, background: '#22c55e', boxShadow: '0 0 8px #22c55e' }} />
            <span style={{ color: '#9ca3af', fontFamily: 'JetBrains Mono', letterSpacing: '.1em' }}>{t}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// === Problems ===
function Problems() {
  const items = [
    { t: '問診票の紙、毎日山積み', d: '手書きを後でPDF化、入力ミスもある。スタッフが疲弊する。' },
    { t: 'LINEのフォロー、院長が夜中に手打ち', d: '一人ひとり違う症状に文面を変えていたら、いつも0時を回る。' },
    { t: 'リピート率、なんとなくしか分からない', d: 'カルテにはあるけど、集計するヒマがない。経営判断は勘。' },
    { t: 'いつの間にか来なくなった患者', d: '離脱予兆は出ていたはず。でも見るすべがない。' },
    { t: 'データはあるけど見れない', d: '予約・問診・施術メモがバラバラ。横串で見たい。' },
    { t: '値上げも採用も、根拠が出せない', d: '数字がないから怖くて踏み込めない。広告費もどんぶり勘定。' },
  ];
  return (
    <section id="problems">
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">PROBLEM</div>
          <h2 style={{ fontSize: 'clamp(26px, 3.8vw, 44px)', marginTop: 14, maxWidth: 880 }}>
            こんな <span style={{ color: '#fb7847' }}>"あるある"</span>、<br/>ありませんか？
          </h2>
        </Reveal>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 18, marginTop: 56,
        }}>
          {items.map((it, i) => (
            <Reveal key={i} delay={i*60}>
              <div className="glass" style={{
                padding: 24, borderRadius: 18,
                minHeight: 180, position: 'relative', overflow: 'hidden',
                transition: 'transform .35s ease, border-color .35s ease',
              }}
              onMouseMove={(e) => {
                const r = e.currentTarget.getBoundingClientRect();
                e.currentTarget.style.background = `radial-gradient(400px circle at ${e.clientX - r.left}px ${e.clientY - r.top}px, rgba(239,68,68,.08), rgba(255,255,255,.02))`;
              }}
              onMouseLeave={(e) => { e.currentTarget.style.background = ''; }}
              >
                <div style={{ position: 'absolute', top: -30, right: -30, width: 100, height: 100, borderRadius: 999, background: 'radial-gradient(circle, rgba(239,68,68,.18), transparent 70%)' }} />
                <div className="font-mono" style={{ fontSize: 11, color: '#6b7280', letterSpacing: '.15em' }}>NO.{String(i+1).padStart(2,'0')}</div>
                <div style={{ fontSize: 19, fontWeight: 800, marginTop: 12, lineHeight: 1.45, color: '#fff' }}>{it.t}</div>
                <div style={{ fontSize: 13, color: '#9ca3af', marginTop: 12, lineHeight: 1.75 }}>{it.d}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// === 3 main AI features ===
function MainFeatures() {
  const [active, setActive] = useState(0);
  const features = [
    {
      tag: 'AI 問診票解析',
      title: '問診票が、答えに変わる。',
      desc: 'LINEで送られてきた問診票を、AIが症状・部位・原因仮説まで分解。スタッフが画面を開いた時点で、もう答えが並んでいます。',
      points: ['平均1.2秒で症状分類', '再発リスクを自動評価', '電子カルテに即反映'],
      mock: <IntakeMock />,
      accent: '#7c3aed',
      before: '紙の問診票を院長が読み返して、頭の中で整理',
      after: 'AIが分類した結果から、スタッフは確認するだけ',
    },
    {
      tag: 'AI 傾向分析',
      title: '勘の経営から、データの経営へ。',
      desc: '蓄積された問診・施術データを横串で分析。院全体の症状傾向・リピート傾向・離脱予兆を、ダッシュボードで可視化します。',
      points: ['症状別リピート率', '離脱予兆スコアリング', '時間帯・曜日の傾向'],
      mock: <TrendMock />,
      accent: '#06b6d4',
      before: 'カルテをめくって電卓を叩く週末',
      after: '開いた瞬間、判断材料がそろっている',
    },
    {
      tag: 'AI フォローLINE',
      title: '院長は、承認するだけ。',
      desc: '問診票とスタッフメモから、患者一人ひとりに合わせたフォロー文面をAIが自動生成。院長はチェックして、ワンクリックで送信。',
      points: ['症状・時期に合わせた文面', '院のトーンを学習', 'ワンクリック送信'],
      mock: <FollowDraftMock />,
      accent: '#fb7847',
      before: '深夜、一通ずつ文面を書き直す',
      after: '下書きを読んで、送るボタンを押すだけ',
    },
  ];
  const f = features[active];

  return (
    <section id="features" style={{ padding: '120px 0' }}>
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">CORE AI</div>
          <h2 style={{ fontSize: 'clamp(26px, 3.8vw, 44px)', marginTop: 14, maxWidth: 920 }}>
            リピケアが、<span style={{ color: '#22c55e' }}>AIで</span><br/>全部やります。
          </h2>
          <p style={{ marginTop: 20, fontSize: 17, color: '#9ca3af', maxWidth: 620 }}>
            3つのAIが、整骨院の現場で後手にまわっていた作業を、ぜんぶ前に出します。
          </p>
        </Reveal>

        {/* Tabs */}
        <div style={{ display: 'flex', gap: 10, marginTop: 56, flexWrap: 'wrap' }}>
          {features.map((feat, i) => (
            <button key={i} onClick={() => setActive(i)} style={{
              padding: '12px 18px', borderRadius: 999,
              background: active === i ? `${feat.accent}1a` : 'rgba(255,255,255,.03)',
              border: `1px solid ${active === i ? feat.accent + '66' : 'rgba(255,255,255,.08)'}`,
              color: active === i ? '#fff' : '#9ca3af',
              fontSize: 13, fontWeight: 600, cursor: 'pointer',
              transition: 'all .3s',
              fontFamily: 'inherit',
            }}>
              <span style={{ color: feat.accent, marginRight: 8, fontFamily: 'JetBrains Mono', fontSize: 11 }}>{String(i+1).padStart(2,'0')}</span>
              {feat.tag}
            </button>
          ))}
        </div>

        {/* Active feature */}
        <div className="feat-grid" key={active} style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56,
          alignItems: 'center', marginTop: 56,
          animation: 'fadeUp .6s cubic-bezier(.16,1,.3,1)',
        }}>
          <div>
            <h3 style={{ fontSize: 'clamp(24px, 3.2vw, 38px)', lineHeight: 1.2, fontWeight: 900 }}>
              {f.title}
            </h3>
            <p style={{ marginTop: 18, color: '#9ca3af', fontSize: 16 }}>{f.desc}</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 24 }}>
              {f.points.map((p, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ width: 22, height: 22, borderRadius: 999, background: `${f.accent}26`, border: `1px solid ${f.accent}66`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <div style={{ width: 6, height: 6, borderRadius: 999, background: f.accent, boxShadow: `0 0 8px ${f.accent}` }} />
                  </div>
                  <div style={{ fontSize: 14, color: '#e5e7eb' }}>{p}</div>
                </div>
              ))}
            </div>
            <div style={{
              marginTop: 28, padding: 16, borderRadius: 14,
              background: 'rgba(255,255,255,.02)', border: '1px solid rgba(255,255,255,.06)',
            }}>
              <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <div style={{ flex: 1 }}>
                  <div className="font-mono" style={{ fontSize: 10, color: '#6b7280', letterSpacing: '.15em' }}>BEFORE</div>
                  <div style={{ fontSize: 13, color: '#9ca3af', marginTop: 6, textDecoration: 'line-through' }}>{f.before}</div>
                </div>
                <div style={{ color: f.accent, fontSize: 20, fontWeight: 700, alignSelf: 'center' }}>→</div>
                <div style={{ flex: 1 }}>
                  <div className="font-mono" style={{ fontSize: 10, letterSpacing: '.15em', color: f.accent }}>AFTER</div>
                  <div style={{ fontSize: 13, color: '#fff', marginTop: 6, fontWeight: 500 }}>{f.after}</div>
                </div>
              </div>
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <div style={{ position: 'absolute', inset: -30, background: `radial-gradient(circle at 50% 50%, ${f.accent}22, transparent 60%)`, filter: 'blur(40px)', pointerEvents: 'none' }} />
            <div style={{ position: 'relative' }}>{f.mock}</div>
          </div>
        </div>
      </div>
      <style>{`
        @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
        @media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr !important; gap: 36px !important; } }
      `}</style>
    </section>
  );
}

// === Other features ===
function OtherFeatures() {
  const items = [
    { t: 'LINE 予約システム', d: '日程・メニュー・問診票の事前入力まで、すべてLINEで完結。', icon: 'L' },
    { t: '管理画面', d: 'スタッフ・管理者ロール対応。アクセス権を細かく制御。', icon: '⌘' },
    { t: '予約ステータス管理', d: '確定・変更・キャンセル・完了を一元管理。漏れない仕組み。', icon: '◉' },
    { t: 'ダッシュボード', d: '今日の予約、リピート率、AI解析タスクが一画面で見える。', icon: '◧' },
    { t: 'スタッフメモ', d: '施術ごとに残せるメモ。AIが次回のフォロー文面に反映。', icon: '✎' },
    { t: '自動フォローメール', d: '来院後のサンクスメール・リマインドも自動で配信。LINE未登録の患者にも届きます。', icon: '✉'},
  ];
  return (
    <section style={{ paddingTop: 40 }}>
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">EVERYTHING ELSE</div>
          <h2 style={{ fontSize: 'clamp(24px, 3.2vw, 38px)', marginTop: 14 }}>
            運用に必要なものは、<br/>ぜんぶ入っています。
          </h2>
        </Reveal>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 16, marginTop: 48,
        }}>
          {items.map((it, i) => (
            <Reveal key={i} delay={i*40}>
              <div className="glass" style={{ padding: 22, borderRadius: 16, height: '100%' }}>
                <div style={{
                  width: 42, height: 42, borderRadius: 12,
                  background: 'linear-gradient(135deg, rgba(34,197,94,.18), rgba(6,182,212,.12))',
                  border: '1px solid rgba(34,197,94,.3)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'Space Grotesk', fontWeight: 700, fontSize: 18,
                  color: '#22c55e',
                  boxShadow: '0 0 24px -8px rgba(34,197,94,.4)',
                }}>{it.icon}</div>
                <div style={{ fontSize: 17, fontWeight: 700, marginTop: 16 }}>{it.t}</div>
                <div style={{ fontSize: 13, color: '#9ca3af', marginTop: 8, lineHeight: 1.7 }}>{it.d}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// === How it works ===
function HowItWorks() {
  const steps = [
    { n: '01', t: '患者がLINEで予約', d: '公式アカウントから日程・メニュー・問診票まで完結。患者は操作する画面が1つだけ。', accent: '#22c55e' },
    { n: '02', t: 'AIが問診票を解析', d: '送信された瞬間にAIが症状・部位・原因仮説を分類。スタッフ画面に整理済みで届きます。', accent: '#7c3aed' },
    { n: '03', t: '施術後にスタッフがメモ', d: 'タップ中心の入力で1分。AIが次回フォローの素材として保存します。', accent: '#06b6d4' },
    { n: '04', t: 'AIがフォロー文面を下書き', d: '患者の症状・通院ペースに合わせた文面が生成。院長はチェックしてワンクリック送信。', accent: '#fb7847' },
  ];
  return (
    <section id="flow" style={{ position: 'relative' }}>
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">HOW IT WORKS</div>
          <h2 style={{ fontSize: 'clamp(26px, 3.8vw, 44px)', marginTop: 14 }}>
            予約からフォローまで、<br/>
            <span className="ai-text-mix">4ステップ</span>で完結。
          </h2>
        </Reveal>

        <div style={{ marginTop: 64, position: 'relative' }}>
          {/* timeline line */}
          <div style={{
            position: 'absolute', left: 30, top: 30, bottom: 30,
            width: 2, background: 'linear-gradient(180deg, #22c55e, #7c3aed, #06b6d4, #fb7847)',
            opacity: .4,
          }} className="timeline-line" />
          {steps.map((s, i) => (
            <Reveal key={i} delay={i*100}>
              <div style={{
                display: 'grid', gridTemplateColumns: '60px 1fr',
                gap: 24, marginBottom: 36, position: 'relative',
              }}>
                <div style={{ position: 'relative' }}>
                  <div style={{
                    width: 60, height: 60, borderRadius: 999,
                    background: `${s.accent}1a`,
                    border: `1px solid ${s.accent}66`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'Space Grotesk', fontWeight: 800, fontSize: 18,
                    color: s.accent,
                    boxShadow: `0 0 30px -5px ${s.accent}66`,
                    backdropFilter: 'blur(10px)',
                    position: 'relative', zIndex: 2,
                    background: `radial-gradient(circle, ${s.accent}33, ${s.accent}0a)`,
                  }}>{s.n}</div>
                </div>
                <div className="glass" style={{ padding: 22, borderRadius: 16 }}>
                  <div style={{ fontSize: 20, fontWeight: 800 }}>{s.t}</div>
                  <div style={{ fontSize: 14, color: '#9ca3af', marginTop: 8, lineHeight: 1.75 }}>{s.d}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// === Pricing ===
function Pricing() {
  return (
    <section id="pricing" style={{ position: 'relative' }}>
      <div className="mesh-bg" style={{ opacity: .6 }} />
      <div className="wrap" style={{ position: 'relative' }}>
        <Reveal>
          <div className="eyebrow" style={{ color: '#fb7847' }}>LAUNCH OFFER</div>
          <h2 style={{ fontSize: 'clamp(26px, 3.8vw, 44px)', marginTop: 14, maxWidth: 920 }}>
            リリース前だけの、<br/>
            <span style={{ color: '#fb7847' }}>特別な価格</span>。
          </h2>
          <p style={{ marginTop: 20, color: '#9ca3af', fontSize: 17, maxWidth: 620 }}>
            6月1日までに導入予約をいただいた院は、リリース後もずっとキャンペーン価格で利用できます。
          </p>
          <div style={{ marginTop: 28 }}><CountdownPill /></div>
        </Reveal>

        <div className="price-grid" style={{
          display: 'grid', gridTemplateColumns: '1fr 1.2fr',
          gap: 24, marginTop: 64,
        }}>
          {/* Regular */}
          <Reveal>
            <div className="glass" style={{ padding: 36, borderRadius: 22, height: '100%' }}>
              <div className="font-mono" style={{ fontSize: 11, color: '#6b7280', letterSpacing: '.18em' }}>STANDARD</div>
              <div style={{ fontSize: 22, fontWeight: 700, marginTop: 12, color: '#e5e7eb' }}>通常価格</div>
              <div style={{ fontSize: 13, color: '#6b7280', marginTop: 4 }}>2026年6月1日以降</div>

              <div style={{ marginTop: 36 }}>
                <div className="font-mono" style={{ fontSize: 10, color: '#6b7280', letterSpacing: '.15em' }}>MONTHLY</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}>
                  <span className="font-en" style={{ fontSize: 52, fontWeight: 800, color: '#e5e7eb', letterSpacing: '-.02em' }}>10,000</span>
                  <span style={{ fontSize: 18, color: '#9ca3af' }}>円 / 月</span>
                </div>
              </div>

              <div style={{ marginTop: 24, padding: 16, borderRadius: 12, background: 'rgba(255,255,255,.02)', border: '1px solid rgba(255,255,255,.05)' }}>
                <div className="font-mono" style={{ fontSize: 10, color: '#6b7280', letterSpacing: '.15em' }}>INITIAL FEE</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 4 }}>
                  <span className="font-en" style={{ fontSize: 28, fontWeight: 700, color: '#e5e7eb' }}>30,000</span>
                  <span style={{ fontSize: 14, color: '#9ca3af' }}>円 (初回のみ)</span>
                </div>
              </div>

              <ul style={{ listStyle: 'none', padding: 0, margin: '32px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {['AI問診・傾向分析・フォローLINE', 'LINE予約 / 管理画面', '基本サポート'].map((t, i) => (
                  <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'center', color: '#9ca3af', fontSize: 13 }}>
                    <span style={{ color: '#6b7280' }}>✓</span> {t}
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>

          {/* Campaign */}
          <Reveal delay={100}>
            <div className="ai-border" style={{
              padding: 36, borderRadius: 22, height: '100%',
              background: 'linear-gradient(180deg, rgba(124,58,237,.08), rgba(34,197,94,.08))',
              position: 'relative', overflow: 'hidden',
              boxShadow: '0 40px 100px -30px rgba(34,197,94,.35), 0 0 80px -20px rgba(124,58,237,.3)',
            }}>
              {/* ribbon */}
              <div style={{
                position: 'absolute', top: 24, right: -42, transform: 'rotate(40deg)',
                background: 'linear-gradient(110deg, #fb7847, #f59e0b)',
                color: '#0a0f14', fontWeight: 900, fontSize: 11,
                padding: '6px 50px', letterSpacing: '.15em', fontFamily: 'Space Grotesk',
                boxShadow: '0 6px 20px -4px rgba(251,120,71,.6)',
              }}>LIMITED</div>

              <div className="font-mono" style={{ fontSize: 11, color: '#22c55e', letterSpacing: '.18em' }}>PRE-LAUNCH ONLY</div>
              <div style={{ fontSize: 24, fontWeight: 800, marginTop: 12 }}>
                <span className="ai-text-mix">キャンペーン価格</span>
              </div>
              <div style={{ fontSize: 13, color: '#9ca3af', marginTop: 4 }}>6月1日までの導入予約限定 · 適用は永続</div>

              <div style={{ marginTop: 36 }}>
                <div className="font-mono" style={{ fontSize: 10, color: '#9ca3af', letterSpacing: '.15em' }}>MONTHLY</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 6, flexWrap: 'wrap' }}>
                  <span className="font-en" style={{ fontSize: 72, fontWeight: 900, color: '#fff', letterSpacing: '-.03em', lineHeight: 1, textShadow: '0 0 40px rgba(34,197,94,.4)' }}>5,000</span>
                  <span style={{ fontSize: 20, color: '#e5e7eb', fontWeight: 600 }}>円 / 月</span>
                  <span style={{ fontSize: 14, color: '#6b7280', textDecoration: 'line-through' }}>10,000円</span>
                </div>
              </div>

              <div style={{ marginTop: 24, padding: 16, borderRadius: 14, background: 'rgba(34,197,94,.08)', border: '1px solid rgba(34,197,94,.3)' }}>
                <div className="font-mono" style={{ fontSize: 10, color: '#22c55e', letterSpacing: '.15em' }}>INITIAL FEE</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 4 }}>
                  <span className="font-en" style={{ fontSize: 40, fontWeight: 800, color: '#22c55e' }}>0</span>
                  <span style={{ fontSize: 16, color: '#e5e7eb' }}>円</span>
                  <span style={{ fontSize: 12, color: '#6b7280', textDecoration: 'line-through' }}>30,000円</span>
                </div>
              </div>

              {/* savings badge */}
              <div style={{
                marginTop: 24, padding: '14px 18px',
                background: 'linear-gradient(110deg, rgba(251,120,71,.15), rgba(34,197,94,.15))',
                border: '1px solid rgba(251,120,71,.3)',
                borderRadius: 14,
                display: 'flex', alignItems: 'center', gap: 14,
              }}>
                <div style={{ fontFamily: 'Space Grotesk', fontWeight: 900, fontSize: 32, color: '#fb7847', textShadow: '0 0 20px rgba(251,120,71,.4)' }}>
                  ¥90,000
                </div>
                <div>
                  <div style={{ fontSize: 13, color: '#e5e7eb', fontWeight: 600 }}>年間で約9万円お得</div>
                  <div className="font-mono" style={{ fontSize: 10, color: '#9ca3af', letterSpacing: '.1em', marginTop: 2 }}>SAVINGS / YEAR · 永続適用</div>
                </div>
              </div>

              <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {['AI問診・傾向分析・フォローLINE', 'LINE予約 / 管理画面 / スタッフロール', '専任オンボーディング (無料)', 'リリース後の新機能を優先解放'].map((t, i) => (
                  <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'center', color: '#e5e7eb', fontSize: 13 }}>
                    <span style={{ color: '#22c55e' }}>✓</span> {t}
                  </li>
                ))}
              </ul>

              <a href="https://calendar.app.google/kCVCTAi7FEZw2XZv6" target="_blank" rel="noopener" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 28, padding: '16px 22px', fontSize: 16 }}>
                導入予約する <span style={{ fontSize: 18 }}>→</span>
              </a>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

// === Testimonials ===
function Testimonials() {
  return null;
  /* removed — no real testimonials yet */
  const items = [];
  return (
    <section>
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">VOICES</div>
          <h2 style={{ fontSize: 'clamp(24px, 3.2vw, 38px)', marginTop: 14, maxWidth: 760 }}>
            すでに、現場の<br/>院長たちが触れています。
          </h2>
        </Reveal>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 20, marginTop: 48,
        }}>
          {items.map((t, i) => (
            <Reveal key={i} delay={i*80}>
              <div className="glass" style={{ padding: 28, borderRadius: 18, height: '100%', position: 'relative' }}>
                <div style={{ fontSize: 60, lineHeight: 1, color: 'rgba(34,197,94,.25)', fontFamily: 'Space Grotesk', fontWeight: 900, position: 'absolute', top: 12, right: 18 }}>"</div>
                <div style={{ fontSize: 15, color: '#e5e7eb', lineHeight: 1.85, position: 'relative' }}>
                  {t.q}
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 24, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,.06)' }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: 999,
                    background: 'linear-gradient(135deg, #22c55e, #06b6d4)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontWeight: 800, fontSize: 13, color: '#07090d',
                  }}>{t.initials}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 700, fontSize: 14 }}>{t.name}</div>
                    <div style={{ fontSize: 11, color: '#9ca3af', marginTop: 2 }}>{t.role}</div>
                  </div>
                  <div className="font-mono" style={{
                    fontSize: 9, padding: '3px 8px', borderRadius: 999,
                    background: 'rgba(34,197,94,.1)', border: '1px solid rgba(34,197,94,.3)',
                    color: '#22c55e', letterSpacing: '.1em',
                  }}>{t.tag}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// === FAQ ===
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
    { q: '導入は難しくないですか？', a: '最速3日で運用開始できます。オンラインまたは対面で、操作方法をまとめた資料をお渡ししながらご案内しますので、はじめての方でも安心です。' },
    { q: '現場スタッフは使いこなせますか？', a: '視覚的に操作しやすいUIで設計しているので、画面を見ながら直感的に操作できます。よく使う動作はタップ中心、入力もAIの下書きを承認するだけです。' },
    { q: 'いつから使えますか？', a: '2026年6月1日の正式リリース以降、順次オンボーディング開始です。導入予約をいただいた院から優先的にご案内します。' },
    { q: '契約期間の縛りはありますか？', a: 'ありません。月単位でいつでも解約可能です。キャンペーン適用院も、解約時の違約金はありません。' },
    { q: '他のサービスと何が違いますか？', a: 'リピケアは「予約・問診・フォロー」を1つのAIで貫いている点が違います。データが繋がっているからこそ、フォロー文面の精度が上がり続けます。' },
    { q: 'サポート体制は？', a: '平日9:00〜16:00にチャット・メールでサポートいたします。導入後の操作で迷ったときも、お気軽にお問い合わせください。' },
  ];
  return (
    <section id="faq">
      <div className="wrap" style={{ maxWidth: 880 }}>
        <Reveal>
          <div className="eyebrow">FAQ</div>
          <h2 style={{ fontSize: 'clamp(26px, 3.6vw, 40px)', marginTop: 14 }}>
            よくあるご質問
          </h2>
        </Reveal>
        <div style={{ marginTop: 48, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {items.map((it, i) => (
            <Reveal key={i} delay={i*40}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', textAlign: 'left',
                padding: '22px 24px', borderRadius: 16,
                background: open === i ? 'rgba(34,197,94,.04)' : 'rgba(255,255,255,.02)',
                border: open === i ? '1px solid rgba(34,197,94,.25)' : '1px solid rgba(255,255,255,.06)',
                color: '#fff', cursor: 'pointer',
                fontFamily: 'inherit',
                transition: 'all .3s',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                  <div className="font-mono" style={{ fontSize: 11, color: open === i ? '#22c55e' : '#6b7280', letterSpacing: '.15em' }}>Q{String(i+1).padStart(2,'0')}</div>
                  <div style={{ flex: 1, fontSize: 16, fontWeight: 700 }}>{it.q}</div>
                  <div style={{ fontSize: 22, color: open === i ? '#22c55e' : '#6b7280', transform: open === i ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform .3s' }}>+</div>
                </div>
                <div style={{
                  overflow: 'hidden',
                  maxHeight: open === i ? 200 : 0,
                  transition: 'max-height .4s ease, margin .3s ease',
                  marginTop: open === i ? 16 : 0,
                }}>
                  <div style={{ paddingLeft: 38, fontSize: 14, color: '#9ca3af', lineHeight: 1.85 }}>{it.a}</div>
                </div>
              </button>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// === FINAL CTA ===
function FinalCTA() {
  const { days } = useCountdown(RELEASE_DATE);
  return (
    <section id="cta" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="mesh-bg" style={{ opacity: 1 }} />
      <div className="wrap" style={{ position: 'relative', textAlign: 'center' }}>
        <Reveal>
          <div className="eyebrow" style={{ color: '#fb7847' }}>NOW BOARDING</div>
          <h2 style={{ fontSize: 'clamp(28px, 4.4vw, 56px)', marginTop: 14, lineHeight: 1.1, fontWeight: 900 }}>
            6/1まで残り <span style={{ color: '#fb7847', fontFamily: 'Space Grotesk' }}>{days}</span> 日。<br/>
            <span className="ai-text-mix">未来の整骨院</span>を、今 予約する。
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <p style={{ marginTop: 24, fontSize: 17, color: '#9ca3af', maxWidth: 620, margin: '24px auto 0' }}>
            キャンペーン適用枠は、ご相談しながら順次ご案内します。<br/>
            まずは導入予約から、お気軽にどうぞ。
          </p>
        </Reveal>
        <Reveal delay={200}>
          <div style={{ marginTop: 40, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="https://calendar.app.google/kCVCTAi7FEZw2XZv6" target="_blank" rel="noopener" className="btn btn-primary" style={{ padding: '18px 28px', fontSize: 16 }}>
              導入予約する
              <span style={{ fontSize: 12, fontWeight: 600, opacity: .8 }}>月5,000円・導入費0円</span>
              <span style={{ fontSize: 18 }}>→</span>
            </a>
          </div>
        </Reveal>
        <Reveal delay={260}>
          <div style={{ marginTop: 40 }}><CountdownPill /></div>
        </Reveal>
      </div>
    </section>
  );
}

// === Footer ===
function Footer() {
  return (
    <footer style={{
      borderTop: '1px solid rgba(255,255,255,.06)',
      padding: '60px 0 40px',
      background: 'rgba(0,0,0,.4)',
    }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 32 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <img src="assets/logo.png" alt="リピケア" style={{ width: 34, height: 34, objectFit: 'contain' }} />
              <div style={{ fontWeight: 800, fontSize: 17 }}>リピケア</div>
            </div>
            <div style={{ fontSize: 12, color: '#6b7280', marginTop: 12, lineHeight: 1.8 }}>
              整骨院専用の<br/>AI予約・問診・フォローSaaS
            </div>
          </div>
          {[
            { title: 'プロダクト', items: ['機能', '料金', '導入の流れ', 'FAQ'] },
            { title: '会社', items: [['お問い合わせ', 'https://calendar.app.google/kCVCTAi7FEZw2XZv6']] },
            { title: '規約', items: [['利用規約', 'terms.html'], ['プライバシーポリシー', 'privacy.html'], ['特定商取引法に基づく表記', 'tokushoho.html']] },
            { title: 'SNS', items: [['Instagram @repicareai', 'https://instagram.com/repicareai']] },
          ].map((col, i) => (
            <div key={i}>
              <div className="font-mono" style={{ fontSize: 10, color: '#6b7280', letterSpacing: '.18em' }}>{col.title.toUpperCase()}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: '14px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.items.map((it, j) => {
                  const [label, href] = Array.isArray(it) ? it : [it, '#' + (it === '機能' ? 'features' : it === '料金' ? 'pricing' : it === '導入の流れ' ? 'flow' : it === 'FAQ' ? 'faq' : '')];
                  const external = href && href.startsWith('http');
                  return <li key={j}><a href={href} target={external ? '_blank' : undefined} rel={external ? 'noopener' : undefined} style={{ color: '#9ca3af', fontSize: 13, textDecoration: 'none' }}>{label}</a></li>;
                })}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 56, paddingTop: 28, borderTop: '1px solid rgba(255,255,255,.05)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12,
        }}>
          <div className="font-mono" style={{ fontSize: 11, color: '#6b7280' }}>© 2026 Repicare AI · All rights reserved</div>
          <div className="font-mono" style={{ fontSize: 11, color: '#6b7280', display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: '#22c55e' }} className="pulse-dot" />
            ALL SYSTEMS OPERATIONAL
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Marquee, Problems, MainFeatures, OtherFeatures, HowItWorks, Pricing, Testimonials, FAQ, FinalCTA, Footer, Reveal, CountdownPill });
