// landing.jsx — premium hero + feature sections + pricing
const { useState, useEffect, useRef } = React;

// ─────── Hero with animated chat & metric cards ───────

const INDUSTRIES = {
  restaurant: {
    label: 'Restaurants',
    headline: 'Never miss a reservation again.',
    sub: 'ReplyFlow AI answers every customer message across WhatsApp, Instagram, and email — books tables, confirms reservations, and sounds like your best host.',
    chats: [
      { side: 'left', ch: 'whatsapp', name: 'Sofia M.', text: "Hi! Table for 4 tonight at 8?", time: '8:42 PM' },
      { side: 'right', ai: true, text: "Hi Sofia! 8:00 PM is fully booked, but I can offer 7:30 or 9:00 — both with our window seats. Which works?", time: '8:42 PM' },
      { side: 'left', ch: 'whatsapp', name: 'Sofia M.', text: "9:00 is perfect 🍷", time: '8:43 PM' },
      { side: 'right', ai: true, text: "Confirmed — Saturday, table for 4 at 9:00 PM. We've saved you a window seat. Buona cena!", time: '8:43 PM', confirm: true },
    ],
    metric: { num: '+247', label: 'Reservations booked today' },
  },
  cafe: {
    label: 'Cafés',
    headline: 'Every customer, answered instantly.',
    sub: 'Take pre-orders, share daily specials, and answer hours questions automatically — so your team can focus on the bar, not the phone.',
    chats: [
      { side: 'left', ch: 'instagram', name: 'Marco', text: "Are you open until 10 today?", time: '4:12 PM' },
      { side: 'right', ai: true, text: "Yes! We're open until 10pm tonight. Today's special: pistachio cortado, on the house with any pastry ✨", time: '4:12 PM' },
      { side: 'left', ch: 'instagram', name: 'Marco', text: "Do you have oat milk?", time: '4:13 PM' },
      { side: 'right', ai: true, text: "We do — oat, almond, soy, and our house barista blend. See you soon!", time: '4:13 PM' },
    ],
    metric: { num: '12,840', label: 'Messages handled this month' },
  },
  salon: {
    label: 'Salons',
    headline: 'Book more, chase less.',
    sub: 'Convert every Instagram DM into a booking. ReplyFlow AI handles availability, pricing questions, and reschedules — across every channel, in every language.',
    chats: [
      { side: 'left', ch: 'instagram', name: 'Aria K.', text: "Do you do balayage? How much?", time: '11:04 AM' },
      { side: 'right', ai: true, text: "Yes! Balayage starts at €120 with our senior stylist Lena. We have Friday at 2pm or Saturday at 11am open this week.", time: '11:04 AM' },
      { side: 'left', ch: 'instagram', name: 'Aria K.', text: "Saturday at 11 please", time: '11:05 AM' },
      { side: 'right', ai: true, text: "Booked with Lena, Saturday 11:00 AM. We'll send a reminder the night before. Can't wait to see you!", time: '11:05 AM', confirm: true },
    ],
    metric: { num: '98%', label: 'AI automation rate' },
  },
  barber: {
    label: 'Barbers',
    headline: 'Your chair, always full.',
    sub: 'No more missed DMs at 11pm. ReplyFlow AI books cuts, answers prices, and reminds clients — quietly running your shop while you cut.',
    chats: [
      { side: 'left', ch: 'whatsapp', name: 'James R.', text: "Got anything this Saturday?", time: '10:18 PM' },
      { side: 'right', ai: true, text: "Saturday's busy, but I have 11:30 AM with Diego or 4:00 PM with Tom. Both €25 for fade + beard.", time: '10:18 PM' },
      { side: 'left', ch: 'whatsapp', name: 'James R.', text: "11:30 with Diego works", time: '10:19 PM' },
      { side: 'right', ai: true, text: "Locked in — Saturday 11:30, Diego, fade + beard. Reply STOP if anything comes up.", time: '10:19 PM', confirm: true },
    ],
    metric: { num: '4.2×', label: 'More bookings vs. last quarter' },
  },
};

