/* global React, Icon, BookinkLogo, PhoneFrame, TattooPlaceholder, LeadCard, BottomNav, OpportunitiesScreen, OpportunityDetail, InboxScreen, ReportsScreen */

const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

// Helper: wrap the first case-insensitive occurrence of `phrase` in `text` with .hl span.
// Used for tweakable headlines so the gradient survives user edits if the phrase is kept.
function highlightPhrase(text, phrase) {
  if (!text || !phrase) return text;
  const lower = text.toLowerCase();
  const i = lower.indexOf(phrase.toLowerCase());
  if (i < 0) return text;
  return (
    <>
      {text.slice(0, i)}
      <span className="hl">{text.slice(i, i + phrase.length)}</span>
      {text.slice(i + phrase.length)}
    </>
  );
}

// =====================================================================
// NAV
// =====================================================================
const Nav = ({ accent, isLight }) => {
  const [scrolled, setScrolled] = useStateS(false);
  useEffectS(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container">
        <div className="nav-inner">
          <BookinkLogo color={isLight ? '#0a0a0a' : '#ffffff'} height={22} />
          <div className="nav-links">
            <a className="nav-link" href="#how">How it works</a>
            <a className="nav-link" href="#opportunities">Opportunities</a>
            <a className="nav-link" href="#reports">Reports</a>
            <a className="nav-link" href="#pricing">Pricing</a>
            <a className="nav-link" href="#faq">FAQ</a>
          </div>
          <div className="nav-actions">
            <a className="nav-link" href="#" style={{ fontSize: 14 }}>Sign in</a>
            <a className="btn btn-sm btn-ghost-dark" href="#cta">
              Request a demo
            </a>
            <a className="btn btn-sm" style={{ background: isLight ? '#0a0a0a' : '#fff', color: isLight ? '#fff' : '#0a0a0a' }} href="#cta">
              Start free trial
              <Icon name="arrowRight" size={14} />
            </a>
          </div>
        </div>
      </div>
    </nav>
  );
};

// =====================================================================
// HERO
// =====================================================================
const Hero = ({ headline, accent }) => (
  <section className="surface-dark" style={{ paddingTop: 140, paddingBottom: 60, position: 'relative', overflow: 'hidden' }}>
    {/* Backdrop */}
    <div className="dot-grid" />
    <div className="glow-orb" style={{
      top: '-15%', left: '-10%', width: 700, height: 700,
      background: `radial-gradient(circle, ${accent}55 0%, transparent 70%)`,
    }} />
    <div className="glow-orb" style={{
      top: '10%', right: '-15%', width: 600, height: 600,
      background: `radial-gradient(circle, #4338ca55 0%, transparent 70%)`,
      opacity: 0.35,
    }} />

    <div className="container relative" style={{ position: 'relative', zIndex: 2 }}>
      {/* Eyebrow */}
      <div className="fade-in visible" style={{ display: 'flex', justifyContent: 'center', marginBottom: 28 }}>
        <div className="pill">
          <span className="pill-dot" />
          The #1 booking software for tattoo artists & studios
        </div>
      </div>

      {/* Headline */}
      <h1 className="h-display fade-in visible delay-1" style={{ textAlign: 'center', maxWidth: 1000, margin: '0 auto 28px' }}>
        {highlightPhrase(headline, 'AI receptionist')}
      </h1>

      {/* Subhead */}
      <p className="body-lg fade-in visible delay-2" style={{ textAlign: 'center', maxWidth: 660, margin: '0 auto 40px' }}>
        Drop your Bookink link in your Instagram bio, website, anywhere. Clients click, chat with your AI booking assistant, and the full brief lands in your WhatsApp — ready for your quote.
      </p>

      {/* CTAs */}
      <div className="fade-in visible delay-3" style={{ display: 'flex', justifyContent: 'center', gap: 12, marginBottom: 32, flexWrap: 'wrap' }}>
        <a href="#cta" className="btn btn-lg btn-primary">
          Start free trial
          <Icon name="arrowRight" size={16} />
        </a>
        <a href="#how" className="btn btn-lg btn-ghost-dark">
          <Icon name="play" size={14} />
          See how it works
        </a>
      </div>

      {/* Trust line */}
      <div className="fade-in visible delay-4" style={{ display: 'flex', justifyContent: 'center', gap: 8, alignItems: 'center', fontSize: 13, color: 'var(--dark-fg-3)' }}>
        <Icon name="check" size={14} color="#34C759" />
        30-day free trial · No credit card required
      </div>

      {/* Product preview — 3 phones on a stage */}
      <div className="fade-in visible delay-5" style={{
        marginTop: 80,
        display: 'flex',
        justifyContent: 'center',
        gap: 24,
        position: 'relative',
        paddingBottom: 40,
      }}>
        <HeroPhoneStage accent={accent} />
      </div>
    </div>
  </section>
);

const HeroPhoneStage = ({ accent }) => (
  <div style={{
    position: 'relative',
    width: '100%',
    maxWidth: 1100,
    height: 600,
    margin: '0 auto',
  }}>
    {/* Spotlight under phones */}
    <div style={{
      position: 'absolute',
      bottom: -40,
      left: '50%',
      transform: 'translateX(-50%)',
      width: '80%',
      height: 200,
      background: `radial-gradient(ellipse at center, ${accent}30 0%, transparent 70%)`,
      filter: 'blur(40px)',
      pointerEvents: 'none',
    }} />

    {/* Left phone — Inbox / AI chat */}
    <div style={{
      position: 'absolute',
      left: '8%',
      top: 40,
      transform: 'rotate(-6deg) scale(0.78)',
      transformOrigin: 'center',
      opacity: 0.92,
      filter: 'blur(0.3px)',
    }}>
      <PhoneFrame>
        <InboxScreen accent={accent} />
      </PhoneFrame>
    </div>

    {/* Right phone — Reports */}
    <div style={{
      position: 'absolute',
      right: '8%',
      top: 40,
      transform: 'rotate(6deg) scale(0.78)',
      transformOrigin: 'center',
      opacity: 0.92,
      filter: 'blur(0.3px)',
    }}>
      <PhoneFrame>
        <ReportsScreen accent={accent} />
      </PhoneFrame>
    </div>

    {/* Center phone — Opportunities */}
    <div style={{
      position: 'absolute',
      left: '50%',
      top: 0,
      transform: 'translateX(-50%)',
      zIndex: 5,
    }}>
      <PhoneFrame glow accent={accent}>
        <OpportunitiesScreen accent={accent} />
      </PhoneFrame>
    </div>
  </div>
);

