// sections.jsx - Nav, Hero, HowItWorks, Features
const openInvite = (website = '') => window.dispatchEvent(new CustomEvent('open-invite', { detail: { website } }));

/* ============ NAV ============ */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 24);
    f(); window.addEventListener('scroll', f, { passive: true });
    return () => window.removeEventListener('scroll', f);
  }, []);
  const links = [['How it works', '#how'], ['Features', '#features'], ['Examples', '#examples'], ['FAQ', '#faq']];
  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      transition: 'all 0.35s ease',
      background: scrolled ? 'color-mix(in oklch, var(--bg) 82%, transparent)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(1.4) blur(14px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(1.4) blur(14px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
    }}>
      <div className="wrap" style={{ height: 72, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
        <a href="#top" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center' }}><Logo size={21} /></a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 34 }} className="nav-links">
          {links.map(([t, h]) => (
            <a key={t} href={h} style={{ textDecoration: 'none', color: 'var(--ink-soft)', fontSize: 14.5, fontWeight: 500, transition: 'color 0.2s' }}
               onMouseEnter={e => e.currentTarget.style.color = 'var(--ink)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--ink-soft)'}>{t}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <a href="https://my.realtymarketing.app" target="_blank" rel="noopener" className="nav-signin" style={{ textDecoration: 'none', color: 'var(--ink-soft)', fontSize: 14.5, fontWeight: 600 }}>Sign in</a>
          <button className="btn btn-gold btn-sm" onClick={() => openInvite()}>Request invite</button>
        </div>
      </div>
      <style>{`
        @media (max-width: 860px){ .nav-links{ display:none !important; } .nav-signin{ display:none !important; } }
      `}</style>
    </header>
  );
}

/* ============ Browser + Phone mockups ============ */
function BrowserMock() {
  return (
    <div className="card" style={{ borderRadius: 14, overflow: 'hidden', width: '100%' }}>
      <div style={{ height: 38, display: 'flex', alignItems: 'center', gap: 14, padding: '0 14px', borderBottom: '1px solid var(--line)', background: 'var(--bg-2)' }}>
        <div style={{ display: 'flex', gap: 7 }}>
          {['oklch(0.7 0.02 30)', 'oklch(0.82 0.04 90)', 'oklch(0.75 0.05 150)'].map((c, i) => <span key={i} style={{ width: 11, height: 11, borderRadius: 99, background: c, opacity: 0.7 }} />)}
        </div>
        <div style={{ flex: 1, maxWidth: 320, margin: '0 auto', height: 22, borderRadius: 99, background: 'var(--card)', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 6, padding: '0 10px', fontSize: 11, color: 'var(--ink-faint)', fontFamily: 'ui-monospace, monospace' }}>
          <span style={{ width: 6, height: 6, borderRadius: 99, background: 'var(--gold)' }} /> my.realtymarketing.app
        </div>
      </div>
      {/* app body */}
      <div style={{ display: 'flex', minHeight: 290 }}>
        <div style={{ width: 64, borderRight: '1px solid var(--line)', padding: '16px 0', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18, background: 'var(--bg-2)' }}>
          <div style={{ width: 30, height: 30, borderRadius: 9, background: 'var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><span className="serif" style={{ color: 'oklch(0.2 0.02 80)', fontSize: 17 }}>R</span></div>
          {['monitor', 'image', 'share', 'tag'].map((n, i) => <div key={n} style={{ color: i === 0 ? 'var(--ink)' : 'var(--ink-faint)' }}><Icon name={n} size={19} /></div>)}
        </div>
        <div style={{ flex: 1, padding: '18px 20px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
            <div>
              <div style={{ fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-faint)', fontWeight: 700 }}>Imported listings</div>
              <div className="serif" style={{ fontSize: 19, marginTop: 2 }}>14 active properties</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10.5, fontWeight: 600, color: 'var(--gold)', background: 'var(--gold-soft)', padding: '5px 9px', borderRadius: 99 }}>
              <span style={{ width: 6, height: 6, borderRadius: 99, background: 'var(--gold)', boxShadow: '0 0 0 0 var(--gold)', animation: 'pulse 2s infinite' }} /> Live sync
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
            {[0, 1, 2, 3, 4, 5].map(i => (
              <div key={i} style={{ borderRadius: 9, overflow: 'hidden', border: '1px solid var(--line)', background: 'var(--card)' }}>
                <Placeholder label="" radius={0} style={{ height: 54, borderRadius: 0, border: 'none' }} />
                <div style={{ padding: '7px 8px' }}>
                  <div style={{ height: 6, width: '70%', background: 'var(--line-strong)', borderRadius: 3 }} />
                  <div style={{ height: 5, width: '45%', background: 'var(--line)', borderRadius: 3, marginTop: 5 }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`@keyframes pulse{0%{box-shadow:0 0 0 0 var(--gold-line)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}`}</style>
    </div>
  );
}

function PhoneMock() {
  return (
    <div style={{ width: 178, borderRadius: 30, background: 'var(--ink)', padding: 7, boxShadow: 'var(--shadow-lg)' }}>
      <div style={{ borderRadius: 24, overflow: 'hidden', background: 'var(--navy-deep)', position: 'relative' }}>
        <div style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: 50, height: 5, borderRadius: 99, background: 'oklch(0 0 0 / 0.4)', zIndex: 2 }} />
        {/* branded graphic preview */}
        <div style={{ aspect: '4/5', height: 250, position: 'relative', background: 'linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%)' }}>
          <Placeholder label="listing photo" radius={0} style={{ position: 'absolute', inset: 0, borderRadius: 0, border: 'none', opacity: 0.9 }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, oklch(0.16 0.03 258 / 0.92) 14%, transparent 60%)' }} />
          <div style={{ position: 'absolute', top: 14, left: 14, display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{ width: 22, height: 22, borderRadius: 6, background: 'var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><span className="serif" style={{ color: 'oklch(0.2 0.02 80)', fontSize: 13 }}>R</span></div>
            <span style={{ fontSize: 9, color: 'oklch(0.95 0 0)', fontWeight: 600, letterSpacing: '0.04em' }}>YOUR BRAND</span>
          </div>
          <div style={{ position: 'absolute', top: 14, right: 12, fontSize: 9, fontWeight: 700, color: 'oklch(0.2 0.02 80)', background: 'var(--gold)', padding: '3px 8px', borderRadius: 99 }}>JUST LISTED</div>
          <div style={{ position: 'absolute', left: 14, right: 14, bottom: 16 }}>
            <div className="serif" style={{ color: 'oklch(0.98 0 0)', fontSize: 22, lineHeight: 1, fontWeight: 600 }}>$1,250,000</div>
            <div style={{ color: 'oklch(0.92 0.01 80)', fontSize: 10, marginTop: 5, fontWeight: 500 }}>4 Bed · 3 Bath · 2,840 sqft</div>
            <div style={{ color: 'var(--gold)', fontSize: 9, marginTop: 3, letterSpacing: '0.04em' }}>128 Marigold Crescent</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 6, padding: '9px 10px', background: 'var(--card)' }}>
          {['instagram', 'facebook', 'tiktok'].map(b => <div key={b} style={{ flex: 1, height: 26, borderRadius: 7, background: 'var(--bg-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink-soft)' }}><Brand name={b} size={15} /></div>)}
          <div style={{ width: 26, height: 26, borderRadius: 7, background: 'var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'oklch(0.2 0.02 80)' }}><Icon name="share" size={14} /></div>
        </div>
      </div>
    </div>
  );
}

/* ============ HERO ============ */
function Hero() {
  const [url, setUrl] = useState('');
  const submit = (e) => { e.preventDefault(); openInvite(url); };
  return (
    <section id="top" className="section" style={{ paddingTop: 132, paddingBottom: 'clamp(60px,9vw,110px)', position: 'relative' }}>
      {/* ambient glow */}
      <div aria-hidden style={{ position: 'absolute', top: -80, right: -120, width: 560, height: 560, borderRadius: '50%', background: 'radial-gradient(circle, var(--gold-soft), transparent 65%)', filter: 'blur(20px)', pointerEvents: 'none', opacity: 0.8 }} />
      <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1.02fr 0.98fr', gap: 56, alignItems: 'center', position: 'relative' }}>
        <div className="hero-copy">
          <R className="eyebrow" as="div">Invite-only · Free during beta</R>
          <R as="h1" delay={60} className="serif" style={{ fontSize: 'clamp(46px, 6.4vw, 86px)', marginTop: 22, marginBottom: 22 }}>
            Your website is now<br />a <span className="gold-text" style={{ fontStyle: 'italic' }}>marketing engine.</span>
          </R>
          <R as="p" delay={120} style={{ fontSize: 'clamp(17px,1.5vw,20px)', color: 'var(--ink-soft)', maxWidth: 520, lineHeight: 1.6 }}>
            Drop in your real estate website and RealtyMarketing.App auto-imports your listings, watches for changes, and turns them into branded graphics &amp; video - ready to post in one tap.
          </R>
          <R delay={180} style={{ marginTop: 34 }}>
            <form onSubmit={submit} className="hero-form" style={{ display: 'flex', gap: 10, maxWidth: 480, background: 'var(--card)', border: '1px solid var(--line-strong)', borderRadius: 999, padding: 6, boxShadow: 'var(--shadow)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, flex: 1, padding: '0 8px 0 16px' }}>
                <span style={{ color: 'var(--ink-faint)' }}><Icon name="globe" size={18} /></span>
                <input value={url} onChange={e => setUrl(e.target.value)} placeholder="yourrealestate.com" inputMode="url"
                  style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontFamily: 'inherit', fontSize: 15.5, color: 'var(--ink)', minWidth: 0 }} />
              </div>
              <button type="submit" className="btn btn-primary" style={{ flexShrink: 0 }}>Request invite <Icon name="arrow" size={17} /></button>
            </form>
          </R>
          <R delay={240} style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap', color: 'var(--ink-faint)', fontSize: 13.5 }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 7 }}><Icon name="check" size={15} color="var(--gold)" /> No credit card</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 7 }}><Icon name="check" size={15} color="var(--gold)" /> Web, iOS &amp; Android</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 7 }}><Icon name="check" size={15} color="var(--gold)" /> Set up in minutes</span>
          </R>
        </div>
        {/* visual */}
        <R delay={140} className="hero-visual" style={{ position: 'relative' }}>
          <BrowserMock />
          <div style={{ position: 'absolute', bottom: -46, right: -10, zIndex: 3 }}><PhoneMock /></div>
          <div className="float-badge card" style={{ position: 'absolute', top: 38, left: -34, zIndex: 3, padding: '11px 15px', borderRadius: 13, display: 'flex', alignItems: 'center', gap: 10, boxShadow: 'var(--shadow-lg)' }}>
            <span style={{ color: 'var(--gold)' }}><Icon name="radar" size={20} /></span>
            <div>
              <div style={{ fontSize: 12.5, fontWeight: 700 }}>New listing detected</div>
              <div style={{ fontSize: 11, color: 'var(--ink-faint)' }}>Graphic generated · 2s ago</div>
            </div>
          </div>
        </R>
      </div>
      <style>{`
        @media (max-width: 920px){
          .hero-visual{ margin-top: 64px; }
          .wrap > .hero-copy{}
          section#top .wrap{ grid-template-columns: 1fr !important; }
          .float-badge{ left: 0 !important; }
        }
        @media (max-width: 520px){
          .hero-form{ flex-direction: column; border-radius: 18px !important; }
          .hero-form .btn{ justify-content:center; }
        }
      `}</style>
    </section>
  );
}

/* ============ HOW IT WORKS ============ */
function HowItWorks() {
  const steps = [
    { icon: 'link', n: '01', t: 'Connect your website', d: 'Paste your agency or brokerage URL. We scan your site and map every property page automatically.' },
    { icon: 'radar', n: '02', t: 'We import & monitor', d: 'Listings flow straight into the app. We keep watching your site, so price drops and new listings sync on their own.' },
    { icon: 'sparkle', n: '03', t: 'Generate branded assets', d: 'Every listing becomes on-brand graphics and short-form video - your logo, your colors, your fonts.' },
    { icon: 'share', n: '04', t: 'Share to socials', d: 'Post to Instagram, Facebook, TikTok and more in one tap - straight from web or mobile.' },
  ];
  return (
    <section id="how" className="section" style={{ background: 'var(--bg-2)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="wrap">
        <div style={{ textAlign: 'center', maxWidth: 660, margin: '0 auto 64px' }}>
          <R className="eyebrow center" as="div" style={{ justifyContent: 'center' }}>How it works</R>
          <R as="h2" delay={60} className="serif" style={{ fontSize: 'clamp(34px,4.6vw,58px)', marginTop: 18 }}>From listing to posted in four steps</R>
          <R as="p" delay={120} style={{ color: 'var(--ink-soft)', fontSize: 18, marginTop: 16 }}>No design tools. No copy-pasting. No waiting on the marketing team.</R>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }} className="steps-grid">
          {steps.map((s, i) => (
            <R key={s.n} delay={i * 90} className="card" style={{ padding: '30px 26px 32px', position: 'relative' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div style={{ width: 50, height: 50, borderRadius: 13, background: 'var(--gold-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--gold)' }}><Icon name={s.icon} size={24} /></div>
                <span className="serif" style={{ fontSize: 40, color: 'var(--line-strong)', lineHeight: 1 }}>{s.n}</span>
              </div>
              <h3 style={{ fontSize: 19, fontWeight: 700, marginTop: 22, marginBottom: 9 }}>{s.t}</h3>
              <p style={{ color: 'var(--ink-soft)', fontSize: 14.5, lineHeight: 1.6 }}>{s.d}</p>
            </R>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 980px){ .steps-grid{ grid-template-columns: 1fr 1fr !important; } } @media (max-width:540px){ .steps-grid{ grid-template-columns:1fr !important; } }`}</style>
    </section>
  );
}

/* ============ FEATURES ============ */
function Features() {
  const feats = [
    { icon: 'radar', t: 'Always-on monitoring', d: 'We watch your website 24/7 and catch new listings, price changes and status updates the moment they happen.' },
    { icon: 'palette', t: 'On-brand by default', d: 'Templates built from your logo, palette and fonts - so everything you post looks unmistakably yours.' },
    { icon: 'play', t: 'Auto-generated video', d: 'Turn photos into scroll-stopping listing reels and walkthroughs, sized for every platform.' },
    { icon: 'layers', t: 'Whole-team ready', d: 'Built for brokerages - manage every agent\u2019s listings and brand from one shared workspace.' },
    { icon: 'bolt', t: 'One-tap publishing', d: 'Connect your social accounts once and post to all of them at once, or schedule for later.' },
    { icon: 'globe', t: 'Web, iOS & Android', d: 'Start on your laptop, finish on your phone. Everything stays perfectly in sync.' },
  ];
  return (
    <section id="features" className="section">
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 56 }}>
          <div style={{ maxWidth: 560 }}>
            <R className="eyebrow" as="div">Features</R>
            <R as="h2" delay={60} className="serif" style={{ fontSize: 'clamp(34px,4.6vw,58px)', marginTop: 18 }}>Everything your marketing needs, on autopilot</R>
          </div>
          <R delay={120} as="p" style={{ color: 'var(--ink-soft)', fontSize: 16, maxWidth: 320 }}>Purpose-built for real estate teams who&rsquo;d rather sell homes than fight with design software.</R>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }} className="feat-grid">
          {feats.map((f, i) => (
            <R key={f.t} delay={(i % 3) * 80} className="feat-card" style={{ padding: '30px 28px', borderRadius: 18, border: '1px solid var(--line)', background: 'var(--card)', transition: 'transform .25s ease, box-shadow .25s ease, border-color .25s' }}>
              <div style={{ width: 48, height: 48, borderRadius: 12, border: '1px solid var(--gold-line)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--gold)', marginBottom: 20 }}><Icon name={f.icon} size={23} /></div>
              <h3 style={{ fontSize: 19, fontWeight: 700, marginBottom: 9 }}>{f.t}</h3>
              <p style={{ color: 'var(--ink-soft)', fontSize: 14.5, lineHeight: 1.62 }}>{f.d}</p>
            </R>
          ))}
        </div>
      </div>
      <style>{`
        .feat-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold-line); }
        @media (max-width: 980px){ .feat-grid{ grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 600px){ .feat-grid{ grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

/* ============ FOOTER ============ */
function Footer() {
  const cols = [
    ['Product', [['How it works', '#how']]],
    ['Platforms', [['Web app', 'https://my.realtymarketing.app']]],
    ['Company', [['About', '#'], ['Contact', '#']]],
    ['Legal', [['Privacy', '#'], ['Terms', '#']]],
  ];
  return (
    <footer style={{ background: 'var(--navy-deep)', color: 'oklch(0.86 0.008 83)' }}>
      <div className="wrap" style={{ paddingTop: 72, paddingBottom: 40 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr repeat(4, 1fr)', gap: 40 }} className="foot-grid">
          <div>
            <div style={{ marginBottom: 4 }}>
              <Logo size={20} forceLight={true} />
            </div>
            <p style={{ color: 'oklch(0.68 0.01 83)', fontSize: 14.5, marginTop: 14, maxWidth: 280, lineHeight: 1.6 }}>Your listings, marketed automatically - from your website to your socials.</p>
            <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
              {['instagram', 'facebook', 'tiktok', 'youtube', 'linkedin', 'x'].map(b => (
                <a key={b} href="#" onClick={e => e.preventDefault()} style={{ width: 36, height: 36, borderRadius: 9, border: '1px solid oklch(0.4 0.03 258)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'oklch(0.8 0.01 83)', transition: 'all .2s' }}
                   onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--gold)'; e.currentTarget.style.color = 'var(--gold)'; }}
                   onMouseLeave={e => { e.currentTarget.style.borderColor = 'oklch(0.4 0.03 258)'; e.currentTarget.style.color = 'oklch(0.8 0.01 83)'; }}>
                  <Brand name={b} size={17} />
                </a>
              ))}
            </div>
          </div>
          {cols.map(([h, links]) => (
            <div key={h}>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'oklch(0.6 0.01 83)', marginBottom: 16 }}>{h}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {links.map(([t, href]) => (
                  <a key={t} href={href} target={href.startsWith('http') ? '_blank' : undefined} rel="noopener" onClick={href === '#' ? (e => e.preventDefault()) : undefined}
                     style={{ color: 'oklch(0.78 0.01 83)', textDecoration: 'none', fontSize: 14.5, transition: 'color .2s', width: 'fit-content' }}
                     onMouseEnter={e => e.currentTarget.style.color = 'var(--gold)'} onMouseLeave={e => e.currentTarget.style.color = 'oklch(0.78 0.01 83)'}>{t}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ height: 1, background: 'oklch(0.35 0.025 258)', margin: '48px 0 26px' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 14, fontSize: 13, color: 'oklch(0.62 0.01 83)' }}>
          <span>© {new Date().getFullYear()} RealtyMarketing.App. All rights reserved.</span>
          <button className="btn btn-gold btn-sm" onClick={() => openInvite()}>Request invite</button>
        </div>
      </div>
      <style>{`@media (max-width: 860px){ .foot-grid{ grid-template-columns: 1fr 1fr !important; } }`}</style>
    </footer>
  );
}

/* ============ PLATFORMS ============ */
function Platforms() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="card" style={{ borderRadius: 26, padding: 'clamp(34px,5vw,64px)', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 48, alignItems: 'center', overflow: 'hidden', position: 'relative' }}>
          <div className="plat-copy">
            <R className="eyebrow" as="div">Anywhere you work</R>
            <R as="h2" delay={60} className="serif" style={{ fontSize: 'clamp(30px,3.8vw,48px)', marginTop: 16, marginBottom: 16 }}>One account. Web, iOS &amp; Android.</R>
            <R as="p" delay={120} style={{ color: 'var(--ink-soft)', fontSize: 17, maxWidth: 440, marginBottom: 30 }}>Manage listings from your desk and post on the move. Everything you create stays in sync across every device.</R>
            <R delay={180} style={{ display: 'flex', gap: 13, flexWrap: 'wrap' }}>
              <a href="https://my.realtymarketing.app" target="_blank" rel="noopener" className="store-btn">
                <Icon name="monitor" size={22} />
                <span><small>Open the</small><strong>Web app</strong></span>
              </a>
              <a href="#" className="store-btn" onClick={e => e.preventDefault()}>
                <Brand name="apple" size={22} />
                <span><small>Download on the</small><strong>App Store</strong></span>
              </a>
              <a href="#" className="store-btn" onClick={e => e.preventDefault()}>
                <Brand name="android" size={22} />
                <span><small>Get it on</small><strong>Google Play</strong></span>
              </a>
            </R>
          </div>
          <R delay={140} style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-end', gap: 16, position: 'relative' }}>
            <div style={{ flex: 1, maxWidth: 240 }}>
              <Placeholder label="web app screenshot" style={{ height: 168, borderRadius: 12 }} />
            </div>
            <div style={{ width: 96, flexShrink: 0 }}>
              <Placeholder label="mobile" style={{ height: 200, borderRadius: 18 }} />
            </div>
          </R>
          <div aria-hidden style={{ position: 'absolute', right: -90, top: -90, width: 320, height: 320, borderRadius: '50%', background: 'radial-gradient(circle, var(--gold-soft), transparent 68%)', pointerEvents: 'none' }} />
        </div>
      </div>
      <style>{`
        .store-btn{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); border:1px solid var(--line-strong); border-radius:13px; padding:11px 18px; transition: all .2s; background: var(--bg); }
        .store-btn:hover{ border-color: var(--ink); transform: translateY(-2px); }
        .store-btn span{ display:flex; flex-direction:column; line-height:1.15; }
        .store-btn small{ font-size:10px; color:var(--ink-faint); letter-spacing:.02em; }
        .store-btn strong{ font-size:15px; font-weight:700; }
        @media (max-width: 860px){ .card .plat-copy{} section .card{ grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

/* ============ PRICING NOTE ============ */
function Pricing() {
  return (
    <section className="section-tight">
      <div className="wrap">
        <R className="card" style={{ borderRadius: 22, padding: 'clamp(32px,5vw,56px)', textAlign: 'center', maxWidth: 760, margin: '0 auto', border: '1px solid var(--gold-line)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--gold)', background: 'var(--gold-soft)', padding: '7px 15px', borderRadius: 99, marginBottom: 22 }}>
            <Icon name="shield" size={15} /> Free during beta
          </div>
          <h2 className="serif" style={{ fontSize: 'clamp(30px,4vw,50px)', marginBottom: 16 }}>Free to use - by invite only</h2>
          <p style={{ color: 'var(--ink-soft)', fontSize: 18, maxWidth: 520, margin: '0 auto 30px', lineHeight: 1.6 }}>
            We&rsquo;re onboarding brokerages in small batches to keep quality high. Request a code and we&rsquo;ll be in touch - no credit card, no commitment.
          </p>
          <button className="btn btn-gold btn-lg" onClick={() => openInvite()}>Request your invite code <Icon name="arrow" size={18} /></button>
        </R>
      </div>
    </section>
  );
}

/* ============ FAQ ============ */
function FAQItem({ q, a, open, onClick }) {
  const ref = React.useRef(null);
  return (
    <div style={{ borderBottom: '1px solid var(--line)' }}>
      <button onClick={onClick} style={{ width: '100%', background: 'none', border: 'none', cursor: 'pointer', padding: '24px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, textAlign: 'left', fontFamily: 'inherit', color: 'var(--ink)' }}>
        <span style={{ fontSize: 'clamp(17px,1.7vw,20px)', fontWeight: 600 }}>{q}</span>
        <span style={{ flexShrink: 0, color: 'var(--gold)', transition: 'transform .3s', transform: open ? 'rotate(180deg)' : 'none' }}><Icon name="chevron" size={22} /></span>
      </button>
      <div style={{ maxHeight: open ? (ref.current ? ref.current.scrollHeight + 4 : 400) : 0, overflow: 'hidden', transition: 'max-height .38s cubic-bezier(.3,.7,.3,1)' }}>
        <p ref={ref} style={{ color: 'var(--ink-soft)', fontSize: 16, lineHeight: 1.65, paddingBottom: 26, maxWidth: 720 }}>{a}</p>
      </div>
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const qs = [
    ['How does importing from my website work?', 'Paste your agency or brokerage URL and our system scans your site, finds your property pages, and pulls in photos, price, address, beds, baths and description automatically. Most sites are ready in a couple of minutes.'],
    ['Which website platforms do you support?', 'We work with the vast majority of real estate websites - including custom builds, common CMS platforms and IDX-powered sites. If we ever can\u2019t read a page automatically, our team helps you get it connected.'],
    ['Do my graphics use my own branding?', 'Yes. Templates are built around your logo, colours and fonts, so every graphic and video is unmistakably yours - not a generic template.'],
    ['What happens when a listing changes?', 'We keep monitoring your website after import. New listings, price drops and status changes (like "sold") are detected automatically, so you can post an update without lifting a finger.'],
    ['Is it really free?', 'Yes - RealtyMarketing.App is free during our beta. It\u2019s currently invite-only so we can onboard brokerages carefully. Request a code to get started.'],
    ['Can my whole team use one account?', 'Absolutely. It\u2019s built for brokerages and teams - manage every agent\u2019s listings, branding and posting from one shared workspace.'],
  ];
  return (
    <section id="faq" className="section" style={{ background: 'var(--bg-2)', borderTop: '1px solid var(--line)' }}>
      <div className="wrap" style={{ maxWidth: 900 }}>
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <R className="eyebrow center" as="div" style={{ justifyContent: 'center' }}>FAQ</R>
          <R as="h2" delay={60} className="serif" style={{ fontSize: 'clamp(34px,4.6vw,58px)', marginTop: 18 }}>Questions, answered</R>
        </div>
        <R>
          {qs.map(([q, a], i) => <FAQItem key={i} q={q} a={a} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />)}
        </R>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, HowItWorks, Features, Platforms, Pricing, FAQ, Footer, openInvite });