function ChatBubble({ msg, delay = 0, typing = false }) {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setVisible(true), delay);
    return () => clearTimeout(t);
  }, [delay]);

  if (!visible) return null;

  const isAI = msg.side === 'right';
  const ChIcon = msg.ch ? Icons[msg.ch] : null;

  return (
    <div style={{
      display: 'flex',
      justifyContent: isAI ? 'flex-end' : 'flex-start',
      gap: 8,
      animation: 'msg-in .42s cubic-bezier(0.22,1,0.36,1) both',
    }}>
      {!isAI && (
        <div className={'avatar ch-' + msg.ch} style={{ width: 28, height: 28, fontSize: 11 }}>
          {msg.name?.[0]}
        </div>
      )}
      <div style={{ maxWidth: '78%' }}>
        {!isAI && msg.name && (
          <div style={{ fontSize: 10.5, color: 'var(--text-3)', marginBottom: 3, marginLeft: 2, display:'flex', alignItems:'center', gap: 5 }}>
            {msg.name} {ChIcon && <ChIcon size={10}/>}
          </div>
        )}
        <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: isAI ? '1px solid rgba(16,185,129,0.3)' : '1px solid rgba(255,255,255,0.08)',
          color: 'var(--text-0)',
          fontSize: 13,
          lineHeight: 1.45,
          boxShadow: isAI ? '0 4px 24px -8px rgba(16,185,129,0.4)' : 'none',
        }}>
          {isAI && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 10, color: 'var(--accent)', marginBottom: 4, fontWeight: 500 }}>
              <Icons.spark size={10} stroke="var(--accent)"/> ReplyFlow AI
            </div>
          )}
          {msg.text}
          {msg.confirm && (
            <div style={{ marginTop: 8, padding: 8, background: 'rgba(0,0,0,0.25)', borderRadius: 8, display:'flex', alignItems:'center', gap:8, fontSize: 11.5 }}>
              <Icons.check size={13} stroke="var(--accent)"/>
              <span style={{ color: 'var(--text-1)' }}>Reservation confirmed</span>
            </div>
          )}
        </div>
        <div style={{ fontSize: 10, color: 'var(--text-3)', marginTop: 4, textAlign: isAI ? 'right' : 'left' }}>{msg.time}</div>
      </div>
    </div>
  );
}

function TypingDots() {
  return (
    <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 4 }}>
      <div style={{
        padding: '10px 14px',
        background: 'rgba(16,185,129,0.12)',
        border: '1px solid rgba(16,185,129,0.25)',
        borderRadius: '14px 14px 4px 14px',
        display: 'inline-flex', gap: 4,
      }}>
        {[0,1,2].map(i => (
          <span key={i} style={{
            width: 5, height: 5, borderRadius: '50%', background: 'var(--accent)',
            animation: `bounce-dot 1.2s ${i*0.15}s ease-in-out infinite`,
          }}/>
        ))}
      </div>
    </div>
  );
}

function HeroChat({ industry }) {
  const data = INDUSTRIES[industry];
  const [tick, setTick] = useState(0);

  useEffect(() => {
    setTick(0);
    const total = data.chats.length * 2 + 2;
    const id = setInterval(() => {
      setTick(t => (t + 1) % total);
    }, 2200);
    return () => clearInterval(id);
  }, [industry]);

  return (
    <div className="glass-strong" style={{
      width: '100%',
      maxWidth: 460,
      borderRadius: 18,
      padding: 18,
      boxShadow: '0 40px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04)',
      position: 'relative',
    }}>
      {/* header */}
      <div style={{ display:'flex', alignItems:'center', gap:10, paddingBottom: 14, borderBottom: '1px solid var(--border)', marginBottom: 14 }}>
        <div className={'avatar ch-' + data.chats[0].ch} style={{ width: 36, height: 36, fontSize: 13 }}>
          {data.chats[0].name?.[0]}
        </div>
        <div style={{ flex:1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600, display:'flex', alignItems:'center', gap: 6 }}>
            {data.chats[0].name}
            <span style={{ fontSize: 10, color: 'var(--text-3)', fontWeight: 400 }}>· via {data.chats[0].ch}</span>
          </div>
          <div style={{ fontSize: 11, color: 'var(--accent)', display:'flex', alignItems:'center', gap: 4 }}>
            <span style={{ width:6, height:6, borderRadius:'50%', background:'var(--accent)', boxShadow:'0 0 6px var(--accent)' }}/>
            AI active
          </div>
        </div>
        <div style={{ fontSize: 10.5, color: 'var(--text-3)', textAlign: 'right' }}>
          <div className="mono">{Math.floor(0.6 * 1000)}ms</div>
          <div>response</div>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minHeight: 280 }}>
        {data.chats.slice(0, Math.min(tick, data.chats.length)).map((m, i) => (
          <ChatBubble key={industry + i} msg={m} delay={0}/>
        ))}
        {tick > 0 && tick < data.chats.length && data.chats[tick]?.side === 'right' && <TypingDots/>}
      </div>
    </div>
  );
}