// =====================================================================
// LOGO BAR (trusted by)
// =====================================================================
const LogoBar = () => {
  const studios = [
    'Black Anchor', 'Inkwell Studio', 'Sacred Hand', 'Bold & Black',
    'Atelier Noir', 'Wildflower Ink', 'Vermilion Co.',
  ];
  return (
    <section className="surface-dark" style={{ padding: '60px 0 80px', borderTop: '1px solid rgba(255,255,255,0.06)', position: 'relative' }}>
      <div className="container">
        <div style={{ textAlign: 'center', fontSize: 12, fontWeight: 600, letterSpacing: 2, textTransform: 'uppercase', color: 'var(--dark-fg-4)', marginBottom: 32 }}>
          Trusted by studios across 3 continents
        </div>
        <div style={{
          display: 'flex',
          flexWrap: 'wrap',
          gap: 48,
          justifyContent: 'center',
          alignItems: 'center',
          opacity: 0.7,
        }}>
          {studios.map((s, i) => (
            <div key={i} style={{
              fontFamily: 'serif',
              fontSize: 22,
              fontWeight: 500,
              letterSpacing: '-0.01em',
              color: 'var(--dark-fg-2)',
              fontStyle: i % 3 === 0 ? 'italic' : 'normal',
            }}>{s}</div>
          ))}
        </div>
      </div>
    </section>
  );
};

