// auth.jsx — login, signup, onboarding flow, features page, pricing page

const { useState, useEffect } = React;

// ─────── Shared auth layout ───────

function AuthLayout({ side, children }) {
  return (
    <div style={{ minHeight: '100vh', display: 'grid', gridTemplateColumns: '1fr 1.1fr' }}>
      {/* Left — form */}
      <div className="page-enter" style={{ display: 'flex', flexDirection: 'column', padding: '32px 48px', minHeight: '100vh' }}>
        <div style={{ marginBottom: 80 }}><Logo/></div>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ width: '100%', maxWidth: 380 }}>{children}</div>
        </div>
        <div className="row gap-4" style={{ fontSize: 12, color: 'var(--text-3)' }}>
          <span>© 2026 ReplyFlow</span>
          <a href="#" onClick={e=>e.preventDefault()} style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
          <a href="#" onClick={e=>e.preventDefault()} style={{ color: 'inherit', textDecoration: 'none' }}>Terms</a>
        </div>
      </div>
      {/* Right — visual */}
      <div style={{ position: 'relative', overflow: 'hidden', borderLeft: '1px solid var(--border)', background: 'var(--bg-1)' }}>
        {side}
      </div>
    </div>
  );
}

function AuthSide() {
  return (
    <>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 80% 50% at 30% 30%, rgba(16,185,129,0.15), transparent 60%), radial-gradient(ellipse 60% 60% at 70% 70%, rgba(59,130,246,0.1), transparent 60%)',
      }}/>
      <div style={{ position:'relative', height:'100%', padding: 56, display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
        <div>
          <span className="tag"><span className="tag-dot"/>Live now · 4,200+ businesses</span>
          <h2 style={{ marginTop: 24, maxWidth: 460, lineHeight: 1.1 }} className="text-grad">
            The customer hub that <span className="text-grad-em">books tables while you sleep</span>.
          </h2>
        </div>

        {/* Floating chat preview */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 420 }}>
          <div className="glass-strong" style={{ padding: 14, borderRadius: 14, transform: 'translateX(-12px)' }}>
            <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 6, display: 'flex', gap: 6, alignItems: 'center' }}>
              <Icons.whatsapp size={11}/> Sofia · just now
            </div>
            <div style={{ fontSize: 13.5 }}>Table for 4 tonight at 8?</div>
          </div>
          <div className="glass-strong" style={{
            padding: 14, borderRadius: 14, marginLeft: 32,
            background: 'linear-gradient(180deg, rgba(16,185,129,0.18), rgba(16,185,129,0.06))',
            borderColor: 'rgba(16,185,129,0.3)',
          }}>
            <div style={{ fontSize: 11, color: 'var(--accent)', marginBottom: 6, display: 'flex', gap: 6, alignItems: 'center' }}>
              <Icons.spark size={11}/> ReplyFlow AI · 0.6s
            </div>
            <div style={{ fontSize: 13.5 }}>Hi Sofia! 8:00 is fully booked, but I have 7:30 or 9:00 available. Both window seats — which works?</div>
          </div>
        </div>

        <div style={{ fontSize: 13, color: 'var(--text-2)', maxWidth: 420 }}>
          "Setup took 4 minutes. By the end of the first weekend, ReplyFlow had handled 312 messages and booked 47 tables — without me touching it."
          <div style={{ marginTop: 12, fontSize: 12, color: 'var(--text-3)' }}>— Marco V., Trattoria Volta · Milan</div>
        </div>
      </div>
    </>
  );
}

// ─────── Login ───────