// ─────── Floating metric cards ───────

function MetricCard({ icon: Ic, num, label, delta, color = 'emerald', style }) {
  return (
    <div className="glass-strong" style={{
      padding: '12px 16px',
      borderRadius: 14,
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      minWidth: 200,
      ...style,
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 10,
        background: color === 'emerald' ? 'rgba(16,185,129,0.12)' : 'rgba(59,130,246,0.12)',
        border: '1px solid ' + (color === 'emerald' ? 'rgba(16,185,129,0.3)' : 'rgba(59,130,246,0.3)'),
        display:'flex', alignItems:'center', justifyContent:'center',
        color: color === 'emerald' ? 'var(--accent)' : 'var(--info)',
      }}>
        <Ic size={18}/>
      </div>
      <div>
        <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums' }}>{num}</div>
        <div style={{ fontSize: 11, color: 'var(--text-2)' }}>{label}</div>
      </div>
      {delta && <div style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 600, marginLeft: 'auto' }}>{delta}</div>}
    </div>
  );
}

// ─────── Hero section ───────

function Hero() {
  const [industry, setIndustry] = useState('restaurant');
  const data = INDUSTRIES[industry];

  return (
    <section style={{ padding: '40px 0 80px', position: 'relative' }}>
      <div className="container">
        {/* tag */}
        <Reveal>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 28 }}>
            <span className="tag">
              <span className="tag-dot"/>
              <span style={{ color: 'var(--text-1)' }}>New</span>
              <span style={{ color: 'var(--text-3)' }}>·</span>
              ReplyFlow AI 2.0 — now with reservation copilot
              <Icons.arrow size={11}/>
            </span>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
          {/* left */}
          <div>
            <Reveal delay={50}>
              <h1 className="text-grad" style={{ marginBottom: 24 }}>
                {data.headline.split(' ').slice(0, -2).join(' ')}{' '}
                <span className="text-grad-em">{data.headline.split(' ').slice(-2).join(' ')}</span>
              </h1>
            </Reveal>
            <Reveal delay={120}>
              <p className="muted" style={{ fontSize: 19, lineHeight: 1.55, maxWidth: 540, marginBottom: 32, color: 'var(--text-2)' }}>
                {data.sub}
              </p>
            </Reveal>

            {/* Industry switcher */}
            <Reveal delay={180}>
              <div style={{ display: 'flex', gap: 6, marginBottom: 28, padding: 4, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 12, width: 'fit-content' }}>
                {Object.entries(INDUSTRIES).map(([k, v]) => (
                  <button
                    key={k}
                    onClick={() => setIndustry(k)}
                    style={{
                      appearance: 'none', border: 'none',
                      padding: '8px 14px', borderRadius: 8,
                      background: industry === k ? 'rgba(16,185,129,0.12)' : 'transparent',
                      color: industry === k ? 'var(--accent)' : 'var(--text-2)',
                      fontSize: 13, fontWeight: 500,
                      cursor: 'default',
                      transition: 'all .2s var(--easing)',
                      fontFamily: 'inherit',
                    }}
                  >{v.label}</button>
                ))}
              </div>
            </Reveal>

            <Reveal delay={240}>
              <div className="row gap-3">
                <Link to="/signup" className="btn btn-primary btn-lg">
                  Start free trial <Icons.arrow size={16}/>
                </Link>
                <a href="#" onClick={e=>e.preventDefault()} className="btn btn-ghost btn-lg">
                  <span style={{
                    width: 18, height: 18, borderRadius: '50%',
                    background: 'rgba(255,255,255,0.08)', display: 'inline-flex',
                    alignItems: 'center', justifyContent: 'center',
                  }}>
                    <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor"><path d="M0 0l8 4-8 4z"/></svg>
                  </span>
                  Watch 60-sec demo
                </a>
              </div>
            </Reveal>

            <Reveal delay={320}>
              <div className="row gap-6" style={{ marginTop: 36, fontSize: 12, color: 'var(--text-3)' }}>
                <span className="row gap-2"><Icons.check size={13} stroke="var(--accent)"/>14-day free trial</span>
                <span className="row gap-2"><Icons.check size={13} stroke="var(--accent)"/>No credit card</span>
                <span className="row gap-2"><Icons.check size={13} stroke="var(--accent)"/>Setup in 4 minutes</span>
              </div>
            </Reveal>
          </div>

          {/* right — chat mockup */}
          <div style={{ position: 'relative', minHeight: 560 }}>
            <Reveal delay={150}>
              <div style={{ position: 'relative' }}>
                <HeroChat industry={industry}/>

                {/* floating metric cards */}
                <div style={{ position: 'absolute', top: -28, right: -40, animation: 'float-card 6s ease-in-out infinite' }}>
                  <MetricCard icon={Icons.calendar} num={data.metric.num} label={data.metric.label} delta="+12%"/>
                </div>
                <div style={{ position: 'absolute', bottom: 32, left: -56, animation: 'float-card 6s 1.5s ease-in-out infinite' }}>
                  <MetricCard icon={Icons.zap} num="98%" label="Auto-resolved" color="blue" delta="+4%"/>
                </div>
                <div style={{ position: 'absolute', top: '40%', right: -64, animation: 'float-card 6s 3s ease-in-out infinite' }}>
                  <MetricCard icon={Icons.globe} num="14" label="Languages live"/>
                </div>
              </div>
            </Reveal>
          </div>
        </div>

        {/* logos strip */}
        <Reveal delay={400}>
          <div style={{ marginTop: 96, textAlign: 'center' }}>
            <div className="eyebrow" style={{ marginBottom: 24 }}>Trusted by 4,200+ hospitality businesses across 38 countries</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap', alignItems: 'center', opacity: 0.55, maxWidth: 920, margin: '0 auto' }}>
              {['Maison&Co.', 'Tartine', 'CASA', 'Lumen Café', 'Bar Volta', 'Atelier Hair', 'Fade Lab'].map(n => (
                <span key={n} style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--text-2)' }}>{n}</span>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─────── Features grid ───────

const FEATURES = [
  { icon: 'spark', color: 'emerald', title: 'AI auto-reply', desc: 'Trained on your menu, hours, and tone. Replies in under a second, in any language.' },
  { icon: 'calendar', color: 'blue', title: 'Reservation copilot', desc: 'Books, modifies, and reminds — synced with your calendar and POS in real time.' },
  { icon: 'inbox', color: 'emerald', title: 'Unified inbox', desc: 'Every channel in one thread. Hand off to a human in one click — context follows.' },
  { icon: 'chart', color: 'blue', title: 'Analytics that matter', desc: 'See what guests actually ask. Catch trends before they cost you a star on Google.' },
  { icon: 'globe', color: 'emerald', title: '14 languages, fluent', desc: 'Reply in the customer\'s language automatically. Idioms included, awkwardness excluded.' },
  { icon: 'plug', color: 'blue', title: 'Multi-channel native', desc: 'WhatsApp, Instagram, Facebook, Telegram, Viber, email, and your website. One brain.' },
];

function Features() {
  return (
    <section className="section" id="features">
      <div className="container">
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 64px' }}>
            <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 14 }}>The Platform</div>
            <h2 className="text-grad" style={{ marginBottom: 18 }}>One inbox. Every channel. Zero missed messages.</h2>
            <p className="muted" style={{ fontSize: 17, lineHeight: 1.55 }}>
              ReplyFlow learns your business in minutes, then handles the conversations you don't have time for — so you can focus on the ones that matter.
            </p>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {FEATURES.map((f, i) => {
            const Ic = Icons[f.icon];
            return (
              <Reveal key={f.title} delay={i * 60}>
                <div className="card hoverable" style={{ padding: 28, height: '100%' }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: 10,
                    background: f.color === 'emerald' ? 'rgba(16,185,129,0.1)' : 'rgba(59,130,246,0.1)',
                    border: '1px solid ' + (f.color === 'emerald' ? 'rgba(16,185,129,0.25)' : 'rgba(59,130,246,0.25)'),
                    display:'flex', alignItems:'center', justifyContent:'center',
                    color: f.color === 'emerald' ? 'var(--accent)' : 'var(--info)',
                    marginBottom: 18,
                  }}>
                    <Ic size={18}/>
                  </div>
                  <h4 style={{ marginBottom: 8 }}>{f.title}</h4>
                  <p className="muted" style={{ fontSize: 14, lineHeight: 1.55, margin: 0 }}>{f.desc}</p>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─────── Channels strip ───────

function Channels() {
  const chs = [
    { id: 'whatsapp', name: 'WhatsApp', vol: '38%' },
    { id: 'instagram', name: 'Instagram', vol: '24%' },
    { id: 'facebook', name: 'Facebook', vol: '11%' },
    { id: 'telegram', name: 'Telegram', vol: '6%' },
    { id: 'viber', name: 'Viber', vol: '4%' },
    { id: 'email', name: 'Email', vol: '12%' },
    { id: 'website', name: 'Website', vol: '5%' },
  ];

  return (
    <section className="section" style={{ paddingTop: 32 }}>
      <div className="container">
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 700, margin: '0 auto 56px' }}>
            <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 14 }}>Connected channels</div>
            <h2 style={{ marginBottom: 16 }}>Wherever your customers are, you'll be there too.</h2>
            <p className="muted" style={{ fontSize: 17 }}>Connect every channel in under 60 seconds. ReplyFlow keeps context across all of them.</p>
          </div>
        </Reveal>

        <Reveal delay={100}>
          <div className="card" style={{ padding: 40, position: 'relative', overflow: 'hidden' }}>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'radial-gradient(ellipse 60% 80% at 50% 50%, rgba(16,185,129,0.08), transparent)',
              pointerEvents: 'none',
            }}/>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24, position: 'relative' }}>
              {chs.map((c) => {
                const Ic = Icons[c.id];
                return (
                  <div key={c.id} className="col gap-2" style={{ alignItems: 'center', minWidth: 96 }}>
                    <div className={'avatar ch-' + c.id} style={{
                      width: 56, height: 56, borderRadius: 14, fontSize: 22,
                      boxShadow: '0 8px 24px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06) inset',
                    }}>
                      <Ic size={26}/>
                    </div>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{c.name}</div>
                    <div style={{ fontSize: 11, color: 'var(--text-3)' }}>{c.vol} of volume</div>
                  </div>
                );
              })}
            </div>
            {/* connecting line */}
            <div style={{
              position: 'absolute', top: '50%', left: 24, right: 24, height: 1,
              background: 'linear-gradient(90deg, transparent, rgba(16,185,129,0.4) 20%, rgba(59,130,246,0.4) 80%, transparent)',
              transform: 'translateY(-50%)', zIndex: 0,
            }}/>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─────── How it works ───────