// =====================================================================
// VALUE STATS (dark, full-bleed cinematic)
// =====================================================================
const ValueStats = ({ accent }) => (
  <section className="surface-dark section" style={{ position: 'relative', overflow: 'hidden' }}>
    <div className="glow-orb" style={{
      bottom: '-30%', left: '50%', transform: 'translateX(-50%)',
      width: 1000, height: 600,
      background: `radial-gradient(ellipse, ${accent}30 0%, transparent 60%)`,
      opacity: 0.4,
    }} />
    <div className="container relative" style={{ position: 'relative', zIndex: 2 }}>
      <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 80px' }}>
        <div className="eyebrow" style={{ marginBottom: 20 }}>Why Bookink</div>
        <h2 className="h-xl">
          <span className="hl">More bookings.</span><br/>
          Less time chatting on your phone.
        </h2>
      </div>

      <div className="grid-3" style={{ gap: 32 }}>
        {[
          { num: '70%', label: 'Less time spent on DMs', sub: 'AI handles the back-and-forth so you can focus on the art.' },
          { num: '3×', label: 'Faster lead-to-booking', sub: 'Every inquiry becomes a structured brief — ready in seconds.' },
          { num: '40%', label: 'More booked appointments', sub: 'Stop losing leads to slow responses or messy threads.' },
        ].map((s, i) => (
          <div key={i} style={{
            padding: 32,
            background: 'var(--dark-card)',
            border: '1px solid var(--dark-border)',
            borderRadius: 20,
            transition: 'background 250ms',
          }}
          onMouseEnter={e => e.currentTarget.style.background = 'var(--dark-card-hover)'}
          onMouseLeave={e => e.currentTarget.style.background = 'var(--dark-card)'}
          >
            <div className="stat-num" style={{ marginBottom: 16 }}>{s.num}</div>
            <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 8, letterSpacing: '-0.01em' }}>{s.label}</div>
            <div style={{ fontSize: 14, color: 'var(--dark-fg-3)', lineHeight: 1.5 }}>{s.sub}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// =====================================================================
// LINK IN BIO — the entry point of every conversation
// =====================================================================
const LinkInBio = ({ accent }) => (
  <section id="link" className="surface-light section" style={{ background: '#ffffff', overflow: 'hidden' }}>
    <div className="container">
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: 80,
        alignItems: 'center',
      }} className="link-grid">
        {/* Left: copy */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Your Bookink link</div>
          <h2 className="h-xl" style={{ color: 'var(--color-gray-900)', marginBottom: 24 }}>
            <span className="hl">One link.</span><br/>
            <span style={{ color: 'var(--color-gray-500)' }}>Every booking starts there.</span>
          </h2>
          <p className="body-lg" style={{ marginBottom: 32 }}>
            Bookink gives you a clean, branded link — <span style={{ fontWeight: 600, color: 'var(--color-gray-900)' }}>bookink.ai/yourname</span> — that you can drop in your Instagram bio, your TikTok, your website, your business card. Anywhere a future client might tap.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {[
              { i: 'instagram', t: 'In your Instagram bio', d: 'The most natural place. One tap and the conversation begins.' },
              { i: 'globe', t: 'On your website or portfolio', d: 'Embed it as a button or a chat widget on your existing site.' },
              { i: 'link', t: 'Anywhere a link can live', d: 'TikTok, YouTube, business cards, QR codes — the same link works everywhere.' },
            ].map((f, i) => (
              <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <div style={{
                  flexShrink: 0,
                  width: 36, height: 36,
                  borderRadius: 10,
                  background: '#fafafa',
                  border: '1px solid var(--color-gray-200)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name={f.i} size={16} color="#0a0a0a"/>
                </div>
                <div>
                  <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--color-gray-900)', marginBottom: 2 }}>{f.t}</div>
                  <div style={{ fontSize: 14, color: 'var(--color-gray-600)', lineHeight: 1.5 }}>{f.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Right: two phones — Instagram with link → Bookink chat page */}
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', minHeight: 720 }} className="link-phones">
          {/* Glow */}
          <div style={{
            position: 'absolute',
            inset: -40,
            background: `radial-gradient(circle at 50% 50%, ${accent}12 0%, transparent 65%)`,
            pointerEvents: 'none',
          }}/>
          {/* IG phone */}
          <div style={{
            position: 'absolute',
            left: '-4%', top: 0,
            transform: 'rotate(-3deg) scale(0.82)',
            transformOrigin: 'top left',
            zIndex: 1,
          }}>
            <PhoneFrame>
              <InstagramProfileScreen accent={accent}/>
            </PhoneFrame>
          </div>
          {/* Bookink chat phone */}
          <div style={{
            position: 'absolute',
            right: '-4%', top: 60,
            transform: 'rotate(3deg) scale(0.82)',
            transformOrigin: 'top right',
            zIndex: 2,
          }}>
            <PhoneFrame glow accent={accent}>
              <BookinkLinkPageScreen accent={accent}/>
            </PhoneFrame>
          </div>
          {/* Connector badge between the phones */}
          <div style={{
            position: 'absolute',
            left: '50%',
            top: '46%',
            transform: 'translate(-50%, -50%)',
            zIndex: 3,
            pointerEvents: 'none',
          }}>
            <div style={{
              width: 44,
              height: 44,
              borderRadius: '50%',
              background: '#0a0a0a',
              boxShadow: `0 0 0 4px ${accent}20, 0 0 0 8px ${accent}10, 0 14px 28px -6px ${accent}55`,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              border: `1.5px solid ${accent}`,
            }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="9 18 15 12 9 6"/>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 1024px) {
        .link-grid { grid-template-columns: 1fr !important; gap: 60px !important; }
        .link-phones { min-height: 640px !important; }
      }
      @media (max-width: 700px) {
        .link-phones { min-height: 560px !important; }
        .link-phones > div:nth-child(2) { transform: rotate(-3deg) scale(0.62) !important; }
        .link-phones > div:nth-child(3) { transform: rotate(3deg) scale(0.62) !important; }
      }
    `}</style>
  </section>
);
const HowItWorks = ({ accent }) => {
  const steps = [
    {
      n: '01',
      title: 'Drop your link wherever clients find you',
      desc: 'Add bookink.ai/yourname to your Instagram bio, your website, or anywhere a client might tap. One link, every entry point.',
      icon: 'link',
    },
    {
      n: '02',
      title: 'Clients click and the AI takes over',
      desc: 'Your branded booking page greets them, asks the right questions in your voice — style, placement, size, references, dates.',
      icon: 'sparkles',
    },
    {
      n: '03',
      title: 'You see the full brief in one card',
      desc: 'Every detail your client shared, organized as a structured opportunity. Nothing buried in a chat thread.',
      icon: 'zap',
    },
    {
      n: '04',
      title: 'Your client sends it to your WhatsApp',
      desc: 'At the end of the AI conversation, the client taps once to deliver their full, organized brief into your WhatsApp. Ready for your quote.',
      icon: 'whatsapp',
    },
  ];

  return (
    <section id="how" className="surface-light section">
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 80px' }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>How it works</div>
          <h2 className="h-xl" style={{ color: 'var(--color-gray-900)' }}>
            From first DM to confirmed booking,<br/>
            <span style={{ color: 'var(--color-gray-500)' }}>without lifting a finger until it matters.</span>
          </h2>
        </div>

        {/* Steps as a connected flow */}
        <div style={{ position: 'relative' }}>
          {/* Connecting line */}
          <div style={{
            position: 'absolute',
            top: 32,
            left: '12.5%',
            right: '12.5%',
            height: 2,
            background: 'var(--color-gray-200)',
            zIndex: 0,
          }}>
            <div style={{
              position: 'absolute',
              top: 0, left: 0,
              width: '100%',
              height: '100%',
              background: `linear-gradient(90deg, ${accent} 0%, ${accent}99 50%, ${accent}33 100%)`,
              animation: 'flow 3s ease-in-out infinite',
            }}/>
          </div>

          <div className="grid-4" style={{ gap: 24, position: 'relative', zIndex: 1 }}>
            {steps.map((s, i) => (
              <div key={i}>
                <div style={{
                  width: 64, height: 64,
                  borderRadius: 18,
                  background: '#fff',
                  border: '1px solid var(--color-gray-200)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  margin: '0 auto 20px',
                  boxShadow: i === 0 ? `0 8px 24px ${accent}30` : '0 4px 12px rgba(0,0,0,0.04)',
                  position: 'relative',
                }}>
                  <Icon name={s.icon} size={28} color={i === 0 ? accent : '#0a0a0a'} stroke={1.4}/>
                </div>
                <div style={{ textAlign: 'center' }}>
                  <div className="mono" style={{ color: 'var(--color-gray-400)', marginBottom: 10 }}>{s.n}</div>
                  <h3 className="h-md" style={{ color: 'var(--color-gray-900)', marginBottom: 10 }}>{s.title}</h3>
                  <p className="body-md">{s.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Inline note */}
        <div style={{
          marginTop: 60,
          textAlign: 'center',
          maxWidth: 580,
          margin: '60px auto 0',
          padding: 20,
          background: 'white',
          border: '1px solid var(--color-gray-200)',
          borderRadius: 16,
          fontSize: 14,
          color: 'var(--color-gray-700)',
        }}>
          <strong style={{ color: '#0a0a0a' }}>You stay in control of pricing.</strong> The AI gathers everything you need to quote accurately — it never sets a price on your behalf.
        </div>
      </div>
      <style>{`@keyframes flow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }`}</style>
    </section>
  );
};

// =====================================================================
// OPPORTUNITIES SHOWCASE (the lead inbox)
// =====================================================================
const OpportunitiesShowcase = ({ accent }) => (
  <section id="opportunities" className="surface-light section" style={{ background: '#f4f4f6', overflow: 'hidden' }}>
    <div className="container">
      {/* Heading row */}
      <div style={{ maxWidth: 720, marginBottom: 60 }}>
        <div className="eyebrow" style={{ marginBottom: 20 }}>Opportunities & calendar</div>
        <h2 className="h-xl" style={{ color: 'var(--color-gray-900)', marginBottom: 24 }}>
          Every lead, a clean brief.<br/>
          <span style={{ color: 'var(--color-gray-500)' }}>Every appointment, on one calendar.</span>
        </h2>
        <p className="body-lg" style={{ maxWidth: 620 }}>
          Bookink turns every inbound conversation into a single, structured opportunity — and lays every booking out across artists, chairs, and locations. Triage your day at a glance. Run the studio from one screen.
        </p>
      </div>

      {/* Devices stage: laptop + phone overlapping */}
      <div style={{ position: 'relative', marginBottom: 60 }} className="opp-stage">
        <div style={{
          position: 'absolute',
          inset: -40,
          background: `radial-gradient(ellipse at 30% 60%, ${accent}10 0%, transparent 60%)`,
          pointerEvents: 'none',
        }}/>
        {/* Laptop */}
        <div style={{ display: 'flex', justifyContent: 'flex-start', position: 'relative', zIndex: 1 }}>
          <div style={{ transform: 'scale(0.95)', transformOrigin: 'top left' }}>
            <MacbookFrame width={780} height={480}>
              <CalendarCRMScreen accent={accent}/>
            </MacbookFrame>
          </div>
        </div>
        {/* Phone overlapping bottom-right */}
        <div style={{
          position: 'absolute',
          right: -20,
          bottom: -60,
          zIndex: 2,
          transform: 'scale(0.78)',
          transformOrigin: 'bottom right',
        }} className="opp-phone">
          <PhoneFrame glow accent={accent}>
            <OpportunityDetail accent={accent}/>
          </PhoneFrame>
        </div>
      </div>

      {/* Feature list below */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 24,
        marginTop: 100,
      }} className="opp-features">
        {[
          { i: 'sparkles', t: 'Structured by AI', d: 'No more digging through DMs. The brief is already done — style, size, references, dates.' },
          { i: 'calendar', t: 'Multi-artist, multi-location', d: 'Switch studios, view every chair side-by-side, and see the whole day at a glance.' },
          { i: 'filter', t: 'Pipeline you can pilot', d: 'New, Qualified, Proposal sent, Booked — sorted automatically, ready for the WhatsApp handoff.' },
        ].map((f, i) => (
          <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
            <div style={{
              flexShrink: 0,
              width: 36, height: 36,
              borderRadius: 10,
              background: 'white',
              border: '1px solid var(--color-gray-200)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name={f.i} size={16} color="#0a0a0a"/>
            </div>
            <div>
              <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--color-gray-900)', marginBottom: 4 }}>{f.t}</div>
              <div style={{ fontSize: 14, color: 'var(--color-gray-600)', lineHeight: 1.5 }}>{f.d}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
    <style>{`
      @media (max-width: 1024px) {
        .opp-stage { padding-bottom: 80px; }
        .opp-phone { right: 0 !important; transform: scale(0.65) !important; }
      }
      @media (max-width: 760px) {
        .opp-phone { position: relative !important; right: auto !important; bottom: auto !important; transform: scale(0.85) !important; display: flex !important; justify-content: center !important; margin-top: 24px; }
        .opp-features { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </section>
);

// =====================================================================
// WHATSAPP HANDOFF — the key moment (DARK)
// =====================================================================
const WhatsAppHandoff = ({ accent }) => (
  <section className="surface-dark section" style={{ position: 'relative', overflow: 'hidden' }}>
    <div className="dot-grid" />
    <div className="glow-orb" style={{
      top: '20%', right: '-10%', width: 700, height: 700,
      background: `radial-gradient(circle, #25D36640 0%, transparent 70%)`,
      opacity: 0.4,
    }} />

    <div className="container relative" style={{ position: 'relative', zIndex: 2 }}>
      <div style={{ textAlign: 'center', maxWidth: 820, margin: '0 auto 80px' }}>
        <div className="eyebrow" style={{ marginBottom: 20 }}>The handoff</div>
        <h2 className="h-xl">
          Bookink does the asking.<br/>
          You get a <span style={{
            background: `linear-gradient(135deg, #25D366 0%, #128C7E 100%)`,
            WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
          }}>WhatsApp.</span><br/>
          <span style={{ color: 'var(--dark-fg-3)' }}>You set the price.</span>
        </h2>
        <p className="body-lg" style={{ marginTop: 24 }}>
          When the AI conversation wraps up, the client taps once to send their full brief — style, size, placement, dates, references — to your WhatsApp. Formatted, ready for the quote. The relationship stays yours.
        </p>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1.1fr',
        gap: 60,
        alignItems: 'center',
      }} className="wa-grid">
        {/* Left: Phone showing the moment of handoff */}
        <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
          <PhoneFrame glow accent="#25D366">
            <HandoffMomentScreen accent={accent}/>
          </PhoneFrame>
        </div>

        {/* Right: WhatsApp message preview */}
        <div>
          <WhatsAppMessage accent={accent}/>
        </div>
      </div>
    </div>
    <style>{`@media (max-width: 900px) { .wa-grid { grid-template-columns: 1fr !important; gap: 60px !important; } }`}</style>
  </section>
);

// The moment when artist taps "Send to WhatsApp" — confirmation animation
const HandoffMomentScreen = ({ accent }) => (
  <div style={{ height:'100%', display:'flex', flexDirection:'column', background:'#fff' }}>
    {/* Header */}
    <div style={{ padding:'8px 20px 12px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
      <Icon name="chevronLeft" size={22} color="#0a0a0a"/>
      <Icon name="moreH" size={22} color="#0a0a0a"/>
    </div>
    {/* Lead summary */}
    <div style={{ padding:'0 20px 16px' }}>
      <div style={{ display:'flex', alignItems:'center', gap: 12 }}>
        <div style={{ width: 44, height: 44, borderRadius: '50%', background:'linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf)', padding: 2 }}>
          <div style={{ width:'100%', height:'100%', borderRadius:'50%', border:'2px solid white', background:'#444' }}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 16, fontWeight: 700, color:'#0a0a0a' }}>John Smith</div>
          <div style={{ fontSize: 11, color:'#888' }}>Japanese · Forearm · 10×18 cm</div>
        </div>
      </div>
    </div>
    {/* Center: big success state */}
    <div style={{ flex: 1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding: 32 }}>
      {/* Success pulse */}
      <div style={{ position:'relative', marginBottom: 20 }}>
        <div style={{
          position:'absolute', inset: -16,
          borderRadius:'50%',
          background:'#25D36625',
          animation: 'pulseRing 2s ease-out infinite',
        }}/>
        <div style={{
          position:'absolute', inset: -32,
          borderRadius:'50%',
          background:'#25D36615',
          animation: 'pulseRing 2s ease-out 0.5s infinite',
        }}/>
        <div style={{
          width: 80, height: 80, borderRadius:'50%',
          background:'#25D366',
          display:'flex', alignItems:'center', justifyContent:'center',
          boxShadow:'0 12px 32px rgba(37,211,102,0.4)',
          position:'relative',
        }}>
          <Icon name="whatsapp" size={36} color="#fff"/>
        </div>
      </div>
      <div style={{ fontSize: 17, fontWeight: 700, color:'#0a0a0a', marginBottom: 6, letterSpacing:'-0.02em' }}>Sent to WhatsApp</div>
      <div style={{ fontSize: 12, color:'#888', textAlign:'center', maxWidth: 220, lineHeight: 1.5 }}>
        Full brief delivered to <strong style={{ color:'#0a0a0a' }}>+62 812 4567 8901</strong> with 5 reference images.
      </div>
    </div>
    {/* Confirmation chips */}
    <div style={{ padding:'0 20px 20px' }}>
      <div style={{ display:'flex', flexDirection:'column', gap: 6 }}>
        {[
          { label:'Brief copied', icon:'check' },
          { label:'References attached', icon:'check' },
          { label:'Client moved to "Proposal Sent"', icon:'check' },
        ].map((c, i) => (
          <div key={i} style={{
            display:'flex', alignItems:'center', gap: 8,
            padding:'8px 12px', borderRadius: 8,
            background:'#E8F8ED',
          }}>
            <Icon name={c.icon} size={12} color="#1A7A37" stroke={2.5}/>
            <span style={{ fontSize: 11, fontWeight: 500, color:'#1A7A37' }}>{c.label}</span>
          </div>
        ))}
      </div>
    </div>
    <style>{`@keyframes pulseRing { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }`}</style>
  </div>
);

const WhatsAppMessage = ({ accent }) => (
  <div style={{
    background: 'linear-gradient(180deg, #0b141a 0%, #111c22 100%)',
    borderRadius: 20,
    overflow: 'hidden',
    boxShadow: '0 30px 80px -20px rgba(0,0,0,0.7), 0 0 60px rgba(37,211,102,0.15)',
    border: '1px solid rgba(255,255,255,0.06)',
  }}>
    {/* Header */}
    <div style={{
      padding: '14px 20px',
      background: '#1f2c33',
      display: 'flex', alignItems: 'center', gap: 12,
      borderBottom: '1px solid rgba(255,255,255,0.04)',
    }}>
      <Icon name="chevronLeft" size={20} color="rgba(255,255,255,0.7)"/>
      <div style={{
        width: 38, height: 38, borderRadius: '50%',
        background:'#25D366', display:'flex', alignItems:'center', justifyContent:'center',
      }}>
        <Icon name="user" size={20} color="#fff"/>
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 15, fontWeight: 600, color: '#fff' }}>John Smith</div>
        <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>online</div>
      </div>
      <Icon name="moreH" size={20} color="rgba(255,255,255,0.6)"/>
    </div>
    {/* Messages area */}
    <div style={{ padding: 20, minHeight: 480, background: '#0b141a', backgroundImage: `radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px)`, backgroundSize: '20px 20px' }}>
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 8 }}>
        <div style={{
          maxWidth: '85%',
          background: '#005c4b',
          color: '#fff',
          padding: '10px 12px 6px',
          borderRadius: '12px 12px 4px 12px',
          fontSize: 13.5,
          lineHeight: 1.45,
          position: 'relative',
        }}>
          <div style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 6,
            background: 'rgba(255,255,255,0.08)',
            padding: '4px 10px',
            borderRadius: 6,
            marginBottom: 10,
            fontSize: 11,
            color: '#a8d4be',
          }}>
            <Icon name="sparkles" size={11} color="#a8d4be"/>
            <span style={{ fontWeight: 600 }}>Forwarded from Bookink</span>
          </div>
          <div style={{ marginBottom: 8 }}>
            <strong>New booking request — John Smith</strong>
          </div>
          <div style={{ fontSize: 12.5, lineHeight: 1.6 }}>
            <strong>Style:</strong> Japanese · Realism<br/>
            <strong>Placement:</strong> Inner forearm<br/>
            <strong>Size:</strong> 10 cm × 18 cm<br/>
            <strong>Preferred dates:</strong> Jun 14 – 16<br/>
            <strong>Budget:</strong> Open<br/>
            <strong>Source:</strong> Instagram DM<br/>
          </div>
          <div style={{ marginTop: 10, paddingTop: 10, borderTop: '1px solid rgba(255,255,255,0.08)', fontSize: 12, color: '#a8d4be' }}>
            5 reference images attached
          </div>
          <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)', textAlign: 'right', marginTop: 6, display:'flex', justifyContent:'flex-end', alignItems:'center', gap: 4 }}>
            14:32 <span style={{ color:'#53bdeb' }}>✓✓</span>
          </div>
        </div>
      </div>
      {/* Reference image grid */}
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 8 }}>
        <div style={{
          background: '#005c4b',
          padding: 4,
          borderRadius: 12,
          maxWidth: '85%',
        }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 3, borderRadius: 8, overflow: 'hidden' }}>
            {[0, 3, 4, 1, 2, 5].map((m, i) => (
              <div key={i} style={{ width: 70, height: 70 }}>
                <TattooPlaceholder motif={m}/>
              </div>
            ))}
          </div>
          <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)', textAlign: 'right', padding: '4px 4px 0', display:'flex', justifyContent:'flex-end', alignItems:'center', gap: 4 }}>
            14:32 <span style={{ color:'#53bdeb' }}>✓✓</span>
          </div>
        </div>
      </div>
      {/* Artist typing reply */}
      <div style={{ display: 'flex', justifyContent: 'flex-start', marginTop: 16 }}>
        <div style={{
          background: '#1f2c33',
          padding: '8px 14px',
          borderRadius: 14,
          display: 'flex',
          gap: 4,
        }}>
          {[0,1,2].map(i => (
            <div key={i} style={{
              width: 6, height: 6, borderRadius:'50%', background:'rgba(255,255,255,0.5)',
              animation: `typing 1.4s ease-in-out ${i * 0.2}s infinite`,
            }}/>
          ))}
        </div>
      </div>
    </div>
  </div>
);