function LoginPage() {
  const { go } = useRouter();
  const [email, setEmail] = useState('');
  const [pw, setPw] = useState('');
  const submit = (e) => { e.preventDefault(); go('/dashboard'); };

  return (
    <AuthLayout side={<AuthSide/>}>
      <div style={{ marginBottom: 32 }}>
        <h2 style={{ fontSize: 28, marginBottom: 6 }}>Welcome back.</h2>
        <p className="muted" style={{ fontSize: 14, margin: 0 }}>Sign in to your ReplyFlow workspace.</p>
      </div>

      <button className="btn btn-ghost" style={{ width: '100%', height: 44, marginBottom: 12 }}>
        <svg width="16" height="16" viewBox="0 0 48 48"><path fill="#FFC107" d="M43.6 20.1H42V20H24v8h11.3a12 12 0 01-22.7-4 12 12 0 0119.7-9.2l5.7-5.7A20 20 0 1044 24a20 20 0 00-.4-3.9z"/><path fill="#FF3D00" d="M6.3 14.7l6.6 4.8A12 12 0 0124 12a12 12 0 017.5 2.7l5.7-5.7A20 20 0 006.3 14.7z"/><path fill="#4CAF50" d="M24 44a20 20 0 0013.5-5.2l-6.2-5.3A12 12 0 0124 36a12 12 0 01-11.3-7.8l-6.6 5A20 20 0 0024 44z"/><path fill="#1976D2" d="M43.6 20.1H42V20H24v8h11.3a12 12 0 01-4.1 5.6l6.2 5.3C37 41 44 36 44 24a20 20 0 00-.4-3.9z"/></svg>
        Continue with Google
      </button>
      <button className="btn btn-ghost" style={{ width: '100%', height: 44, marginBottom: 24 }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
        Continue with Apple
      </button>

      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
        <div style={{ flex:1, height:1, background: 'var(--border)' }}/>
        <span style={{ fontSize: 12, color: 'var(--text-3)' }}>or with email</span>
        <div style={{ flex:1, height:1, background: 'var(--border)' }}/>
      </div>

      <form onSubmit={submit}>
        <div style={{ marginBottom: 14 }}>
          <label className="label">Email</label>
          <input className="input" type="email" placeholder="you@restaurant.com" value={email} onChange={e=>setEmail(e.target.value)}/>
        </div>
        <div style={{ marginBottom: 8 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <label className="label">Password</label>
            <a href="#" onClick={e=>e.preventDefault()} style={{ fontSize: 12, color: 'var(--accent)', textDecoration: 'none' }}>Forgot?</a>
          </div>
          <input className="input" type="password" placeholder="••••••••" value={pw} onChange={e=>setPw(e.target.value)}/>
        </div>
        <button type="submit" className="btn btn-primary" style={{ width: '100%', height: 44, marginTop: 16 }}>
          Sign in <Icons.arrow size={14}/>
        </button>
      </form>

      <div style={{ textAlign: 'center', marginTop: 24, fontSize: 13, color: 'var(--text-2)' }}>
        New to ReplyFlow? <Link to="/signup" style={{ color: 'var(--accent)', textDecoration: 'none', fontWeight: 500 }}>Create an account</Link>
      </div>
    </AuthLayout>
  );
}

// ─────── Signup ───────

function SignupPage() {
  const { go } = useRouter();
  const submit = (e) => { e.preventDefault(); go('/onboarding'); };

  return (
    <AuthLayout side={<AuthSide/>}>
      <div style={{ marginBottom: 32 }}>
        <h2 style={{ fontSize: 28, marginBottom: 6 }}>Start free for 14 days.</h2>
        <p className="muted" style={{ fontSize: 14, margin: 0 }}>No credit card. Setup takes 4 minutes.</p>
      </div>

      <button className="btn btn-ghost" style={{ width: '100%', height: 44, marginBottom: 12 }}>
        <svg width="16" height="16" viewBox="0 0 48 48"><path fill="#FFC107" d="M43.6 20.1H42V20H24v8h11.3a12 12 0 01-22.7-4 12 12 0 0119.7-9.2l5.7-5.7A20 20 0 1044 24a20 20 0 00-.4-3.9z"/><path fill="#FF3D00" d="M6.3 14.7l6.6 4.8A12 12 0 0124 12a12 12 0 017.5 2.7l5.7-5.7A20 20 0 006.3 14.7z"/><path fill="#4CAF50" d="M24 44a20 20 0 0013.5-5.2l-6.2-5.3A12 12 0 0124 36a12 12 0 01-11.3-7.8l-6.6 5A20 20 0 0024 44z"/><path fill="#1976D2" d="M43.6 20.1H42V20H24v8h11.3a12 12 0 01-4.1 5.6l6.2 5.3C37 41 44 36 44 24a20 20 0 00-.4-3.9z"/></svg>
        Continue with Google
      </button>

      <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '20px 0' }}>
        <div style={{ flex:1, height:1, background: 'var(--border)' }}/>
        <span style={{ fontSize: 12, color: 'var(--text-3)' }}>or with email</span>
        <div style={{ flex:1, height:1, background: 'var(--border)' }}/>
      </div>

      <form onSubmit={submit}>
        <div style={{ marginBottom: 14 }}>
          <label className="label">Business name</label>
          <input className="input" placeholder="Trattoria Volta"/>
        </div>
        <div style={{ marginBottom: 14 }}>
          <label className="label">Work email</label>
          <input className="input" type="email" placeholder="you@restaurant.com"/>
        </div>
        <div style={{ marginBottom: 14 }}>
          <label className="label">Password</label>
          <input className="input" type="password" placeholder="At least 8 characters"/>
        </div>
        <button type="submit" className="btn btn-primary" style={{ width: '100%', height: 44, marginTop: 8 }}>
          Create account <Icons.arrow size={14}/>
        </button>
      </form>
      <p style={{ fontSize: 11.5, color: 'var(--text-3)', textAlign: 'center', marginTop: 16, lineHeight: 1.5 }}>
        By signing up, you agree to our <a href="#" onClick={e=>e.preventDefault()} style={{ color: 'var(--text-2)' }}>Terms</a> and <a href="#" onClick={e=>e.preventDefault()} style={{ color: 'var(--text-2)' }}>Privacy Policy</a>.
      </p>

      <div style={{ textAlign: 'center', marginTop: 24, fontSize: 13, color: 'var(--text-2)' }}>
        Already have an account? <Link to="/login" style={{ color: 'var(--accent)', textDecoration: 'none', fontWeight: 500 }}>Sign in</Link>
      </div>
    </AuthLayout>
  );
}

// ─────── Onboarding wizard ───────

const ONBOARD_STEPS = [
  { id: 'welcome', label: 'Welcome' },
  { id: 'business', label: 'Business' },
  { id: 'channels', label: 'Channels' },
  { id: 'train', label: 'Train AI' },
  { id: 'done', label: 'Ready' },
];

function StepDot({ idx, current, label, done }) {
  const active = idx === current;
  const isDone = done;
  return (
    <div className="row gap-2" style={{ flex: 1, alignItems: 'center' }}>
      <div style={{
        width: 22, height: 22, borderRadius: '50%',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 11, fontWeight: 600,
        background: isDone ? 'var(--accent)' : (active ? 'rgba(16,185,129,0.15)' : 'var(--surface)'),
        border: '1px solid ' + (isDone || active ? 'var(--accent)' : 'var(--border)'),
        color: isDone ? '#052e23' : (active ? 'var(--accent)' : 'var(--text-3)'),
        transition: 'all .3s var(--easing)',
        flexShrink: 0,
      }}>
        {isDone ? <Icons.check size={11} stroke="#052e23" sw={3}/> : idx + 1}
      </div>
      <div style={{ fontSize: 12, color: active || isDone ? 'var(--text-1)' : 'var(--text-3)', whiteSpace: 'nowrap' }}>{label}</div>
      {idx < ONBOARD_STEPS.length - 1 && <div style={{ flex: 1, height: 1, background: isDone ? 'var(--accent)' : 'var(--border)', marginLeft: 8, transition: 'background .3s' }}/>}
    </div>
  );
}

function OnboardingPage() {
  const { go } = useRouter();
  const [step, setStep] = useState(0);
  const [type, setType] = useState('restaurant');
  const [connected, setConnected] = useState({ whatsapp: false, instagram: false, email: false });
  const [trainProgress, setTrainProgress] = useState(0);

  useEffect(() => {
    if (step === 3) {
      setTrainProgress(0);
      const id = setInterval(() => {
        setTrainProgress(p => {
          if (p >= 100) { clearInterval(id); return 100; }
          return p + Math.random() * 8 + 2;
        });
      }, 150);
      return () => clearInterval(id);
    }
  }, [step]);

  const next = () => setStep(s => Math.min(s + 1, ONBOARD_STEPS.length - 1));
  const back = () => setStep(s => Math.max(s - 1, 0));

  return (
    <div className="page-enter" style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      {/* simplified nav */}
      <div style={{ padding: '20px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--border)' }}>
        <Logo/>
        <a href="#" onClick={e=>{e.preventDefault(); go('/dashboard');}} style={{ fontSize: 13, color: 'var(--text-2)', textDecoration: 'none' }}>Skip for now →</a>
      </div>

      <div style={{ flex: 1, display: 'flex', justifyContent: 'center', padding: '40px 32px 80px' }}>
        <div style={{ width: '100%', maxWidth: 720 }}>
          {/* steps */}
          <div className="row" style={{ gap: 8, marginBottom: 48 }}>
            {ONBOARD_STEPS.map((s, i) => (
              <StepDot key={s.id} idx={i} current={step} label={s.label} done={i < step}/>
            ))}
          </div>

          {step === 0 && <Reveal>
            <div style={{ textAlign: 'center', padding: '32px 0' }}>
              <div style={{
                width: 80, height: 80, margin: '0 auto 28px',
                borderRadius: 24,
                background: 'linear-gradient(135deg, #10B981, #059669)',
                display:'flex', alignItems:'center', justifyContent:'center',
                boxShadow: '0 16px 48px -12px rgba(16,185,129,0.5), 0 0 0 1px rgba(16,185,129,0.4)',
              }}>
                <Icons.spark size={36} stroke="white"/>
              </div>
              <h2 style={{ fontSize: 32, marginBottom: 12 }}>Welcome to ReplyFlow.</h2>
              <p className="muted" style={{ fontSize: 17, maxWidth: 480, margin: '0 auto 32px' }}>
                Let's set up your AI assistant. We'll have you live in about 4 minutes.
              </p>
              <button onClick={next} className="btn btn-primary btn-lg">Get started <Icons.arrow size={16}/></button>
            </div>
          </Reveal>}

          {step === 1 && <Reveal>
            <h2 style={{ fontSize: 28, marginBottom: 8 }}>What kind of business are you?</h2>
            <p className="muted" style={{ marginBottom: 32 }}>This tunes your AI's tone and templates.</p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, marginBottom: 32 }}>
              {[
                { id: 'restaurant', label: 'Restaurant', icon: '🍽', desc: 'Reservations, menu Qs, dietary requests' },
                { id: 'cafe', label: 'Café', icon: '☕', desc: 'Hours, daily specials, pre-orders' },
                { id: 'salon', label: 'Beauty salon', icon: '💇', desc: 'Bookings, services, pricing' },
                { id: 'barber', label: 'Barbershop', icon: '✂️', desc: 'Appointments, walk-ins, prices' },
              ].map(o => (
                <button
                  key={o.id}
                  onClick={() => setType(o.id)}
                  className="card hoverable"
                  style={{
                    appearance: 'none', textAlign: 'left',
                    padding: 20, cursor: 'default', fontFamily: 'inherit',
                    border: '1px solid ' + (type === o.id ? 'var(--accent)' : 'var(--border)'),
                    background: type === o.id ? 'rgba(16,185,129,0.04)' : 'var(--surface)',
                    boxShadow: type === o.id ? '0 0 0 1px rgba(16,185,129,0.4)' : 'none',
                    color: 'var(--text-0)',
                  }}
                >
                  <div style={{ fontSize: 28, marginBottom: 10 }}>{o.icon}</div>
                  <div style={{ fontWeight: 600, marginBottom: 4 }}>{o.label}</div>
                  <div className="muted" style={{ fontSize: 13 }}>{o.desc}</div>
                </button>
              ))}
            </div>
            <div className="row gap-3" style={{ justifyContent: 'space-between' }}>
              <button onClick={back} className="btn btn-ghost">← Back</button>
              <button onClick={next} className="btn btn-primary">Continue <Icons.arrow size={14}/></button>
            </div>
          </Reveal>}

          {step === 2 && <Reveal>
            <h2 style={{ fontSize: 28, marginBottom: 8 }}>Connect your channels.</h2>
            <p className="muted" style={{ marginBottom: 32 }}>Pick what your customers actually use. You can add more anytime.</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 32 }}>
              {[
                { id: 'whatsapp', name: 'WhatsApp Business', desc: '64% of restaurants use this' },
                { id: 'instagram', name: 'Instagram DMs', desc: 'Connect via Meta OAuth' },
                { id: 'email', name: 'Email inbox', desc: 'Forward your reservations@ to ReplyFlow' },
                { id: 'facebook', name: 'Facebook Messenger', desc: 'OAuth required' },
              ].map(c => {
                const Ic = Icons[c.id];
                const isOn = connected[c.id];
                return (
                  <div key={c.id} className="card" style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
                    <div className={'avatar ch-' + c.id} style={{ width: 40, height: 40, borderRadius: 10 }}>
                      <Ic size={18}/>
                    </div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 14, fontWeight: 500 }}>{c.name}</div>
                      <div className="muted" style={{ fontSize: 12 }}>{c.desc}</div>
                    </div>
                    <button
                      onClick={() => setConnected(s => ({...s, [c.id]: !s[c.id]}))}
                      className={isOn ? 'btn btn-ghost btn-sm' : 'btn btn-primary btn-sm'}
                    >
                      {isOn ? <><Icons.check size={12}/> Connected</> : 'Connect'}
                    </button>
                  </div>
                );
              })}
            </div>
            <div className="row gap-3" style={{ justifyContent: 'space-between' }}>
              <button onClick={back} className="btn btn-ghost">← Back</button>
              <button onClick={next} className="btn btn-primary">Continue <Icons.arrow size={14}/></button>
            </div>
          </Reveal>}

          {step === 3 && <Reveal>
            <h2 style={{ fontSize: 28, marginBottom: 8 }}>Train your AI.</h2>
            <p className="muted" style={{ marginBottom: 32 }}>Drop in your menu, hours, or just paste your website URL — we'll handle the rest.</p>
            <div className="card" style={{ padding: 24, marginBottom: 16 }}>
              <label className="label">Website URL</label>
              <input className="input" defaultValue="https://trattoriavolta.com"/>
              <div style={{ marginTop: 18 }}>
                <label className="label">Or upload documents</label>
                <div style={{
                  border: '1.5px dashed var(--border-strong)',
                  borderRadius: 12, padding: 28, textAlign: 'center',
                  background: 'rgba(255,255,255,0.02)',
                }}>
                  <Icons.upload size={22} stroke="var(--text-2)" style={{ marginBottom: 10 }}/>
                  <div style={{ fontSize: 13, color: 'var(--text-1)', marginBottom: 4 }}>Drop your menu PDF, hours, or policies here</div>
                  <div className="muted" style={{ fontSize: 12 }}>PDF, DOCX, TXT up to 25MB</div>
                </div>
              </div>
            </div>

            {/* training progress */}
            <div className="card" style={{ padding: 18 }}>
              <div className="row gap-3" style={{ marginBottom: 12 }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 8,
                  background: 'rgba(16,185,129,0.12)', border: '1px solid rgba(16,185,129,0.3)',
                  display:'flex', alignItems:'center', justifyContent:'center', color: 'var(--accent)',
                }}>
                  <Icons.brain size={16}/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>Building your AI brain</div>
                  <div className="muted" style={{ fontSize: 12 }}>
                    {trainProgress < 100 ? 'Embedding documents — ' + Math.round(trainProgress) + '%' : 'Done — your AI is ready!'}
                  </div>
                </div>
                <div style={{ fontSize: 12, color: 'var(--accent)', fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>
                  {Math.round(trainProgress)}%
                </div>
              </div>
              <div style={{ height: 4, background: 'var(--bg-2)', borderRadius: 2, overflow: 'hidden' }}>
                <div style={{
                  height: '100%',
                  width: trainProgress + '%',
                  background: 'linear-gradient(90deg, #10B981, #34D399)',
                  borderRadius: 2,
                  transition: 'width .15s linear',
                  boxShadow: '0 0 12px rgba(16,185,129,0.6)',
                }}/>
              </div>
            </div>

            <div className="row gap-3" style={{ justifyContent: 'space-between', marginTop: 32 }}>
              <button onClick={back} className="btn btn-ghost">← Back</button>
              <button onClick={next} disabled={trainProgress < 100} className="btn btn-primary"
                      style={trainProgress < 100 ? { opacity: 0.4, pointerEvents: 'none' } : {}}>
                Continue <Icons.arrow size={14}/>
              </button>
            </div>
          </Reveal>}

          {step === 4 && <Reveal>
            <div style={{ textAlign: 'center', padding: '32px 0' }}>
              <div style={{
                width: 80, height: 80, margin: '0 auto 28px',
                borderRadius: '50%',
                background: 'linear-gradient(135deg, #10B981, #059669)',
                display:'flex', alignItems:'center', justifyContent:'center',
                boxShadow: '0 16px 48px -12px rgba(16,185,129,0.6), 0 0 0 1px rgba(16,185,129,0.4)',
                animation: 'scale-in .5s var(--easing-bounce)',
              }}>
                <Icons.check size={36} stroke="white" sw={3}/>
              </div>
              <h2 style={{ fontSize: 32, marginBottom: 12 }}>You're live.</h2>
              <p className="muted" style={{ fontSize: 17, maxWidth: 480, margin: '0 auto 32px' }}>
                Your AI is now answering messages across every channel you connected. Sit back — we'll let you know if anything needs you.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 360, margin: '0 auto 32px' }}>
                {['AI is online and answering', '3 channels connected', '14 languages enabled', 'Smart handoff configured'].map(t => (
                  <div key={t} className="row gap-2" style={{ fontSize: 13, color: 'var(--text-1)', justifyContent: 'flex-start' }}>
                    <Icons.check size={14} stroke="var(--accent)"/> {t}
                  </div>
                ))}
              </div>
              <button onClick={() => go('/dashboard')} className="btn btn-primary btn-lg">Go to dashboard <Icons.arrow size={16}/></button>
            </div>
          </Reveal>}
        </div>
      </div>
    </div>
  );
}