function HowItWorks() {
  const steps = [
    { n: '01', title: 'Connect your channels', desc: 'Plug in WhatsApp, Instagram, email — whatever you use. OAuth and QR, no engineers needed.' },
    { n: '02', title: 'Train your AI in minutes', desc: 'Upload your menu, hours, and policies. Or just paste a link to your website. ReplyFlow learns your tone.' },
    { n: '03', title: 'Watch it answer perfectly', desc: 'AI handles 95%+ of messages. You get notified only when something needs you.' },
  ];

  return (
    <section className="section">
      <div className="container">
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 64 }}>
            <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 14 }}>Live in 4 minutes</div>
            <h2>From first message to first booking — fast.</h2>
          </div>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, position: 'relative' }}>
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 100}>
              <div className="card" style={{ padding: 28, height: '100%' }}>
                <div className="mono" style={{ fontSize: 12, color: 'var(--accent)', marginBottom: 32, letterSpacing: '0.1em' }}>{s.n} —</div>
                <h4 style={{ marginBottom: 8 }}>{s.title}</h4>
                <p className="muted" style={{ fontSize: 14, lineHeight: 1.55, margin: 0 }}>{s.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────── Stats / social proof ───────

function StatsBand() {
  const stats = [
    { num: '12.4M', label: 'Messages handled' },
    { num: '4,200+', label: 'Businesses live' },
    { num: '< 800ms', label: 'Avg AI response' },
    { num: '98.6%', label: 'Resolution rate' },
  ];
  return (
    <section style={{ padding: '64px 0', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
          {stats.map((s, i) => (
            <Reveal key={s.label} delay={i*60}>
              <div style={{ textAlign: 'center' }}>
                <div className="text-grad-em" style={{ fontSize: 44, fontWeight: 600, letterSpacing: '-0.04em', lineHeight: 1, marginBottom: 8, fontVariantNumeric: 'tabular-nums' }}>{s.num}</div>
                <div className="muted" style={{ fontSize: 13 }}>{s.label}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────── Testimonial ───────

function Testimonial() {
  return (
    <section className="section">
      <div className="container">
        <Reveal>
          <div className="card" style={{
            padding: '56px 56px',
            maxWidth: 920, margin: '0 auto',
            position: 'relative',
            background: 'linear-gradient(180deg, rgba(16,185,129,0.04), transparent)',
            borderColor: 'rgba(16,185,129,0.15)',
          }}>
            <div style={{ fontSize: 64, lineHeight: 1, color: 'var(--accent)', opacity: 0.4, marginBottom: 8, fontFamily: 'serif' }}>"</div>
            <p style={{ fontSize: 24, lineHeight: 1.45, fontWeight: 400, letterSpacing: '-0.02em', color: 'var(--text-0)', margin: 0, marginBottom: 32, marginTop: -32 }}>
              We were losing 30+ reservations a week to missed DMs. ReplyFlow caught all of them in week one. It pays for itself before lunch on Tuesday.
            </p>
            <div className="row gap-3">
              <div className="avatar" style={{ width: 44, height: 44, fontSize: 16, background: 'linear-gradient(135deg, #ec4899, #8b5cf6)' }}>EM</div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 15 }}>Elena Marchetti</div>
                <div className="muted" style={{ fontSize: 13 }}>Owner, Trattoria Volta · Milan</div>
              </div>
              <div style={{ marginLeft: 'auto', display: 'flex', gap: 4 }}>
                {[0,1,2,3,4].map(i => <Icons.star key={i} size={14} stroke="var(--accent)" fill="var(--accent)"/>)}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─────── Pricing ───────

const PLANS = [
  {
    name: 'Starter', price: 29, blurb: 'For small businesses getting started.',
    features: ['1 location', '500 AI replies / month', '3 channels', 'Reservation calendar', 'Email + chat support'],
    cta: 'Start free trial',
  },
  {
    name: 'Pro', price: 79, blurb: 'For growing teams that want more.', popular: true,
    features: ['Up to 3 locations', 'Unlimited AI replies', 'All channels', 'Reservation copilot', 'Custom AI training', 'Priority support', 'Team handoff'],
    cta: 'Start free trial',
  },
  {
    name: 'Business', price: 199, blurb: 'For chains and high-volume.',
    features: ['Unlimited locations', 'Unlimited AI replies', 'All channels + API', 'Custom AI persona', 'POS integrations', 'Dedicated success manager', 'SSO + audit logs'],
    cta: 'Talk to sales',
  },
];

function Pricing({ compact = false }) {
  return (
    <section className="section" id="pricing">
      <div className="container">
        {!compact && <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 64 }}>
            <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 14 }}>Pricing</div>
            <h2 style={{ marginBottom: 16 }}>Simple, fair pricing.</h2>
            <p className="muted" style={{ fontSize: 17 }}>Start free for 14 days. Cancel anytime, no questions asked.</p>
          </div>
        </Reveal>}

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, maxWidth: 1080, margin: '0 auto' }}>
          {PLANS.map((p, i) => (
            <Reveal key={p.name} delay={i*80}>
              <div className="card" style={{
                padding: 32,
                position: 'relative',
                height: '100%',
                display: 'flex', flexDirection: 'column',
                ...(p.popular ? {
                  borderColor: 'rgba(16,185,129,0.4)',
                  boxShadow: '0 0 0 1px rgba(16,185,129,0.2), 0 24px 64px -20px rgba(16,185,129,0.25)',
                  background: 'linear-gradient(180deg, rgba(16,185,129,0.04), var(--surface))',
                } : {})
              }}>
                {p.popular && (
                  <span className="badge badge-emerald" style={{ position:'absolute', top: -10, left: 32, fontSize: 11 }}>
                    <Icons.spark size={11}/> Most popular
                  </span>
                )}
                <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-1)', marginBottom: 4 }}>{p.name}</div>
                <p className="muted" style={{ fontSize: 13, margin: 0, marginBottom: 20, minHeight: 36, lineHeight: 1.45 }}>{p.blurb}</p>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 24 }}>
                  <span style={{ fontSize: 44, fontWeight: 600, letterSpacing: '-0.04em', lineHeight: 1 }}>€{p.price}</span>
                  <span className="muted" style={{ fontSize: 13 }}>/month</span>
                </div>
                <Link to="/signup" className={p.popular ? 'btn btn-primary' : 'btn btn-ghost'} style={{ marginBottom: 24 }}>{p.cta}</Link>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {p.features.map(f => (
                    <li key={f} style={{ display:'flex', alignItems:'flex-start', gap:10, fontSize:13.5, color:'var(--text-1)' }}>
                      <Icons.check size={14} stroke="var(--accent)" style={{ marginTop: 2, flexShrink: 0 }}/>
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────── Final CTA ───────

function FinalCTA() {
  return (
    <section className="section">
      <div className="container">
        <Reveal>
          <div style={{
            position: 'relative',
            padding: '80px 56px',
            borderRadius: 24,
            overflow: 'hidden',
            border: '1px solid var(--border)',
            textAlign: 'center',
            background: 'linear-gradient(180deg, var(--surface), var(--bg-1))',
          }}>
            {/* glow */}
            <div style={{
              position: 'absolute', top: -120, left: '50%', transform: 'translateX(-50%)',
              width: 600, height: 240, borderRadius: '50%',
              background: 'radial-gradient(ellipse, rgba(16,185,129,0.25), transparent 70%)',
              filter: 'blur(60px)',
            }}/>
            <div style={{ position: 'relative' }}>
              <h2 className="text-grad" style={{ marginBottom: 16 }}>Stop missing messages tonight.</h2>
              <p className="muted" style={{ fontSize: 18, maxWidth: 540, margin: '0 auto 32px', lineHeight: 1.5 }}>
                Join 4,200+ restaurants, cafés, and salons that never let a customer wait again.
              </p>
              <div className="row gap-3" style={{ justifyContent: 'center' }}>
                <Link to="/signup" className="btn btn-primary btn-lg">Start your free trial <Icons.arrow size={16}/></Link>
                <a href="#" onClick={e=>e.preventDefault()} className="btn btn-ghost btn-lg">Book a 15-min demo</a>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function LandingPage() {
  return (
    <div className="page-enter">
      <MarketingNav/>
      <Hero/>
      <StatsBand/>
      <Features/>
      <Channels/>
      <HowItWorks/>
      <Testimonial/>
      <Pricing/>
      <FinalCTA/>
      <Footer/>
    </div>
  );
}

window.LandingPage = LandingPage;
window.Pricing = Pricing;
window.PLANS = PLANS;