// =====================================================================
// REPORTS / FINANCES SECTION
// =====================================================================
const ReportsShowcase = ({ accent }) => (
  <section id="reports" className="surface-light section" style={{ background: '#ffffff' }}>
    <div className="container">
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1.1fr 1fr',
        gap: 80,
        alignItems: 'center',
      }} className="rep-grid">
        {/* Left: phone */}
        <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
          <div style={{
            position: 'absolute',
            inset: -40,
            background: `radial-gradient(circle at 70% 50%, ${accent}10 0%, transparent 60%)`,
            pointerEvents: 'none',
          }}/>
          <PhoneFrame>
            <ReportsScreen accent={accent}/>
          </PhoneFrame>
        </div>
        {/* Right: copy */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Reports & finances</div>
          <h2 className="h-xl" style={{ color: 'var(--color-gray-900)', marginBottom: 24 }}>
            Your studio's money,<br/>
            <span style={{ color: 'var(--color-gray-500)' }}>finally on one screen.</span>
          </h2>
          <p className="body-lg" style={{ marginBottom: 32 }}>
            Revenue collected, revenue projected, conversion rates, average order value. Bookink quietly tracks the numbers a studio owner actually cares about — so you don't need a spreadsheet, an accountant, or a guess.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {[
              { icon: 'trendUp', label: 'Revenue collected & projected' },
              { icon: 'chart', label: 'Conversion at every stage' },
              { icon: 'user', label: 'Lead source attribution' },
              { icon: 'creditCard', label: 'Deposits, balances, payouts' },
            ].map((f, i) => (
              <div key={i} style={{
                padding: 16,
                background: '#fafafa',
                borderRadius: 12,
                border: '1px solid var(--color-gray-200)',
              }}>
                <Icon name={f.icon} size={20} color="#0a0a0a" style={{ marginBottom: 10 }}/>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--color-gray-900)' }}>{f.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
    <style>{`@media (max-width: 900px) { .rep-grid { grid-template-columns: 1fr !important; gap: 60px !important; } }`}</style>
  </section>
);