// ─────── Features page ───────

function FeaturesPage() {
  const sections = [
    {
      eyebrow: 'AI auto-reply', title: 'An AI that sounds like you, not a robot.',
      desc: 'Trained on your menu, your hours, your tone. Replies in under a second, in 14 languages, across every channel.',
      bullets: ['Tone-matched on your real conversations', 'Knows your menu and policies cold', 'Hands off to a human when it matters'],
      visual: 'chat',
    },
    {
      eyebrow: 'Reservation copilot', title: 'Bookings that book themselves.',
      desc: 'ReplyFlow takes the message, checks availability, suggests times, confirms the booking, and adds it to your calendar — without you lifting a finger.',
      bullets: ['Live calendar sync (Google, Resy, OpenTable, Toast)', 'Auto-reminders 24h and 2h before', 'Smart waitlist when fully booked'],
      visual: 'calendar',
    },
    {
      eyebrow: 'Unified inbox', title: 'Every conversation, one place.',
      desc: 'WhatsApp, Instagram, Facebook, Telegram, email, your website — all merged into one searchable thread, with full customer history at a glance.',
      bullets: ['One thread per customer, across channels', 'AI tags conversations by topic', 'Team handoff with one click'],
      visual: 'inbox',
    },
  ];

  return (
    <div className="page-enter">
      <MarketingNav/>

      {/* hero */}
      <section style={{ padding: '64px 0 48px', textAlign: 'center' }}>
        <div className="container">
          <Reveal>
            <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 14 }}>Features</div>
            <h1 className="text-grad" style={{ marginBottom: 20, fontSize: 'clamp(36px, 5vw, 60px)' }}>
              Built for the messages <span className="text-grad-em">that build your business.</span>
            </h1>
            <p className="muted" style={{ fontSize: 19, maxWidth: 640, margin: '0 auto', lineHeight: 1.5 }}>
              ReplyFlow handles the conversations you can't always be there for — so you can focus on the customers in front of you.
            </p>
          </Reveal>
        </div>
      </section>

      {/* deep features */}
      {sections.map((s, i) => (
        <section className="section" key={i} style={{ paddingTop: 32 }}>
          <div className="container">
            <div style={{ display: 'grid', gridTemplateColumns: i % 2 === 0 ? '1fr 1.1fr' : '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
              <Reveal style={i % 2 === 0 ? {} : { gridColumn: 2 }}>
                <div style={{ order: i % 2 === 0 ? 0 : 2 }}>
                  <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 14 }}>{s.eyebrow}</div>
                  <h2 style={{ marginBottom: 16 }}>{s.title}</h2>
                  <p className="muted" style={{ fontSize: 16, lineHeight: 1.6, marginBottom: 24 }}>{s.desc}</p>
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                    {s.bullets.map(b => (
                      <li key={b} className="row gap-3" style={{ alignItems: 'flex-start', fontSize: 14, color: 'var(--text-1)' }}>
                        <div style={{
                          width: 20, height: 20, flexShrink: 0,
                          borderRadius: 6, background: 'rgba(16,185,129,0.12)',
                          display:'flex', alignItems:'center', justifyContent:'center',
                          marginTop: 1,
                        }}>
                          <Icons.check size={11} stroke="var(--accent)" sw={3}/>
                        </div>
                        <span>{b}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </Reveal>
              <Reveal delay={120} style={i % 2 === 0 ? { gridColumn: 2, gridRow: 1 } : { gridColumn: 1, gridRow: 1 }}>
                <FeatureVisual kind={s.visual}/>
              </Reveal>
            </div>
          </div>
        </section>
      ))}

      <FinalCTA/>
      <Footer/>
    </div>
  );
}

function FeatureVisual({ kind }) {
  if (kind === 'chat') {
    return (
      <div className="glass-strong" style={{ padding: 20, borderRadius: 18, position: 'relative' }}>
        {[
          {side:'left', name:'Marie', ch:'instagram', text:"Vous avez une table pour 2 ce soir?", time:'7:32 PM'},
          {side:'right', text:"Bien sûr Marie! 7:30 ou 9:00 PM, lequel préférez-vous?", time:'7:32 PM'},
          {side:'left', name:'Marie', ch:'instagram', text:"7:30 parfait merci!", time:'7:33 PM'},
          {side:'right', text:"Confirmé — 2 personnes, 19:30. À ce soir! 🍷", time:'7:33 PM', confirm: true},
        ].map((m, i) => {
          const isAI = m.side === 'right';
          return (
            <div key={i} style={{ display: 'flex', justifyContent: isAI ? 'flex-end' : 'flex-start', marginBottom: 10 }}>
              <div style={{ maxWidth: '78%' }}>
                <div style={{
                  padding: '9px 13px',
                  borderRadius: isAI ? '14px 14px 4px 14px' : '14px 14px 14px 4px',
                  background: isAI ? 'linear-gradient(180deg, rgba(16,185,129,0.18), rgba(16,185,129,0.08))' : 'rgba(255,255,255,0.06)',
                  border: '1px solid ' + (isAI ? 'rgba(16,185,129,0.3)' : 'rgba(255,255,255,0.08)'),
                  fontSize: 13, lineHeight: 1.45,
                }}>
                  {isAI && <div style={{ fontSize: 10, color: 'var(--accent)', marginBottom: 4 }}>ReplyFlow AI · French</div>}
                  {m.text}
                  {m.confirm && <div style={{ marginTop: 8, padding: 6, background: 'rgba(0,0,0,0.25)', borderRadius: 6, fontSize: 11, display:'flex', gap:6, alignItems:'center' }}><Icons.check size={11} stroke="var(--accent)"/> Reservation confirmed</div>}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }
  if (kind === 'calendar') {
    const days = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
    const dots = [[1,3],[2,1],[3,4],[4,2],[5,6],[6,8],[0,2]];
    return (
      <div className="glass-strong" style={{ padding: 24, borderRadius: 18 }}>
        <div className="row" style={{ justifyContent: 'space-between', marginBottom: 16 }}>
          <div style={{ fontSize: 14, fontWeight: 600 }}>This week</div>
          <span className="badge badge-emerald">+47 bookings</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6 }}>
          {days.map((d, i) => (
            <div key={d} style={{ textAlign: 'center' }}>
              <div className="muted" style={{ fontSize: 11, marginBottom: 6 }}>{d}</div>
              <div style={{
                aspectRatio: '0.85', borderRadius: 8,
                background: 'rgba(255,255,255,0.03)',
                border: '1px solid var(--border)',
                padding: 8, display: 'flex', flexDirection: 'column', gap: 3,
              }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{14 + i}</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 2, marginTop: 'auto' }}>
                  {Array.from({ length: dots[i][1] }).map((_, j) => (
                    <span key={j} style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--accent)', opacity: 0.7 + (j*0.04) }}/>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 20, padding: 14, background: 'rgba(16,185,129,0.06)', border: '1px solid rgba(16,185,129,0.2)', borderRadius: 10 }}>
          <div style={{ fontSize: 12, color: 'var(--accent)', fontWeight: 600, marginBottom: 4 }}>Just booked · 2s ago</div>
          <div style={{ fontSize: 13 }}>Sofia M. · Saturday 9:00 PM · Party of 4 · via WhatsApp</div>
        </div>
      </div>
    );
  }
  // inbox
  return (
    <div className="glass-strong" style={{ padding: 0, borderRadius: 18, overflow: 'hidden' }}>
      {['whatsapp','instagram','email','facebook'].map((ch, i) => {
        const Ic = Icons[ch];
        const data = [
          { name: 'Sofia M.', text: 'Booked for Saturday 9pm', tag: 'Reservation', tagColor: 'emerald', time: '2m' },
          { name: 'Marco R.', text: 'Do you have gluten-free pasta?', tag: 'Menu Q', tagColor: 'blue', time: '4m' },
          { name: 'Ana P.', text: 'Receipt for last night?', tag: 'Support', tagColor: 'amber', time: '12m' },
          { name: 'Chen L.', text: '3 of us at 7:30 tomorrow?', tag: 'Reservation', tagColor: 'emerald', time: '18m' },
        ][i];
        return (
          <div key={ch} className="row gap-3" style={{ padding: 14, borderBottom: i < 3 ? '1px solid var(--border)' : 'none' }}>
            <div className={'avatar ch-' + ch} style={{ width: 36, height: 36 }}><Ic size={16}/></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="row" style={{ justifyContent: 'space-between' }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{data.name}</div>
                <div className="dim" style={{ fontSize: 11 }}>{data.time}</div>
              </div>
              <div className="muted" style={{ fontSize: 12, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{data.text}</div>
            </div>
            <span className={'badge badge-' + data.tagColor} style={{ fontSize: 10 }}>{data.tag}</span>
          </div>
        );
      })}
    </div>
  );
}

// ─────── Pricing standalone page ───────

function PricingPage() {
  return (
    <div className="page-enter">
      <MarketingNav/>
      <section style={{ padding: '64px 0 32px', textAlign: 'center' }}>
        <div className="container">
          <Reveal>
            <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 14 }}>Pricing</div>
            <h1 className="text-grad" style={{ marginBottom: 20, fontSize: 'clamp(36px, 5vw, 60px)' }}>
              Pay for replies, not for promises.
            </h1>
            <p className="muted" style={{ fontSize: 19, maxWidth: 640, margin: '0 auto 24px', lineHeight: 1.5 }}>
              14 days free. No credit card. Cancel any time. Most owners earn back the cost in their first weekend.
            </p>
          </Reveal>
        </div>
      </section>
      <Pricing compact/>
      {/* Comparison */}
      <section className="section">
        <div className="container">
          <Reveal>
            <h2 style={{ textAlign: 'center', marginBottom: 48 }}>Compare plans</h2>
            <div className="card" style={{ overflow: 'hidden' }}>
              <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
                <thead>
                  <tr style={{ background: 'var(--bg-2)' }}>
                    <th style={{ textAlign: 'left', padding: '16px 20px', fontWeight: 500, color: 'var(--text-2)' }}>Feature</th>
                    {PLANS.map(p => (
                      <th key={p.name} style={{ padding: '16px 20px', fontWeight: 600, color: 'var(--text-0)' }}>{p.name}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {[
                    ['Locations', '1', 'Up to 3', 'Unlimited'],
                    ['AI replies / month', '500', 'Unlimited', 'Unlimited'],
                    ['Connected channels', '3', 'All', 'All + API'],
                    ['Languages', '14', '14', '14 + custom'],
                    ['Reservation copilot', '✓', '✓', '✓'],
                    ['Custom AI training', '—', '✓', '✓'],
                    ['Team handoff', '—', '✓', '✓'],
                    ['POS integrations', '—', '—', '✓'],
                    ['SSO + audit logs', '—', '—', '✓'],
                    ['Dedicated CSM', '—', '—', '✓'],
                  ].map((row, i) => (
                    <tr key={i} style={{ borderTop: '1px solid var(--border)' }}>
                      <td style={{ padding: '14px 20px', color: 'var(--text-2)' }}>{row[0]}</td>
                      {row.slice(1).map((c, j) => (
                        <td key={j} style={{ padding: '14px 20px', textAlign: 'center', color: c === '—' ? 'var(--text-3)' : 'var(--text-0)' }}>
                          {c === '✓' ? <Icons.check size={16} stroke="var(--accent)"/> : c}
                        </td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </Reveal>
        </div>
      </section>
      <Footer/>
    </div>
  );
}

window.LoginPage = LoginPage;
window.SignupPage = SignupPage;
window.OnboardingPage = OnboardingPage;
window.FeaturesPage = FeaturesPage;
window.PricingPage = PricingPage;