// =====================================================================
// TESTIMONIALS
// =====================================================================
const Testimonials = ({ accent }) => {
  const items = [
    {
      quote: 'I used to spend two hours every morning just replying to DMs. Now I open Bookink with my coffee, accept three bookings, and I\'m at the studio by ten.',
      name: 'Marina Solé',
      role: 'Owner · Sacred Hand Studio',
      city: 'Barcelona',
    },
    {
      quote: 'My receptionist used to forget half the details by the time the client walked in. With Bookink, the brief is right there. Reference images, size, placement — done.',
      name: 'Diego Rivera',
      role: 'Owner · Black Anchor',
      city: 'Mexico City',
    },
    {
      quote: 'I run a five-artist studio. Bookink is the first thing that actually keeps everyone\'s schedule sane without me sending reminders.',
      name: 'Aiko Tanaka',
      role: 'Manager · Atelier Noir',
      city: 'Tokyo',
    },
    {
      quote: 'The WhatsApp handoff is the killer feature. I quote, the client confirms, I send the deposit link. No app-switching.',
      name: 'Lukas Berger',
      role: 'Tattoo Artist · Independent',
      city: 'Berlin',
    },
  ];

  return (
    <section className="surface-dark section" style={{ overflow: 'hidden', position: 'relative' }}>
      <div className="glow-orb" style={{
        top: '40%', left: '50%', transform: 'translateX(-50%)',
        width: 900, height: 500,
        background: `radial-gradient(ellipse, ${accent}25 0%, transparent 60%)`,
        opacity: 0.3,
      }}/>
      <div className="container relative" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ textAlign: 'center', maxWidth: 700, margin: '0 auto 80px' }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Loved by artists and studios</div>
          <h2 className="h-xl">
            The receptionist that<br/>
            never sleeps.
          </h2>
        </div>

        <div className="grid-2" style={{ gap: 24 }}>
          {items.map((t, i) => (
            <div key={i} style={{
              padding: 32,
              background: 'var(--dark-card)',
              border: '1px solid var(--dark-border)',
              borderRadius: 20,
              display: 'flex',
              flexDirection: 'column',
              gap: 24,
            }}>
              <div style={{ display: 'flex', gap: 2 }}>
                {[0,1,2,3,4].map(i => (
                  <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill={accent} stroke={accent} strokeWidth="1" strokeLinejoin="round">
                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                  </svg>
                ))}
              </div>
              <p style={{
                fontSize: 18,
                lineHeight: 1.5,
                color: 'var(--dark-fg)',
                letterSpacing: '-0.01em',
                fontWeight: 400,
              }}>
                "{t.quote}"
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 'auto' }}>
                <div style={{
                  width: 40, height: 40,
                  borderRadius: '50%',
                  background: `linear-gradient(135deg, ${['#FFA07A','#9370DB','#FF6347','#4682B4'][i]} 0%, ${['#FF6347','#4B0082','#8B0000','#191970'][i]} 100%)`,
                }}/>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--dark-fg)' }}>{t.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--dark-fg-3)' }}>{t.role} · {t.city}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// =====================================================================
// PRICING
// =====================================================================
const Pricing = ({ accent }) => {
  const [billing, setBilling] = useStateS('yearly'); // 'monthly' | 'yearly'

  const plans = [
    {
      name: 'Basic',
      monthly: 19.99,
      yearly: 12.99,
      desc: 'For independent artists handling their own bookings.',
      features: ['1 artist seat', 'AI booking assistant', 'Unlimited leads', 'Opportunities pipeline', 'WhatsApp handoff', 'Basic reports'],
      cta: 'Start free trial',
      featured: false,
    },
    {
      name: 'Studio',
      monthly: 39.99,
      yearly: 29.99,
      seatAddon: 7,
      desc: 'For studios with a receptionist and a team of artists.',
      features: ['Receptionist dashboard', 'Shared opportunities pipeline', 'AI tone customization per artist', 'Full reports & finances', 'Priority support'],
      cta: 'Start free trial',
      featured: true,
    },
    {
      name: 'Enterprise',
      custom: true,
      desc: 'For multi-location studios and franchises that need full control.',
      features: ['Unlimited artist seats', 'Multi-location support', 'Custom AI training', 'Advanced analytics', 'API access', 'Dedicated success manager', 'Custom contract & SLA'],
      cta: 'Talk to sales',
      featured: false,
    },
  ];

  return (
    <section id="pricing" className="surface-light section" style={{ background: '#fafafa' }}>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 48px' }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Pricing</div>
          <h2 className="h-xl" style={{ color: 'var(--color-gray-900)' }}>
            Pays for itself in<br/>
            <span style={{ color: 'var(--color-gray-500)' }}>your first booking.</span>
          </h2>
        </div>

        {/* Billing toggle */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 48 }}>
          <div style={{
            display: 'inline-flex',
            background: '#ffffff',
            border: '1px solid var(--color-gray-200)',
            borderRadius: 100,
            padding: 4,
            boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
            position: 'relative',
          }}>
            {[
              { key: 'monthly', label: 'Monthly' },
              { key: 'yearly', label: 'Yearly', save: 'save 33%' },
            ].map(opt => {
              const active = billing === opt.key;
              return (
                <button
                  key={opt.key}
                  onClick={() => setBilling(opt.key)}
                  style={{
                    padding: '10px 22px',
                    borderRadius: 100,
                    fontSize: 14,
                    fontWeight: 600,
                    color: active ? '#fff' : 'var(--color-gray-700)',
                    background: active ? '#0a0a0a' : 'transparent',
                    transition: 'all 200ms var(--ease-out)',
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: 8,
                  }}
                >
                  {opt.label}
                  {opt.save && (
                    <span style={{
                      fontSize: 10,
                      fontWeight: 700,
                      letterSpacing: 0.4,
                      textTransform: 'uppercase',
                      padding: '2px 6px',
                      borderRadius: 100,
                      background: active ? accent : `${accent}1F`,
                      color: active ? '#fff' : accent,
                    }}>{opt.save}</span>
                  )}
                </button>
              );
            })}
          </div>
        </div>

        <div className="grid-3" style={{ gap: 24, alignItems: 'stretch' }}>
          {plans.map((p, i) => {
            const price = p.custom ? null : (billing === 'yearly' ? p.yearly : p.monthly);
            return (
              <div key={i} style={{
                padding: 32,
                background: p.featured ? '#0a0a0a' : '#ffffff',
                color: p.featured ? '#ffffff' : 'var(--color-gray-900)',
                border: p.featured ? '1px solid #0a0a0a' : '1px solid var(--color-gray-200)',
                borderRadius: 20,
                display: 'flex',
                flexDirection: 'column',
                position: 'relative',
                boxShadow: p.featured ? '0 20px 60px rgba(0,0,0,0.2)' : '0 1px 3px rgba(0,0,0,0.04)',
              }}>
                {p.featured && (
                  <div style={{
                    position: 'absolute',
                    top: -10, right: 32,
                    padding: '4px 12px',
                    borderRadius: 100,
                    background: accent,
                    color: '#fff',
                    fontSize: 11,
                    fontWeight: 700,
                    letterSpacing: 1,
                    textTransform: 'uppercase',
                  }}>Most popular</div>
                )}
                <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 8, color: p.featured ? '#fff' : 'var(--color-gray-900)' }}>
                  {p.name}
                </div>
                {p.custom ? (
                  <div style={{ marginBottom: 8 }}>
                    <div style={{ fontSize: 40, fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 1 }}>Custom</div>
                    <div style={{ fontSize: 13, color: p.featured ? 'rgba(255,255,255,0.6)' : 'var(--color-gray-500)', marginTop: 6 }}>Talk to us about your studio</div>
                  </div>
                ) : (
                  <>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 4 }}>
                      <span style={{ fontSize: 14, color: p.featured ? 'rgba(255,255,255,0.6)' : 'var(--color-gray-500)' }}>$</span>
                      <span style={{ fontSize: 56, fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 1 }}>{price}</span>
                      <span style={{ fontSize: 14, color: p.featured ? 'rgba(255,255,255,0.6)' : 'var(--color-gray-500)' }}>/ month</span>
                    </div>
                    <div style={{ fontSize: 12, color: p.featured ? 'rgba(255,255,255,0.55)' : 'var(--color-gray-500)', marginBottom: 8 }}>
                      {billing === 'yearly' ? 'Billed annually' : 'Billed monthly'}
                    </div>
                    {p.seatAddon && (
                      <div style={{
                        display: 'inline-flex',
                        alignSelf: 'flex-start',
                        alignItems: 'center',
                        gap: 6,
                        padding: '4px 10px',
                        borderRadius: 100,
                        background: p.featured ? 'rgba(255,255,255,0.08)' : 'var(--color-gray-100)',
                        color: p.featured ? 'rgba(255,255,255,0.85)' : 'var(--color-gray-700)',
                        fontSize: 11,
                        fontWeight: 600,
                        marginBottom: 8,
                      }}>
                        <Icon name="user" size={11} color={p.featured ? '#fff' : '#0a0a0a'}/>
                        + ${p.seatAddon}/mo per bookable team member
                      </div>
                    )}
                  </>
                )}
                <p style={{ fontSize: 14, color: p.featured ? 'rgba(255,255,255,0.7)' : 'var(--color-gray-600)', marginTop: 8, marginBottom: 20, lineHeight: 1.5 }}>
                  {p.desc}
                </p>
                {!p.custom && (
                  <div style={{
                    display: 'inline-flex',
                    alignSelf: 'flex-start',
                    alignItems: 'center',
                    gap: 6,
                    padding: '5px 10px',
                    borderRadius: 100,
                    background: p.featured ? 'rgba(255,255,255,0.08)' : 'var(--color-gray-100)',
                    color: p.featured ? 'rgba(255,255,255,0.85)' : 'var(--color-gray-700)',
                    fontSize: 11,
                    fontWeight: 600,
                    letterSpacing: 0.3,
                    marginBottom: 16,
                  }}>
                    <Icon name="sparkles" size={11} color={accent}/>
                    30 days free · no card required
                  </div>
                )}
                <a href="#cta" className="btn btn-lg" style={{
                  background: p.featured ? '#fff' : '#0a0a0a',
                  color: p.featured ? '#0a0a0a' : '#fff',
                  marginBottom: 24,
                  width: '100%',
                }}>
                  {p.cta}
                  <Icon name="arrowRight" size={14}/>
                </a>
                <div style={{ height: 1, background: p.featured ? 'rgba(255,255,255,0.1)' : 'var(--color-gray-200)', marginBottom: 20 }}/>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {p.features.map((f, j) => (
                    <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <Icon name="check" size={14} color={p.featured ? accent : '#0a0a0a'} stroke={2.5}/>
                      <span style={{ fontSize: 14, color: p.featured ? 'rgba(255,255,255,0.9)' : 'var(--color-gray-700)' }}>{f}</span>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ textAlign: 'center', marginTop: 40, fontSize: 13, color: 'var(--color-gray-500)' }}>
          All paid plans include a 30-day free trial. Cancel anytime. No credit card required to start.
        </div>
      </div>
    </section>
  );
};

// =====================================================================
// FAQ
// =====================================================================
const FAQ = () => {
  const faqs = [
    {
      q: 'Does the AI quote prices on my behalf?',
      a: 'No. Bookink gathers every detail you need to quote accurately — style, size, placement, references, dates — but you stay in control of every price. The AI never makes commitments on your behalf.',
    },
    {
      q: 'How does the WhatsApp handoff work?',
      a: 'When you tap "Send to WhatsApp" on any lead, Bookink formats the full brief and reference images into a single message and delivers it to your WhatsApp. From there, you quote the price, confirm the date, and own the relationship.',
    },
    {
      q: 'Will my clients know they\'re talking to an AI?',
      a: 'That\'s up to you. Some artists prefer transparency ("Hi, I\'m the booking assistant for…"). Others want the AI to respond as if it\'s a receptionist. You configure the tone during setup.',
    },
    {
      q: 'What languages does Bookink support?',
      a: 'English, Spanish, Portuguese, Bahasa Indonesia, Italian, French, German, and Japanese. The AI replies in whatever language the client uses, automatically.',
    },
    {
      q: 'Does it work with Instagram business accounts only?',
      a: 'Yes. Bookink connects via the Instagram Graph API, which requires a Business or Creator account linked to a Facebook Page. Setup takes about 3 minutes.',
    },
    {
      q: 'What about my existing calendar?',
      a: 'Bookink syncs with Google Calendar and Apple Calendar. Your availability stays in one place, and Bookink only suggests dates from open slots.',
    },
    {
      q: 'Can my receptionist use it too?',
      a: 'On Studio and Pro Studio plans, your receptionist gets their own seat and a dedicated dashboard view. They can triage, edit, and hand off leads while the artist focuses on the work.',
    },
    {
      q: 'How long does setup take?',
      a: 'About 8 minutes. You connect Instagram, set your styles, define your size brackets, set deposit rules, and configure availability. After that, it runs itself.',
    },
  ];

  const [open, setOpen] = useStateS(0);

  return (
    <section id="faq" className="surface-light section" style={{ background: '#ffffff' }}>
      <div className="container-tight">
        <div style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto 60px' }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>FAQ</div>
          <h2 className="h-xl" style={{ color: 'var(--color-gray-900)', whiteSpace: 'nowrap' }}>
            Questions, answered.
          </h2>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {faqs.map((f, i) => (
            <div key={i} style={{
              borderBottom: '1px solid var(--color-gray-200)',
              borderTop: i === 0 ? '1px solid var(--color-gray-200)' : 'none',
            }}>
              <button
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{
                  width: '100%',
                  padding: '24px 0',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  textAlign: 'left',
                  fontSize: 18,
                  fontWeight: 600,
                  color: 'var(--color-gray-900)',
                  letterSpacing: '-0.01em',
                }}
              >
                {f.q}
                <Icon
                  name="plus"
                  size={20}
                  color="#0a0a0a"
                  style={{
                    transition: 'transform 250ms var(--ease-out)',
                    transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                    flexShrink: 0,
                  }}
                />
              </button>
              <div style={{
                overflow: 'hidden',
                maxHeight: open === i ? 200 : 0,
                transition: 'max-height 350ms var(--ease-out), opacity 250ms',
                opacity: open === i ? 1 : 0,
              }}>
                <div style={{ paddingBottom: 24, paddingRight: 60, fontSize: 16, lineHeight: 1.6, color: 'var(--color-gray-600)' }}>
                  {f.a}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// =====================================================================
// CTA
// =====================================================================
const CTA = ({ accent }) => (
  <section id="cta" className="surface-dark section" style={{ position: 'relative', overflow: 'hidden' }}>
    <div className="glow-orb" style={{
      top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
      width: 900, height: 600,
      background: `radial-gradient(ellipse, ${accent}40 0%, transparent 60%)`,
      opacity: 0.5,
    }}/>
    <div className="dot-grid"/>
    <div className="container-tight relative" style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>
      <h2 className="h-display" style={{ marginBottom: 24 }}>
        Get your time back.<br/>
        <span className="hl">Start tattooing.</span>
      </h2>
      <p className="body-lg" style={{ maxWidth: 540, margin: '0 auto 40px' }}>
        30 days free. Setup takes 8 minutes. Your first booking pays for the month.
      </p>
      <div style={{ display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
        <a href="#" className="btn btn-lg btn-primary">
          Start free trial
          <Icon name="arrowRight" size={16}/>
        </a>
        <a href="#" className="btn btn-lg btn-ghost-dark">
          Book a demo
        </a>
      </div>
      <div style={{ marginTop: 32, fontSize: 13, color: 'var(--dark-fg-3)', display: 'flex', justifyContent: 'center', gap: 24, flexWrap: 'wrap' }}>
        <span style={{ display:'flex', alignItems:'center', gap: 6 }}><Icon name="check" size={14} color="#34C759"/> No credit card required</span>
        <span style={{ display:'flex', alignItems:'center', gap: 6 }}><Icon name="check" size={14} color="#34C759"/> Cancel anytime</span>
        <span style={{ display:'flex', alignItems:'center', gap: 6 }}><Icon name="check" size={14} color="#34C759"/> 8-minute setup</span>
      </div>
    </div>
  </section>
);

// =====================================================================
// FOOTER
// =====================================================================
const Footer = ({ isLight }) => (
  <footer className="surface-dark" style={{ paddingTop: 64, paddingBottom: 40, borderTop: '1px solid rgba(255,255,255,0.06)' }}>
    <div className="container">
      <div style={{
        display: 'grid',
        gridTemplateColumns: '2fr 1fr 1fr 1fr',
        gap: 48,
        marginBottom: 56,
      }} className="footer-grid">
        <div>
          <BookinkLogo color={isLight ? '#0a0a0a' : '#ffffff'} height={24}/>
          <p style={{ fontSize: 14, color: 'var(--dark-fg-3)', marginTop: 16, maxWidth: 320, lineHeight: 1.5 }}>
            AI booking automation built for tattoo artists and studios. Less time on DMs. More time on the art.
          </p>
        </div>
        {[
          { title: 'Product', links: [
            { label: 'Features', href: '/#how' },
            { label: 'Pricing', href: '/#pricing' },
            { label: 'How it works', href: '/#how' },
            { label: 'FAQ', href: '/#faq' },
          ]},
          { title: 'Studios', links: [
            { label: 'For artists', href: '/#pricing' },
            { label: 'For receptionists', href: '/#pricing' },
            { label: 'For studios', href: '/#pricing' },
            { label: 'Case studies', href: '#' },
          ]},
          { title: 'Company', links: [
            { label: 'Contact', href: '/contact.html' },
            { label: 'Privacy', href: '/privacy.html' },
            { label: 'Terms', href: '/terms.html' },
          ]},
        ].map((col, i) => (
          <div key={i}>
            <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--dark-fg)', letterSpacing: 1, textTransform: 'uppercase', marginBottom: 16 }}>
              {col.title}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {col.links.map((l, j) => (
                <a key={j} href={l.href} style={{ fontSize: 14, color: 'var(--dark-fg-3)', transition: 'color 200ms' }}
                   onMouseEnter={e => e.currentTarget.style.color = 'var(--dark-fg)'}
                   onMouseLeave={e => e.currentTarget.style.color = 'var(--dark-fg-3)'}
                >{l.label}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        paddingTop: 24,
        borderTop: '1px solid rgba(255,255,255,0.06)',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        flexWrap: 'wrap',
        gap: 16,
      }}>
        <div style={{ fontSize: 13, color: 'var(--dark-fg-3)' }}>
          © 2026 Bookink Inc. · bookink.ai
        </div>
        <div style={{ display: 'flex', gap: 16, fontSize: 13, color: 'var(--dark-fg-3)' }}>
          <a href="#">Twitter</a>
          <a href="#">Instagram</a>
          <a href="#">LinkedIn</a>
        </div>
      </div>
    </div>
    <style>{`@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
  </footer>
);

// Export
Object.assign(window, {
  Nav, Hero, LogoBar, ValueStats, LinkInBio, HowItWorks, OpportunitiesShowcase,
  WhatsAppHandoff, ReportsShowcase, Testimonials, Pricing, FAQ, CTA, Footer,
});