// Landing page — dual-split hero, two audiences, pricing, CTA
const { useEffect: useLE, useRef: useRef, useState: useState, useCallback: useCallback } = React;

/* ─── POC contact modal ─── */
function ContactModal({ open, onClose }) {
  const ROLES = ['Valuer','Broker / Agent','Developer','REIT','Commercial Bank','Mortgage Originator','Regulator','Other'];
  const VOLUMES = ['< 10 / month','10 – 50 / month','50 – 200 / month','200 – 1,000 / month','1,000+ / month'];
  const empty = { name:'', company:'', role:'', email:'', phone:'', volume:'', message:'' };
  const [form, setForm] = useState(empty);
  const [sent, setSent] = useState(false);
  const [errors, setErrors] = useState({});

  useLE(() => {
    if (open) { document.body.style.overflow = 'hidden'; }
    else { document.body.style.overflow = ''; setSent(false); setForm(empty); setErrors({}); }
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  useLE(() => {
    const handler = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [onClose]);

  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const validate = () => {
    const e = {};
    if (!form.name.trim())    e.name    = 'Required';
    if (!form.company.trim()) e.company = 'Required';
    if (!form.role)           e.role    = 'Required';
    if (!form.email.trim() || !/\S+@\S+\.\S+/.test(form.email)) e.email = 'Valid email required';
    return e;
  };

  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState('');

  const submit = async (ev) => {
    ev.preventDefault();
    setSubmitError('');
    const e = validate();
    if (Object.keys(e).length) { setErrors(e); return; }
    setSubmitting(true);
    try {
      const payload = {
        name:    form.name,
        company: form.company,
        role:    form.role === 'Other' ? (form.roleOther || 'Other') : form.role,
        email:   form.email,
        phone:   form.phone,
        volume:  form.volume,
        message: form.message,
      };
      const res = await fetch('https://formspree.io/f/xgorzrpy', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (res.ok) { setSent(true); }
      else { setSubmitError("We couldn't submit your request just now. Please try again in a moment."); }
    } catch (_) {
      setSubmitError("Network error — please check your connection and try again.");
    } finally {
      setSubmitting(false);
    }
  };

  if (!open) return null;

  return (
    <div className="ld-modal-backdrop" onClick={onClose}>
      <div className="ld-modal" onClick={e => e.stopPropagation()}>

        {/* ── Left dark panel ── */}
        <div className="ld-modal-side">
          <button className="ld-modal-close-side" onClick={onClose} aria-label="Close">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
          </button>
          <LogoMarkFooter size={40}/>
          <div className="ld-modal-side-tag">Early access</div>
          <h2 className="ld-modal-side-h">Live valuation. Today's call.</h2>
          <ul className="ld-modal-bullets">
            <li><span className="ld-mb-dot"/><div><strong>Quick reply</strong> — we'll get back to you as soon as possible.</div></li>
            <li><span className="ld-mb-dot"/><div><strong>20 minutes</strong> — no prep, no slides.</div></li>
            <li><span className="ld-mb-dot"/><div><strong>Your property</strong> — real Lagos asset, priced live.</div></li>
          </ul>
        </div>

        {/* ── Right form panel ── */}
        <div className="ld-modal-body">
          {sent ? (
            <div className="ld-modal-thanks">
              <div className="ld-modal-thanks-ic">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 5 5L20 7"/></svg>
              </div>
              <h3>You're on the list.</h3>
              <p>We'll reach out to <strong>{form.email}</strong> as soon as possible to book your POC session.</p>
              <button className="ld-modal-submit" onClick={onClose} style={{marginTop:8}}>Close</button>
            </div>
          ) : (
            <>
              <div className="ld-modal-body-hd">
                <div className="ld-modal-body-title">Request POC access</div>
                <div className="ld-modal-body-sub">Takes 60 seconds. No commitment.</div>
              </div>

              <form className="ld-modal-form" onSubmit={submit} noValidate>
                {/* Role chips */}
                <div className="ld-mf-block">
                  <label className="ld-mf-label">I am a <span>*</span></label>
                  <div className="ld-mf-chips">
                    {ROLES.map(r => (
                      <button key={r} type="button"
                        className={`ld-mf-chip${form.role===r?' active':''}`}
                        onClick={() => setForm(f => ({...f, role:r}))}>
                        {r}
                      </button>
                    ))}
                    {form.role === 'Other' && (
                      <input
                        className="ld-mf-input ld-mf-other-input"
                        type="text"
                        placeholder="Describe your role…"
                        value={form.roleOther || ''}
                        onChange={e => setForm(f => ({...f, roleOther: e.target.value}))}
                        autoFocus
                      />
                    )}
                  </div>
                  {errors.role && <div className="ld-mf-err">{errors.role}</div>}
                </div>

                {/* Name + Company inline */}
                <div className="ld-mf-inline">
                  <div className="ld-mf-block">
                    <label className="ld-mf-label">Full name <span>*</span></label>
                    <input className={`ld-mf-input${errors.name?' err':''}`} type="text" placeholder="Tunde Adeyemi" value={form.name} onChange={set('name')}/>
                    {errors.name && <div className="ld-mf-err">{errors.name}</div>}
                  </div>
                  <div className="ld-mf-block">
                    <label className="ld-mf-label">Company <span>*</span></label>
                    <input className={`ld-mf-input${errors.company?' err':''}`} type="text" placeholder="First Bank Nigeria" value={form.company} onChange={set('company')}/>
                    {errors.company && <div className="ld-mf-err">{errors.company}</div>}
                  </div>
                </div>

                {/* Email + Phone inline */}
                <div className="ld-mf-inline">
                  <div className="ld-mf-block">
                    <label className="ld-mf-label">Work email <span>*</span></label>
                    <input className={`ld-mf-input${errors.email?' err':''}`} type="email" placeholder="you@company.com" value={form.email} onChange={set('email')}/>
                    {errors.email && <div className="ld-mf-err">{errors.email}</div>}
                  </div>
                  <div className="ld-mf-block">
                    <label className="ld-mf-label">Phone <span style={{color:'var(--slate-400)',fontWeight:400}}>(optional)</span></label>
                    <input className="ld-mf-input" type="tel" placeholder="+234 801 000 0000" value={form.phone} onChange={set('phone')}/>
                  </div>
                </div>

                {/* Volume */}
                <div className="ld-mf-block">
                  <label className="ld-mf-label">Properties valued per month</label>
                  <div className="ld-mf-chips">
                    {VOLUMES.map(v => (
                      <button key={v} type="button"
                        className={`ld-mf-chip${form.volume===v?' active':''}`}
                        onClick={() => setForm(f => ({...f, volume:v}))}>
                        {v}
                      </button>
                    ))}
                  </div>
                </div>

                {/* Message */}
                <div className="ld-mf-block">
                  <label className="ld-mf-label">Anything else? <span style={{color:'var(--slate-400)',fontWeight:400}}>(optional)</span></label>
                  <textarea
                    className="ld-mf-input ld-mf-textarea"
                    placeholder="e.g. We need to revalue 800 collateral properties ahead of a CBN audit…"
                    value={form.message}
                    onChange={set('message')}
                    rows={3}
                  />
                </div>

                {submitError && <div className="ld-modal-submit-err">{submitError}</div>}
                <button type="submit" className="ld-modal-submit" disabled={submitting}>
                  {submitting ? 'Sending…' : <>Request POC access <Icons.arrow size={14}/></>}
                </button>
                <p className="ld-modal-legal">By submitting you agree to be contacted by the Groma team. No spam, ever.</p>
              </form>
            </>
          )}
        </div>

      </div>
    </div>
  );
}

/* ─── scroll-reveal hook ─── */
function useReveal() {
  useLE(() => {
    const els = document.querySelectorAll('.reveal');
    if (!('IntersectionObserver' in window)) { els.forEach(e => e.classList.add('revealed')); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(en => { if (en.isIntersecting) { en.target.classList.add('revealed'); io.unobserve(en.target); } });
    }, { threshold: 0.12 });
    els.forEach(e => io.observe(e));
    return () => io.disconnect();
  }, []);
}

function Nav({ openForm }) {
  const [mobileOpen, setMobileOpen] = useState(false);
  const closeMobile = () => setMobileOpen(false);

  useLE(() => {
    if (!mobileOpen) return;
    const onResize = () => { if (window.innerWidth > 960) setMobileOpen(false); };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, [mobileOpen]);

  return (
    <>
      <nav className="ld-nav">
        <a className="ld-nav-logo" href="#"><LogoMark size={44}/>Groma <em>intelligence</em></a>
        <div className="ld-nav-links">
          <a href="#platform">Platform</a>
          <a href="#how">How it works</a>
          <a href="#who">Who it's for</a>
          <a href="#pricing">Pricing</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="ld-nav-spacer"/>
        <button className="ld-btn" onClick={openForm}>Sign in</button>
        <button className="ld-btn primary" onClick={openForm}>Book a demo <Icons.arrow size={13}/></button>
        <button className="ld-nav-toggle" aria-label="Menu" onClick={() => setMobileOpen(o => !o)}>
          {mobileOpen
            ? <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
            : <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>}
        </button>
      </nav>
      {mobileOpen && (
        <div className="ld-nav-mobile" onClick={closeMobile}>
          <a href="#platform" onClick={closeMobile}>Platform</a>
          <a href="#how" onClick={closeMobile}>How it works</a>
          <a href="#who" onClick={closeMobile}>Who it's for</a>
          <a href="#pricing" onClick={closeMobile}>Pricing</a>
          <a href="#contact" onClick={closeMobile}>Contact</a>
          <button className="ld-btn primary" onClick={() => { closeMobile(); openForm(); }}>Book a demo <Icons.arrow size={13}/></button>
        </div>
      )}
    </>
  );
}

function AddressWidget({ openForm }) {
  const [val, setVal] = useState('');
  const [focused, setFocused] = useState(false);
  const suggestions = [
    'Plot 42, Banana Island, Ikoyi',
    '15 Admiralty Way, Lekki Phase 1',
    '7 Kofo Abayomi St, Victoria Island',
  ];
  const show = focused && val.length === 0;
  return (
    <div className="ld-addr-wrap">
      <div className={`ld-addr-box${focused ? ' focused' : ''}`}>
        <Icons.pin size={16}/>
        <input
          type="text"
          placeholder="Enter a Lagos address to value…"
          value={val}
          onChange={e => setVal(e.target.value)}
          onFocus={() => setFocused(true)}
          onBlur={() => setTimeout(() => setFocused(false), 150)}
        />
        <button className="ld-addr-go" onClick={openForm}>
          Value it <Icons.arrow size={13}/>
        </button>
      </div>
      {show && (
        <div className="ld-addr-suggestions">
          <div className="ld-addr-sugg-label">Try an example</div>
          {suggestions.map(s => (
            <div key={s} className="ld-addr-sugg-item" onMouseDown={() => setVal(s)}>
              <Icons.pin size={13}/>{s}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

/* ── Hero left illustration: AVM valuation flow ── */
function HeroLeftAnim() {
  return (
    <svg className="ld-hero-anim" viewBox="0 0 380 210" fill="none">
      {/* Map background */}
      <rect x="0" y="0" width="380" height="210" rx="12" fill="#f0fdf4" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.4s" begin="0.1s" fill="freeze"/>
      </rect>
      {/* LGA zone polygons fading in */}
      <polygon points="30,40 110,20 150,70 120,110 50,100" fill="#059669" opacity="0">
        <animate attributeName="opacity" values="0;0.12" dur="0.5s" begin="0.3s" fill="freeze"/>
      </polygon>
      <polygon points="110,20 200,30 220,80 150,70" fill="#047857" opacity="0">
        <animate attributeName="opacity" values="0;0.18" dur="0.5s" begin="0.4s" fill="freeze"/>
      </polygon>
      <polygon points="150,70 220,80 240,130 170,140 120,110" fill="#059669" opacity="0">
        <animate attributeName="opacity" values="0;0.14" dur="0.5s" begin="0.5s" fill="freeze"/>
      </polygon>
      <polygon points="200,30 290,20 310,80 220,80" fill="#34d399" opacity="0">
        <animate attributeName="opacity" values="0;0.12" dur="0.5s" begin="0.4s" fill="freeze"/>
      </polygon>
      <polygon points="220,80 310,80 330,140 240,130" fill="#047857" opacity="0">
        <animate attributeName="opacity" values="0;0.1" dur="0.5s" begin="0.5s" fill="freeze"/>
      </polygon>
      <polygon points="50,100 120,110 170,140 150,180 40,170" fill="#059669" opacity="0">
        <animate attributeName="opacity" values="0;0.15" dur="0.5s" begin="0.6s" fill="freeze"/>
      </polygon>
      <polygon points="170,140 240,130 260,175 190,190 150,180" fill="#34d399" opacity="0">
        <animate attributeName="opacity" values="0;0.1" dur="0.5s" begin="0.6s" fill="freeze"/>
      </polygon>
      <polygon points="240,130 330,140 345,190 260,175" fill="#059669" opacity="0">
        <animate attributeName="opacity" values="0;0.13" dur="0.5s" begin="0.6s" fill="freeze"/>
      </polygon>

      {/* Zone borders */}
      {[
        "30,40 110,20 150,70 120,110 50,100",
        "110,20 200,30 220,80 150,70",
        "150,70 220,80 240,130 170,140 120,110",
        "200,30 290,20 310,80 220,80",
        "220,80 310,80 330,140 240,130",
        "50,100 120,110 170,140 150,180 40,170",
        "170,140 240,130 260,175 190,190 150,180",
        "240,130 330,140 345,190 260,175",
      ].map((pts, i) => (
        <polygon key={i} points={pts} fill="none" stroke="#059669" strokeWidth="0.8" opacity="0">
          <animate attributeName="opacity" values="0;0.4" dur="0.3s" begin={`${0.7+i*0.05}s`} fill="freeze"/>
        </polygon>
      ))}

      {/* Small comps dots */}
      {[[80,75],[130,90],[175,115],[95,145],[145,155],[200,105],[250,90],[280,145],[310,110],[230,160]].map(([cx,cy],i) => (
        <circle key={i} cx={cx} cy={cy} r="3.5" fill="#059669" opacity="0">
          <animate attributeName="opacity" values="0;0.5" dur="0.2s" begin={`${0.9+i*0.06}s`} fill="freeze"/>
          <animate attributeName="r" values="0;3.5" dur="0.25s" begin={`${0.9+i*0.06}s`} fill="freeze"/>
        </circle>
      ))}

      {/* Target plot highlight */}
      <rect x="157" y="96" width="28" height="22" rx="3" fill="#059669" opacity="0">
        <animate attributeName="opacity" values="0;0.35" dur="0.4s" begin="1.6s" fill="freeze"/>
      </rect>
      <rect x="157" y="96" width="28" height="22" rx="3" fill="none" stroke="#047857" strokeWidth="1.5" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="1.7s" fill="freeze"/>
      </rect>

      {/* Pin drop onto plot */}
      <g opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.2s" begin="1.8s" fill="freeze"/>
        <animateTransform attributeName="transform" type="translate" values="0,-25;0,0" dur="0.35s" begin="1.8s" fill="freeze"/>
        <path d="M171 88 C167 88 163 92 163 97 C163 104 171 114 171 114 C171 114 179 104 179 97 C179 92 175 88 171 88Z" fill="#047857"/>
        <circle cx="171" cy="97" r="3.5" fill="white"/>
      </g>
      {/* Pin pulse */}
      <circle cx="171" cy="108" r="0" fill="none" stroke="#059669" strokeWidth="1.2">
        <animate attributeName="r" values="0;16" dur="1.1s" begin="2.1s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.7;0" dur="1.1s" begin="2.1s" repeatCount="indefinite"/>
      </circle>

      {/* AVM result card */}
      <rect x="215" y="70" width="140" height="90" rx="8" fill="white" stroke="#d1fae5" strokeWidth="1.5" opacity="0"
        style={{filter:'drop-shadow(0 4px 12px rgba(5,150,105,0.15))'}}>
        <animate attributeName="opacity" values="0;1" dur="0.4s" begin="2.2s" fill="freeze"/>
      </rect>
      {/* Card header bar */}
      <rect x="215" y="70" width="140" height="20" rx="8" fill="#059669" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="2.2s" fill="freeze"/>
      </rect>
      <rect x="215" y="82" width="140" height="8" rx="0" fill="#059669" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="2.2s" fill="freeze"/>
      </rect>
      <text x="227" y="83" fontSize="7" fill="white" fontFamily="monospace" fontWeight="600" letterSpacing="0.5" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="2.3s" fill="freeze"/>
        AVM RESULT · IKOYI
      </text>
      {/* Valuation figure */}
      <text x="227" y="106" fontSize="18" fill="#047857" fontWeight="700" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.4s" begin="2.5s" fill="freeze"/>
        ₦ 42.5M
      </text>
      <text x="227" y="117" fontSize="7.5" fill="#6b7280" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="2.7s" fill="freeze"/>
        Mid-point valuation
      </text>
      {/* Confidence bar track */}
      <rect x="227" y="124" width="116" height="5" rx="2.5" fill="#d1fae5" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="2.7s" fill="freeze"/>
      </rect>
      {/* Confidence bar fill */}
      <rect x="227" y="124" width="0" height="5" rx="2.5" fill="#059669">
        <animate attributeName="width" values="0;109" dur="0.8s" begin="2.8s" fill="freeze"/>
      </rect>
      <text x="227" y="147" fontSize="7" fill="#059669" fontWeight="600" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="3.4s" fill="freeze"/>
        94% confidence
      </text>
      <text x="330" y="147" fontSize="7" fill="#6b7280" textAnchor="end" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="3.4s" fill="freeze"/>
        3:47
      </text>

      {/* Timer label bottom-left */}
      <rect x="12" y="182" width="90" height="20" rx="5" fill="#047857" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="3.5s" fill="freeze"/>
      </rect>
      <text x="57" y="195" fontSize="8" fill="white" textAnchor="middle" fontWeight="600" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="3.6s" fill="freeze"/>
        ⏱ Under 4 minutes
      </text>
    </svg>
  );
}

/* ── Hero right illustration: collateral book revaluation ── */
function HeroRightAnim() {
  const rows = [
    { id:'LG-00124', addr:'15 Bourdillon Rd, Ikoyi', val:'₦185M', ltv:'58%', ok:true },
    { id:'LG-00891', addr:'7 Admiralty Way, VI',     val:'₦94M',  ltv:'72%', ok:true },
    { id:'LG-01204', addr:'22 Awolowo Rd, Ikoyi',    val:'₦210M', ltv:'61%', ok:true },
    { id:'LG-02011', addr:'Plot 4, Lekki Phase 1',   val:'₦67M',  ltv:'89%', ok:false },
    { id:'LG-03340', addr:'8 Glover Rd, Ikoyi',      val:'₦130M', ltv:'55%', ok:true },
  ];
  return (
    <svg className="ld-hero-anim" viewBox="0 0 380 210" fill="none">
      {/* Card background */}
      <rect x="0" y="0" width="380" height="210" rx="12" fill="#0f1f16" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.4s" begin="0.1s" fill="freeze"/>
      </rect>

      {/* Header */}
      <rect x="0" y="0" width="380" height="32" rx="12" fill="#064e3b" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="0.2s" fill="freeze"/>
      </rect>
      <rect x="0" y="20" width="380" height="12" rx="0" fill="#064e3b" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="0.2s" fill="freeze"/>
      </rect>
      <text x="16" y="20" fontSize="8" fill="#34d399" fontFamily="monospace" fontWeight="600" letterSpacing="0.8" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="0.3s" fill="freeze"/>
        ACTIVE COLLATERAL BOOK
      </text>
      {/* Live dot */}
      <circle cx="355" cy="16" r="4" fill="#34d399" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="0.4s" fill="freeze"/>
        <animate attributeName="opacity" values="1;0.2;1" dur="1.4s" begin="0.8s" repeatCount="indefinite"/>
      </circle>

      {/* Column headers */}
      {['ID','ADDRESS','VALUE','LTV','STATUS'].map((h, i) => {
        const x = [14,70,208,272,318][i];
        return (
          <text key={i} x={x} y="46" fontSize="7" fill="#4ade80" fontFamily="monospace" fontWeight="600" letterSpacing="0.5" opacity="0">
            <animate attributeName="opacity" values="0;0.7" dur="0.3s" begin={`${0.4+i*0.05}s`} fill="freeze"/>
            {h}
          </text>
        );
      })}
      <line x1="12" y1="50" x2="368" y2="50" stroke="#1a3a28" strokeWidth="1" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="0.6s" fill="freeze"/>
      </line>

      {/* Table rows */}
      {rows.map((r, i) => {
        const y = 62 + i * 29;
        const delay = 0.7 + i * 0.22;
        return (
          <g key={i} opacity="0">
            <animate attributeName="opacity" values="0;1" dur="0.3s" begin={`${delay}s`} fill="freeze"/>
            {/* Row bg */}
            <rect x="8" y={y-10} width="364" height="24" rx="4" fill={r.ok ? "#0d2b1e" : "#2d1a0e"} opacity="0.7"/>
            <text x="14" y={y+4} fontSize="7.5" fill="#34d399" fontFamily="monospace">{r.id}</text>
            <text x="70" y={y+4} fontSize="7.5" fill="#9ca3af">{r.addr}</text>
            <text x="208" y={y+4} fontSize="8" fill="white" fontWeight="600">{r.val}</text>
            <text x="272" y={y+4} fontSize="8" fill={r.ok ? "#34d399" : "#f97316"} fontWeight="600">{r.ltv}</text>
            {/* Status badge */}
            <rect x="312" y={y-6} width={r.ok ? 50 : 54} height="16" rx="8" fill={r.ok ? "#064e3b" : "#431407"}/>
            <text x={r.ok ? 337 : 339} y={y+4} fontSize="7" fill={r.ok ? "#34d399" : "#f97316"} textAnchor="middle" fontWeight="600">
              {r.ok ? '✓ OK' : '⚠ FLAG'}
            </text>
          </g>
        );
      })}

      {/* Divider */}
      <line x1="12" y1="210" x2="368" y2="210" stroke="#1a3a28" strokeWidth="1" opacity="0">
        <animate attributeName="opacity" values="0;0.5" dur="0.3s" begin="1.9s" fill="freeze"/>
      </line>

      {/* Progress bar */}
      <rect x="12" y="194" width="240" height="6" rx="3" fill="#1a3a28" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="1.9s" fill="freeze"/>
      </rect>
      <rect x="12" y="194" width="0" height="6" rx="3" fill="#059669">
        <animate attributeName="width" values="0;221" dur="1.2s" begin="2.0s" fill="freeze"/>
      </rect>

      {/* Counter */}
      <text x="260" y="200" fontSize="8" fill="#34d399" fontFamily="monospace" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="2.0s" fill="freeze"/>
        2,847 assets
      </text>
      <text x="368" y="200" fontSize="7.5" fill="#4b5563" textAnchor="end" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="2.1s" fill="freeze"/>
        2 hrs ago
      </text>
    </svg>
  );
}

function Hero({ openForm }) {
  return (
    <section className="ld-hero">
      <div className="ld-hero-left">
        <div className="ld-eyebrow">For real-estate firms</div>
        <h1 className="ld-hero-h1">Price a Lagos plot in <em>under four minutes.</em></h1>
        <p className="ld-hero-sub">Groma turns title deeds, satellite passes, and every listing in the country into a defensible valuation you can put in front of a client — same day.</p>
        <HeroLeftAnim/>
        <AddressWidget openForm={openForm}/>
        <div className="ld-aud-row">
          <span className="ld-aud">Valuers</span>
          <span className="ld-aud">Brokerages</span>
          <span className="ld-aud">Developers</span>
          <span className="ld-aud">REITs</span>
        </div>
        <div className="ld-hero-ctas">
          <button className="ld-btn primary" onClick={openForm}>Request access <Icons.arrow size={13}/></button>
          <button className="ld-btn" onClick={openForm}>Open the platform</button>
        </div>
      </div>
      <div className="ld-hero-right">
        <div className="ld-eyebrow">For banks &amp; lenders</div>
        <h1 className="ld-hero-h1">Revalue your entire book <em>in an afternoon.</em></h1>
        <p className="ld-hero-sub">Monitor LTV drift, catch stalled collateral, and issue regulator-grade valuations across thousands of properties without adding a single analyst.</p>
        <HeroRightAnim/>
        <div className="ld-aud-row">
          <span className="ld-aud">Commercial banks</span>
          <span className="ld-aud">Mortgage originators</span>
          <span className="ld-aud">Regulators</span>
        </div>
        <div className="ld-hero-ctas">
          <button className="ld-btn gold" onClick={openForm}>Talk to sales <Icons.arrow size={13}/></button>
          <button className="ld-btn dark-invert" onClick={openForm}>See portfolio view</button>
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  const stats = [
    { n: '14',         l: 'Lagos Metro LGAs covered' },
    { n: 'Title + sat.', l: 'Combined data sources' },
    { n: 'Live',       l: 'Market signals' },
    { n: 'Minutes',    l: 'Per valuation, not days' },
  ];
  return (
    <div className="ld-trust reveal">
      <div className="ld-trust-stats">
        {stats.map(s => (
          <div key={s.l} className="ld-trust-stat">
            <div className="ld-trust-num">{s.n}</div>
            <div className="ld-trust-lbl">{s.l}</div>
          </div>
        ))}
      </div>
      <div className="ld-trust-divider"/>
    </div>
  );
}

/* ── How It Works animated icons ── */
function HowIcon1() { /* Enter an address — map with pin dropping */
  return (
    <svg className="ld-feat-anim" viewBox="0 0 160 120" fill="none">
      {/* Map base */}
      <rect x="20" y="30" width="120" height="80" rx="6" fill="var(--gold-50)" stroke="var(--gold-300)" strokeWidth="1.5" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.4s" begin="0.1s" fill="freeze"/>
      </rect>
      {/* Grid lines */}
      <line x1="20" y1="62" x2="140" y2="62" stroke="var(--gold-300)" strokeWidth="0.8" strokeDasharray="4 3" opacity="0">
        <animate attributeName="opacity" values="0;0.6" dur="0.3s" begin="0.4s" fill="freeze"/>
      </line>
      <line x1="20" y1="82" x2="140" y2="82" stroke="var(--gold-300)" strokeWidth="0.8" strokeDasharray="4 3" opacity="0">
        <animate attributeName="opacity" values="0;0.6" dur="0.3s" begin="0.5s" fill="freeze"/>
      </line>
      <line x1="60" y1="30" x2="60" y2="110" stroke="var(--gold-300)" strokeWidth="0.8" strokeDasharray="4 3" opacity="0">
        <animate attributeName="opacity" values="0;0.6" dur="0.3s" begin="0.4s" fill="freeze"/>
      </line>
      <line x1="100" y1="30" x2="100" y2="110" stroke="var(--gold-300)" strokeWidth="0.8" strokeDasharray="4 3" opacity="0">
        <animate attributeName="opacity" values="0;0.6" dur="0.3s" begin="0.5s" fill="freeze"/>
      </line>
      {/* Area highlight */}
      <rect x="55" y="56" width="50" height="32" rx="3" fill="var(--gold-500)" opacity="0">
        <animate attributeName="opacity" values="0;0.18" dur="0.4s" begin="0.6s" fill="freeze"/>
      </rect>
      {/* Pin shadow */}
      <ellipse cx="80" cy="112" rx="8" ry="3" fill="var(--gold-700)" opacity="0">
        <animate attributeName="opacity" values="0;0.2" dur="0.3s" begin="0.9s" fill="freeze"/>
      </ellipse>
      {/* Pin drop */}
      <g opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.2s" begin="0.8s" fill="freeze"/>
        <animateTransform attributeName="transform" type="translate" values="0,-30;0,0" dur="0.4s" begin="0.8s" fill="freeze"/>
        <path d="M80 58 C74 58 69 63 69 69 C69 78 80 90 80 90 C80 90 91 78 91 69 C91 63 86 58 80 58Z" fill="var(--gold-700)"/>
        <circle cx="80" cy="69" r="4" fill="white"/>
      </g>
      {/* Pulse ring */}
      <circle cx="80" cy="76" r="0" fill="none" stroke="var(--gold-500)" strokeWidth="1.5" opacity="0">
        <animate attributeName="r" values="0;18" dur="1.2s" begin="1.2s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.7;0" dur="1.2s" begin="1.2s" repeatCount="indefinite"/>
      </circle>
    </svg>
  );
}

function HowIcon2() { /* Pull every signal — layered data streams converging */
  return (
    <svg className="ld-feat-anim" viewBox="0 0 160 120" fill="none">
      {/* Satellite icon top-left */}
      <g opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="0.1s" fill="freeze"/>
        <rect x="14" y="12" width="14" height="10" rx="2" fill="var(--gold-700)"/>
        <line x1="10" y1="10" x2="14" y2="14" stroke="var(--gold-300)" strokeWidth="1.5"/>
        <line x1="28" y1="10" x2="28" y2="14" stroke="var(--gold-300)" strokeWidth="1.5"/>
        <rect x="8" y="8" width="4" height="4" rx="1" fill="var(--gold-300)"/>
        <rect x="26" y="8" width="4" height="4" rx="1" fill="var(--gold-300)"/>
      </g>
      {/* Listing icon top-right */}
      <g opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="0.3s" fill="freeze"/>
        <rect x="130" y="10" width="18" height="22" rx="2" fill="var(--gold-50)" stroke="var(--gold-500)" strokeWidth="1.5"/>
        <line x1="134" y1="17" x2="144" y2="17" stroke="var(--gold-500)" strokeWidth="1.2"/>
        <line x1="134" y1="21" x2="144" y2="21" stroke="var(--gold-300)" strokeWidth="1.2"/>
        <line x1="134" y1="25" x2="140" y2="25" stroke="var(--gold-300)" strokeWidth="1.2"/>
      </g>
      {/* Comps icon left */}
      <g opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="0.2s" fill="freeze"/>
        <rect x="10" y="52" width="22" height="16" rx="3" fill="var(--gold-500)" opacity="0.3"/>
        <text x="21" y="63" fontSize="7" fill="var(--gold-900)" textAnchor="middle" fontFamily="monospace">COMP</text>
      </g>
      {/* Stream lines converging to center circle */}
      <line x1="28" y1="22" x2="68" y2="58" stroke="var(--gold-300)" strokeWidth="1.2" strokeDasharray="60" strokeDashoffset="60">
        <animate attributeName="strokeDashoffset" values="60;0" dur="0.5s" begin="0.4s" fill="freeze"/>
      </line>
      <line x1="132" y1="21" x2="94" y2="58" stroke="var(--gold-300)" strokeWidth="1.2" strokeDasharray="60" strokeDashoffset="60">
        <animate attributeName="strokeDashoffset" values="60;0" dur="0.5s" begin="0.5s" fill="freeze"/>
      </line>
      <line x1="32" y1="60" x2="68" y2="65" stroke="var(--gold-300)" strokeWidth="1.2" strokeDasharray="40" strokeDashoffset="40">
        <animate attributeName="strokeDashoffset" values="40;0" dur="0.4s" begin="0.5s" fill="freeze"/>
      </line>
      {/* Central hub */}
      <circle cx="81" cy="65" r="0" fill="var(--gold-500)" opacity="0.25">
        <animate attributeName="r" values="0;22" dur="0.4s" begin="0.8s" fill="freeze"/>
      </circle>
      <circle cx="81" cy="65" r="0" fill="var(--gold-700)">
        <animate attributeName="r" values="0;10" dur="0.3s" begin="0.9s" fill="freeze"/>
      </circle>
      <text x="81" y="69" fontSize="8" fill="white" textAnchor="middle" fontWeight="bold" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.2s" begin="1.1s" fill="freeze"/>
        90s
      </text>
      {/* Pulse */}
      <circle cx="81" cy="65" r="10" fill="none" stroke="var(--gold-500)" strokeWidth="1">
        <animate attributeName="r" values="10;28" dur="1.2s" begin="1.3s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.6;0" dur="1.2s" begin="1.3s" repeatCount="indefinite"/>
      </circle>
      {/* "90s" label */}
      <text x="81" y="100" fontSize="9" fill="var(--gold-700)" textAnchor="middle" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="1.2s" fill="freeze"/>
        under 90 seconds
      </text>
    </svg>
  );
}

function HowIcon3() { /* AVM scores — confidence bar + valuation range */
  return (
    <svg className="ld-feat-anim" viewBox="0 0 160 120" fill="none">
      {/* House silhouette */}
      <path d="M50 95 L50 60 L80 38 L110 60 L110 95 Z" fill="var(--gold-50)" stroke="var(--gold-300)" strokeWidth="1.5" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.4s" begin="0.1s" fill="freeze"/>
      </path>
      <path d="M68 95 L68 76 L92 76 L92 95 Z" fill="var(--gold-300)" opacity="0">
        <animate attributeName="opacity" values="0;0.5" dur="0.3s" begin="0.4s" fill="freeze"/>
      </path>
      {/* Value badge */}
      <rect x="52" y="14" width="56" height="20" rx="5" fill="var(--gold-700)" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="0.6s" fill="freeze"/>
      </rect>
      <text x="80" y="28" fontSize="9" fill="white" textAnchor="middle" fontWeight="bold" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="0.7s" fill="freeze"/>
        ₦42.5M
      </text>
      {/* Confidence bar track */}
      <rect x="28" y="102" width="104" height="6" rx="3" fill="var(--gold-50)" stroke="var(--gold-300)" strokeWidth="1" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="0.8s" fill="freeze"/>
      </rect>
      {/* Confidence bar fill */}
      <rect x="28" y="102" width="0" height="6" rx="3" fill="var(--gold-500)">
        <animate attributeName="width" values="0;94" dur="0.7s" begin="0.9s" fill="freeze"/>
      </rect>
      {/* Confidence label */}
      <text x="28" y="116" fontSize="7.5" fill="var(--gold-700)" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="1.4s" fill="freeze"/>
        Confidence
      </text>
      <text x="126" y="116" fontSize="7.5" fill="var(--gold-700)" textAnchor="end" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="1.4s" fill="freeze"/>
        94%
      </text>
      {/* Range band */}
      <line x1="44" y1="14" x2="44" y2="34" stroke="var(--gold-300)" strokeWidth="1.5" opacity="0">
        <animate attributeName="opacity" values="0;0.8" dur="0.3s" begin="0.6s" fill="freeze"/>
      </line>
      <line x1="116" y1="14" x2="116" y2="34" stroke="var(--gold-300)" strokeWidth="1.5" opacity="0">
        <animate attributeName="opacity" values="0;0.8" dur="0.3s" begin="0.6s" fill="freeze"/>
      </line>
      <line x1="44" y1="24" x2="52" y2="24" stroke="var(--gold-300)" strokeWidth="1.5" opacity="0">
        <animate attributeName="opacity" values="0;0.8" dur="0.3s" begin="0.6s" fill="freeze"/>
      </line>
      <line x1="108" y1="24" x2="116" y2="24" stroke="var(--gold-300)" strokeWidth="1.5" opacity="0">
        <animate attributeName="opacity" values="0;0.8" dur="0.3s" begin="0.6s" fill="freeze"/>
      </line>
    </svg>
  );
}

function HowIcon4() { /* Export signed PDF — document stamping */
  return (
    <svg className="ld-feat-anim" viewBox="0 0 160 120" fill="none">
      {/* Document */}
      <rect x="35" y="8" width="90" height="108" rx="6" fill="var(--paper)" stroke="var(--gold-300)" strokeWidth="1.5" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.4s" begin="0.1s" fill="freeze"/>
      </rect>
      {/* Fold corner */}
      <path d="M105 8 L125 28 L105 28 Z" fill="var(--gold-50)" stroke="var(--gold-300)" strokeWidth="1" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.3s" begin="0.3s" fill="freeze"/>
      </path>
      {/* Text lines */}
      {[0,1,2,3,4].map((i) => (
        <rect key={i} x="46" y={28 + i*10} width={i===2?40:60} height="4" rx="2" fill="var(--gold-300)" opacity="0">
          <animate attributeName="opacity" values="0;0.5" dur="0.2s" begin={`${0.4 + i*0.08}s`} fill="freeze"/>
          <animate attributeName="width" values="0;60" dur="0.3s" begin={`${0.4 + i*0.08}s`} fill="freeze"/>
        </rect>
      ))}
      {/* Signature line */}
      <line x1="46" y1="96" x2="96" y2="96" stroke="var(--gold-300)" strokeWidth="1" strokeDasharray="50" strokeDashoffset="50">
        <animate attributeName="strokeDashoffset" values="50;0" dur="0.4s" begin="0.9s" fill="freeze"/>
      </line>
      {/* Signature squiggle */}
      <path d="M46 92 Q52 86 58 92 Q64 98 70 92 Q74 88 78 92" stroke="var(--gold-700)" strokeWidth="1.5" fill="none" strokeDasharray="40" strokeDashoffset="40">
        <animate attributeName="strokeDashoffset" values="40;0" dur="0.5s" begin="1.1s" fill="freeze"/>
      </path>
      {/* VERIFIED stamp circle */}
      <circle cx="100" cy="88" r="0" fill="none" stroke="var(--gold-700)" strokeWidth="2" opacity="0">
        <animate attributeName="r" values="0;16" dur="0.35s" begin="1.4s" fill="freeze"/>
        <animate attributeName="opacity" values="0;1" dur="0.2s" begin="1.4s" fill="freeze"/>
      </circle>
      <text x="100" y="86" fontSize="5.5" fill="var(--gold-700)" textAnchor="middle" fontWeight="bold" letterSpacing="0.5" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.2s" begin="1.6s" fill="freeze"/>
        GROMA
      </text>
      <text x="100" y="93" fontSize="4.5" fill="var(--gold-700)" textAnchor="middle" fontWeight="bold" letterSpacing="0.5" opacity="0">
        <animate attributeName="opacity" values="0;1" dur="0.2s" begin="1.7s" fill="freeze"/>
        VERIFIED
      </text>
    </svg>
  );
}

function HowItWorks() {
  const steps = [
    { n:'01', ic:<HowIcon1/>, h:'Enter an address', p:'Type any Lagos address or drop a pin on the map. We resolve it to a parcel ID and pull the title record instantly.' },
    { n:'02', ic:<HowIcon2/>, h:'We pull every signal', p:'Comparable sales nearby, the latest high-resolution satellite pass, listing prices, and demographic overlay — pulled together in moments.' },
    { n:'03', ic:<HowIcon3/>, h:'AVM scores the property', p:'Our blended model produces a mid-point valuation with a confidence band. Outliers are flagged; you see exactly which comps drove the number.' },
    { n:'04', ic:<HowIcon4/>, h:'Export a signed PDF', p:'One click generates a co-branded, analyst-signed report with every data source cited — defensible in court and with the CBN.' },
  ];
  return (
    <section className="ld-section" id="how">
      <div className="ld-eyebrow reveal">The process</div>
      <h2 className="ld-section-h reveal">Four steps from address to <em style={{fontStyle:'italic',color:'var(--gold-700)'}}>signed report.</em></h2>
      <p className="ld-section-sub reveal">No consultants. No waiting days. Enter an address and walk away with a defensible valuation before the end of the hour.</p>
      <div className="ld-how-steps">
        {steps.map((s, i) => (
          <div key={i} className="ld-how-step reveal">
            <div className="ld-how-step-num">{s.n}</div>
            {s.ic}
            <h3>{s.h}</h3>
            <p>{s.p}</p>
            {i < steps.length - 1 && <div className="ld-how-connector"/>}
          </div>
        ))}
      </div>
    </section>
  );
}

/* ── Feature animated icons ── */
function FeatMapIcon() {
  return (
    <svg className="ld-feat-anim" viewBox="0 0 160 110" fill="none">
      {/* LGA zone polygons */}
      <polygon points="30,30 75,20 90,55 55,65" fill="var(--gold-500)" opacity="0">
        <animate attributeName="opacity" values="0;0.35;0.35" dur="0.5s" begin="0.1s" fill="freeze"/>
      </polygon>
      <polygon points="75,20 120,28 115,60 90,55" fill="var(--gold-700)" opacity="0">
        <animate attributeName="opacity" values="0;0.3;0.3" dur="0.5s" begin="0.3s" fill="freeze"/>
      </polygon>
      <polygon points="55,65 90,55 100,88 60,92" fill="var(--gold-300)" opacity="0">
        <animate attributeName="opacity" values="0;0.35;0.35" dur="0.5s" begin="0.5s" fill="freeze"/>
      </polygon>
      <polygon points="90,55 115,60 125,90 100,88" fill="var(--gold-500)" opacity="0">
        <animate attributeName="opacity" values="0;0.25;0.25" dur="0.5s" begin="0.7s" fill="freeze"/>
      </polygon>
      <polygon points="30,30 55,65 60,92 20,85 15,50" fill="var(--gold-900)" opacity="0">
        <animate attributeName="opacity" values="0;0.18;0.18" dur="0.5s" begin="0.9s" fill="freeze"/>
      </polygon>
      {/* Grid lines */}
      {[[30,30,75,20],[75,20,120,28],[120,28,115,60],[115,60,100,88],[100,88,60,92],[60,92,55,65],[55,65,30,30],[90,55,55,65],[90,55,75,20]].map(([x1,y1,x2,y2],i) => (
        <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--gold-700)" strokeWidth="1" opacity="0.5"
              strokeDasharray="60" strokeDashoffset="60">
          <animate attributeName="strokeDashoffset" to="0" dur="0.6s" begin={`${0.1+i*0.1}s`} fill="freeze"/>
        </line>
      ))}
      {/* Pins dropping */}
      {[{cx:62,cy:42,d:'0.8s'},{cx:103,cy:40,d:'1.2s'},{cx:78,cy:74,d:'1.5s'}].map((p,i) => (
        <g key={i} opacity="0">
          <animate attributeName="opacity" from="0" to="1" dur="0.2s" begin={p.d} fill="freeze"/>
          <circle cx={p.cx} cy={p.cy} r="8" fill="var(--gold-500)" opacity="0.2">
            <animate attributeName="r" values="4;10;8" dur="0.4s" begin={p.d} fill="freeze"/>
          </circle>
          <circle cx={p.cx} cy={p.cy} r="3.5" fill="var(--gold-700)"/>
          <circle cx={p.cx} cy={p.cy} r="1.5" fill="var(--paper)"/>
        </g>
      ))}
    </svg>
  );
}

function FeatAvmIcon() {
  return (
    <svg className="ld-feat-anim" viewBox="0 0 160 110" fill="none">
      {/* House outline */}
      <path d="M50 90 L50 52 L80 28 L110 52 L110 90 Z" stroke="var(--gold-700)" strokeWidth="2" fill="var(--gold-50)" opacity="0"
            strokeDasharray="220" strokeDashoffset="220">
        <animate attributeName="strokeDashoffset" to="0" dur="0.8s" begin="0.1s" fill="freeze"/>
        <animate attributeName="opacity" from="0" to="1" dur="0.2s" begin="0.1s" fill="freeze"/>
      </path>
      {/* Door */}
      <rect x="70" y="72" width="20" height="18" rx="2" fill="var(--gold-300)" opacity="0">
        <animate attributeName="opacity" from="0" to="0.7" dur="0.3s" begin="0.9s" fill="freeze"/>
      </rect>
      {/* Window */}
      <rect x="57" y="60" width="14" height="12" rx="2" fill="var(--gold-300)" opacity="0">
        <animate attributeName="opacity" from="0" to="0.7" dur="0.3s" begin="1s" fill="freeze"/>
      </rect>
      <rect x="89" y="60" width="14" height="12" rx="2" fill="var(--gold-300)" opacity="0">
        <animate attributeName="opacity" from="0" to="0.7" dur="0.3s" begin="1.1s" fill="freeze"/>
      </rect>
      {/* Price tag */}
      <rect x="100" y="18" width="50" height="24" rx="6" fill="var(--gold-700)" opacity="0">
        <animate attributeName="opacity" from="0" to="1" dur="0.4s" begin="1.2s" fill="freeze"/>
      </rect>
      <text x="125" y="34" textAnchor="middle" fill="var(--paper)" fontSize="10" fontWeight="700" fontFamily="var(--font-mono)" opacity="0">
        ₦ 2.58B
        <animate attributeName="opacity" from="0" to="1" dur="0.4s" begin="1.2s" fill="freeze"/>
      </text>
      {/* Confidence bar */}
      <rect x="50" y="97" width="60" height="6" rx="3" fill="var(--gold-50)"/>
      <rect x="50" y="97" width="0" height="6" rx="3" fill="var(--gold-500)">
        <animate attributeName="width" from="0" to="56" dur="0.8s" begin="1.4s" fill="freeze" calcMode="spline" keySplines="0.4 0 0.2 1"/>
      </rect>
      <text x="113" y="103" fill="var(--gold-700)" fontSize="8" fontWeight="700" fontFamily="var(--font-mono)" opacity="0">
        94%
        <animate attributeName="opacity" from="0" to="1" dur="0.3s" begin="2.1s" fill="freeze"/>
      </text>
    </svg>
  );
}

function FeatSatIcon() {
  return (
    <svg className="ld-feat-anim" viewBox="0 0 160 110" fill="none">
      {/* Satellite body */}
      <g opacity="0">
        <animate attributeName="opacity" from="0" to="1" dur="0.4s" begin="0.1s" fill="freeze"/>
        <rect x="70" y="18" width="20" height="14" rx="3" fill="var(--gold-700)"/>
        <rect x="45" y="22" width="22" height="6" rx="2" fill="var(--gold-300)" opacity="0.8"/>
        <rect x="93" y="22" width="22" height="6" rx="2" fill="var(--gold-300)" opacity="0.8"/>
        <circle cx="80" cy="25" r="4" fill="var(--gold-500)"/>
      </g>
      {/* Scan beam sweeping */}
      <path d="M80 32 L28 95 L132 95 Z" fill="var(--gold-500)" opacity="0">
        <animate attributeName="opacity" values="0;0.12;0.06;0.12;0.06" dur="2s" begin="0.5s" repeatCount="indefinite"/>
      </path>
      {/* Scan line sweeping */}
      <line x1="28" y1="95" x2="132" y2="95" stroke="var(--gold-300)" strokeWidth="1.5" opacity="0"
            strokeDasharray="110" strokeDashoffset="110">
        <animate attributeName="strokeDashoffset" to="0" dur="0.6s" begin="0.5s" fill="freeze"/>
        <animate attributeName="opacity" from="0" to="0.7" dur="0.3s" begin="0.5s" fill="freeze"/>
      </line>
      {/* Building silhouettes on ground */}
      {[[35,80,14,15],[58,72,12,23],[80,76,16,19],[104,68,12,27],[126,78,14,17]].map(([x,y,w,h],i) => (
        <rect key={i} x={x} y={y} width={w} height={h} rx="1.5" fill="var(--gold-700)" opacity="0.3"/>
      ))}
      {/* Change flag */}
      <circle cx="104" cy="68" r="7" fill="var(--gold-500)" opacity="0">
        <animate attributeName="opacity" from="0" to="1" dur="0.3s" begin="1.3s" fill="freeze"/>
        <animate attributeName="r" values="7;10;7" dur="1s" begin="1.3s" repeatCount="indefinite"/>
      </circle>
      <text x="104" y="71.5" textAnchor="middle" fill="var(--paper)" fontSize="8" fontWeight="700" opacity="0">
        !
        <animate attributeName="opacity" from="0" to="1" dur="0.3s" begin="1.3s" fill="freeze"/>
      </text>
    </svg>
  );
}

function FeatDemoIcon() {
  return (
    <svg className="ld-feat-anim" viewBox="0 0 160 110" fill="none">
      {/* Population circles — varying size by income */}
      {[
        {cx:35,cy:55,r:18,d:'0.1s',o:0.25},{cx:68,cy:40,r:24,d:'0.3s',o:0.3},
        {cx:105,cy:48,r:20,d:'0.5s',o:0.25},{cx:130,cy:65,r:14,d:'0.7s',o:0.2},
        {cx:48,cy:78,r:16,d:'0.9s',o:0.22},{cx:88,cy:75,r:22,d:'1.1s',o:0.28},
      ].map((c,i) => (
        <circle key={i} cx={c.cx} cy={c.cy} r={c.r} fill="var(--gold-500)" opacity="0">
          <animate attributeName="opacity" from="0" to={c.o} dur="0.4s" begin={c.d} fill="freeze"/>
          <animate attributeName="r" from="0" to={c.r} dur="0.5s" begin={c.d} fill="freeze" calcMode="spline" keySplines="0.4 0 0.2 1"/>
        </circle>
      ))}
      {/* Connecting lines */}
      {[[35,55,68,40],[68,40,105,48],[48,78,88,75],[88,75,105,48]].map(([x1,y1,x2,y2],i) => (
        <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--gold-700)" strokeWidth="1"
              opacity="0.35" strokeDasharray="80" strokeDashoffset="80">
          <animate attributeName="strokeDashoffset" to="0" dur="0.5s" begin={`${1.3+i*0.15}s`} fill="freeze"/>
        </line>
      ))}
      {/* Income label */}
      <rect x="48" y="24" width="64" height="18" rx="5" fill="var(--gold-700)" opacity="0">
        <animate attributeName="opacity" from="0" to="1" dur="0.3s" begin="1.8s" fill="freeze"/>
      </rect>
      <text x="80" y="36.5" textAnchor="middle" fill="var(--paper)" fontSize="9" fontWeight="700" fontFamily="var(--font-mono)" opacity="0">
        NBS Ward Data
        <animate attributeName="opacity" from="0" to="1" dur="0.3s" begin="1.8s" fill="freeze"/>
      </text>
    </svg>
  );
}

function FeatPortIcon() {
  const rows = [
    {y:32, label:'LAG-001A', val:'₦ 2.58B', color:'var(--gold-500)',  status:'ok'},
    {y:50, label:'LAG-004D', val:'₦ 1.06B', color:'var(--gold-700)',  status:'warn'},
    {y:68, label:'LAG-006F', val:'₦ 184M',  color:'#b45309',          status:'risk'},
    {y:86, label:'LAG-008H', val:'₦ 3.52B', color:'var(--gold-500)',  status:'ok'},
  ];
  return (
    <svg className="ld-feat-anim" viewBox="0 0 160 110" fill="none">
      {/* Table header */}
      <rect x="15" y="18" width="130" height="10" rx="2" fill="var(--gold-700)" opacity="0.25"/>
      <text x="22" y="26" fill="var(--gold-900)" fontSize="7" fontWeight="700" fontFamily="var(--font-mono)">ASSET</text>
      <text x="90" y="26" fill="var(--gold-900)" fontSize="7" fontWeight="700" fontFamily="var(--font-mono)">VALUE</text>
      <text x="128" y="26" fill="var(--gold-900)" fontSize="7" fontWeight="700" fontFamily="var(--font-mono)">LTV</text>
      {rows.map((r,i) => (
        <g key={i} opacity="0">
          <animate attributeName="opacity" from="0" to="1" dur="0.3s" begin={`${0.3+i*0.2}s`} fill="freeze"/>
          <rect x="15" y={r.y} width="130" height="14" rx="2" fill={i%2===0?'var(--gold-50)':'var(--paper)'} opacity="0.6"/>
          <text x="22" y={r.y+10} fill="var(--gold-900)" fontSize="7.5" fontFamily="var(--font-mono)">{r.label}</text>
          <text x="90" y={r.y+10} fill="var(--gold-700)" fontSize="7.5" fontWeight="600" fontFamily="var(--font-mono)">{r.val}</text>
          <rect x="126" y={r.y+3} width="16" height="8" rx="2"
                fill={r.status==='ok'?'#d1fae5':r.status==='warn'?'#fef3c7':'#fee2e2'}/>
          <circle cx="130" cy={r.y+7} r="2"
                  fill={r.status==='ok'?'#059669':r.status==='warn'?'#d97706':'#dc2626'}/>
        </g>
      ))}
      {/* Updating flash */}
      <rect x="15" y="68" width="130" height="14" rx="2" fill="var(--gold-300)" opacity="0">
        <animate attributeName="opacity" values="0;0.3;0" dur="0.6s" begin="1.5s" repeatCount="3"/>
      </rect>
    </svg>
  );
}

function FeatReportIcon() {
  return (
    <svg className="ld-feat-anim" viewBox="0 0 160 110" fill="none">
      {/* Document */}
      <rect x="40" y="10" width="80" height="95" rx="6" fill="var(--paper)" stroke="var(--gold-300)" strokeWidth="1.5" opacity="0"
            strokeDasharray="320" strokeDashoffset="320">
        <animate attributeName="strokeDashoffset" to="0" dur="0.8s" begin="0.1s" fill="freeze"/>
        <animate attributeName="opacity" from="0" to="1" dur="0.2s" begin="0.1s" fill="freeze"/>
      </rect>
      {/* Folded corner */}
      <path d="M100 10 L120 30 L100 30 Z" fill="var(--gold-50)" stroke="var(--gold-300)" strokeWidth="1" opacity="0">
        <animate attributeName="opacity" from="0" to="1" dur="0.2s" begin="0.8s" fill="freeze"/>
      </path>
      {/* Text lines appearing */}
      {[28,40,52,64].map((y,i) => (
        <rect key={i} x="52" y={y} width={i===0?50:60} height="5" rx="2" fill="var(--gold-300)" opacity="0">
          <animate attributeName="opacity" from="0" to="0.5" dur="0.3s" begin={`${0.9+i*0.15}s`} fill="freeze"/>
          <animate attributeName="width" from="0" to={i===0?50:60} dur="0.4s" begin={`${0.9+i*0.15}s`} fill="freeze"/>
        </rect>
      ))}
      {/* Groma stamp */}
      <circle cx="80" cy="82" r="16" stroke="var(--gold-700)" strokeWidth="1.5" fill="none" opacity="0">
        <animate attributeName="opacity" from="0" to="0.6" dur="0.3s" begin="1.6s" fill="freeze"/>
      </circle>
      <text x="80" y="79" textAnchor="middle" fill="var(--gold-700)" fontSize="7" fontWeight="700" opacity="0">
        GROMA
        <animate attributeName="opacity" from="0" to="0.9" dur="0.3s" begin="1.6s" fill="freeze"/>
      </text>
      <text x="80" y="89" textAnchor="middle" fill="var(--gold-500)" fontSize="6.5" fontWeight="600" opacity="0">
        VERIFIED
        <animate attributeName="opacity" from="0" to="0.9" dur="0.3s" begin="1.7s" fill="freeze"/>
      </text>
      {/* Signature line */}
      <path d="M52 100 Q62 95 70 100 Q78 105 88 98 Q96 93 108 98" stroke="var(--gold-700)" strokeWidth="1.5"
            strokeLinecap="round" fill="none" opacity="0" strokeDasharray="70" strokeDashoffset="70">
        <animate attributeName="strokeDashoffset" to="0" dur="0.6s" begin="1.9s" fill="freeze"/>
        <animate attributeName="opacity" from="0" to="0.8" dur="0.2s" begin="1.9s" fill="freeze"/>
      </path>
    </svg>
  );
}

function Features() {
  const items = [
    { ic:<FeatMapIcon/>,    h:"Live Lagos map",        p:"Every LGA, ward, and estate — colour-coded by tier, density, and 90-day price drift. Click through to plot-level detail." },
    { ic:<FeatAvmIcon/>,    h:"Automated valuation",   p:"Fast AVMs blended from recent comps, satellite deltas, title data, and listings. Confidence score on every output." },
    { ic:<FeatSatIcon/>,    h:"Satellite pipeline",    p:"High-resolution scans on a regular refresh. Flagged on-site changes push into your dashboard before the permit is filed." },
    { ic:<FeatDemoIcon/>,   h:"Demographic overlay",   p:"NBS + NPC data joined at the ward. Match product to income band without waiting on a consultant." },
    { ic:<FeatPortIcon/>,   h:"Portfolio revaluation", p:"Upload a collateral book, get LTV drift flags and a ranked action list in minutes, not quarters." },
    { ic:<FeatReportIcon/>, h:"Signed reports",        p:"PDF + JSON, analyst-signed, with every data source cited. Defensible in court and with the CBN." },
  ];
  return (
    <section className="ld-section" id="platform">
      <div className="ld-eyebrow reveal">The platform</div>
      <h2 className="ld-section-h reveal">One map. Every plot. Every price signal in Lagos.</h2>
      <p className="ld-section-sub reveal">Groma stitches title deeds, satellite imagery, listing feeds, and field fixtures into a single live view of the market — priced per valuation or per property on your book.</p>
      <div className="ld-features">
        {items.map((f,i) => (
          <div key={i} className="ld-feat reveal">
            {f.ic}
            <h3>{f.h}</h3>
            <p>{f.p}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function FirmsIcon() {
  return (
    <svg className="ld-aud-icon" viewBox="0 0 160 120" fill="none" xmlns="http://www.w3.org/2000/svg">
      {/* Ground */}
      <rect x="10" y="108" width="140" height="3" rx="1.5" fill="var(--gold-300)" opacity="0.3"/>

      {/* Tall tower */}
      <rect x="55" y="22" width="50" height="86" rx="3" fill="var(--gold-700)"/>
      {/* Tower top cap */}
      <rect x="63" y="16" width="34" height="8" rx="2" fill="var(--gold-500)"/>
      {/* Tower antenna */}
      <rect x="79" y="6" width="2" height="12" rx="1" fill="var(--gold-300)"/>
      <circle cx="80" cy="5" r="2.5" fill="var(--gold-300)">
        <animate attributeName="opacity" values="1;0.2;1" dur="1.8s" repeatCount="indefinite"/>
      </circle>

      {/* Tower windows — left col */}
      {[30,42,54,66,78].map((y,i) => (
        <rect key={`tl${i}`} x="64" y={y} width="8" height="7" rx="1.5" fill="var(--gold-300)" opacity="0">
          <animate attributeName="opacity" values="0;0.9;0.5;0.9" dur="3s" begin={`${i*0.3}s`} repeatCount="indefinite"/>
        </rect>
      ))}
      {/* Tower windows — right col */}
      {[30,42,54,66,78].map((y,i) => (
        <rect key={`tr${i}`} x="88" y={y} width="8" height="7" rx="1.5" fill="var(--gold-300)" opacity="0">
          <animate attributeName="opacity" values="0;0.9;0.5;0.9" dur="3s" begin={`${i*0.3+0.5}s`} repeatCount="indefinite"/>
        </rect>
      ))}

      {/* Left shorter building */}
      <rect x="18" y="52" width="34" height="56" rx="2" fill="var(--gold-500)" opacity="0.55"/>
      {[58,70,82].map((y,i) => (
        <rect key={`ll${i}`} x="25" y={y} width="7" height="6" rx="1" fill="var(--gold-50)" opacity="0">
          <animate attributeName="opacity" values="0;0.8;0.4;0.8" dur="2.5s" begin={`${i*0.4+0.2}s`} repeatCount="indefinite"/>
        </rect>
      ))}
      {[58,70,82].map((y,i) => (
        <rect key={`lr${i}`} x="38" y={y} width="7" height="6" rx="1" fill="var(--gold-50)" opacity="0">
          <animate attributeName="opacity" values="0;0.8;0.4;0.8" dur="2.5s" begin={`${i*0.4+0.7}s`} repeatCount="indefinite"/>
        </rect>
      ))}

      {/* Right shorter building */}
      <rect x="108" y="44" width="34" height="64" rx="2" fill="var(--gold-500)" opacity="0.55"/>
      {[52,64,76,88].map((y,i) => (
        <rect key={`rl${i}`} x="115" y={y} width="7" height="6" rx="1" fill="var(--gold-50)" opacity="0">
          <animate attributeName="opacity" values="0;0.8;0.3;0.8" dur="2.8s" begin={`${i*0.35+0.1}s`} repeatCount="indefinite"/>
        </rect>
      ))}
      {[52,64,76,88].map((y,i) => (
        <rect key={`rr${i}`} x="128" y={y} width="7" height="6" rx="1" fill="var(--gold-50)" opacity="0">
          <animate attributeName="opacity" values="0;0.8;0.3;0.8" dur="2.8s" begin={`${i*0.35+0.6}s`} repeatCount="indefinite"/>
        </rect>
      ))}

      {/* Map pin */}
      <circle cx="80" cy="96" r="6" fill="var(--gold-300)" opacity="0.25">
        <animate attributeName="r" values="6;14;6" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.25;0;0.25" dur="2s" repeatCount="indefinite"/>
      </circle>
      <path d="M80 88 C76.7 88 74 90.7 74 94 C74 98.2 80 104 80 104 C80 104 86 98.2 86 94 C86 90.7 83.3 88 80 88Z" fill="var(--gold-500)"/>
      <circle cx="80" cy="94" r="2.2" fill="var(--paper)"/>
    </svg>
  );
}

function BanksIcon() {
  return (
    <svg className="ld-aud-icon" viewBox="0 0 160 120" fill="none" xmlns="http://www.w3.org/2000/svg">
      {/* Grid lines */}
      {[30,50,70,90].map((y,i) => (
        <line key={i} x1="20" y1={y} x2="150" y2={y} stroke="var(--gold-300)" strokeWidth="0.5" opacity="0.25"/>
      ))}
      {/* X axis */}
      <line x1="20" y1="108" x2="150" y2="108" stroke="var(--gold-700)" strokeWidth="1.5" opacity="0.4"/>

      {/* Bars */}
      {[
        { x:28,  h:48, delay:'0s'   },
        { x:52,  h:62, delay:'0.15s'},
        { x:76,  h:38, delay:'0.3s' },
        { x:100, h:72, delay:'0.45s'},
        { x:124, h:85, delay:'0.6s' },
      ].map((b,i) => (
        <g key={i}>
          <rect x={b.x} y={108-b.h} width="18" height={b.h} rx="3"
                fill="var(--gold-500)" opacity="0.25"/>
          <rect x={b.x} y={108-b.h} width="18" height={b.h} rx="3"
                fill="var(--gold-500)" opacity="0">
            <animate attributeName="height" from="0" to={b.h} dur="1s" begin={b.delay} fill="freeze" calcMode="spline" keySplines="0.4 0 0.2 1"/>
            <animate attributeName="y" from="108" to={108-b.h} dur="1s" begin={b.delay} fill="freeze" calcMode="spline" keySplines="0.4 0 0.2 1"/>
            <animate attributeName="opacity" from="0" to="0.85" dur="0.4s" begin={b.delay} fill="freeze"/>
          </rect>
        </g>
      ))}

      {/* Trend line */}
      <polyline
        points="37,87 61,73 85,83 109,52 133,30"
        stroke="var(--gold-300)" strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round"
        fill="none" strokeDasharray="200" strokeDashoffset="200">
        <animate attributeName="strokeDashoffset" from="200" to="0" dur="1.4s" begin="0.6s" fill="freeze" calcMode="spline" keySplines="0.4 0 0.2 1"/>
      </polyline>

      {/* Dots on trend line */}
      {[{cx:37,cy:87},{cx:61,cy:73},{cx:85,cy:83},{cx:109,cy:52},{cx:133,cy:30}].map((d,i) => (
        <circle key={i} cx={d.cx} cy={d.cy} r="4" fill="var(--gold-300)" opacity="0">
          <animate attributeName="opacity" from="0" to="1" dur="0.3s" begin={`${0.9+i*0.15}s`} fill="freeze"/>
        </circle>
      ))}

      {/* Value badge on last point */}
      <rect x="118" y="16" width="36" height="18" rx="4" fill="var(--gold-700)" opacity="0">
        <animate attributeName="opacity" from="0" to="1" dur="0.3s" begin="1.8s" fill="freeze"/>
      </rect>
      <text x="136" y="28.5" textAnchor="middle" fill="var(--paper)" fontSize="9" fontWeight="700" fontFamily="var(--font-mono)" opacity="0">
        ▲ 94%
        <animate attributeName="opacity" from="0" to="1" dur="0.3s" begin="1.8s" fill="freeze"/>
      </text>

      {/* Shield icon bottom-left */}
      <path d="M26 90 L26 98 Q26 102 30 104 Q34 102 34 98 L34 90 L30 88 Z" fill="var(--gold-500)" opacity="0.7"/>
      <path d="M28.5 96 L29.8 97.5 L32 94.5" stroke="var(--paper)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" opacity="0.9"/>
    </svg>
  );
}

function Audience() {
  return (
    <section className="ld-section" id="who">
      <div className="ld-eyebrow reveal">Two audiences, one workflow</div>
      <h2 className="ld-section-h reveal">Built for the people who actually issue the number.</h2>
      <div className="ld-aud-split">
        <div className="ld-aud-col reveal">
          <FirmsIcon/>
          <h3>Real-estate firms</h3>
          <p>Valuers, brokerages, developers, and REITs who need a defensible price — fast.</p>
          <ul>
            <li>Plans from ₦ 40K / month</li>
            <li>Comparable sales up to 2km, filterable</li>
            <li>Co-branded PDF and JSON exports</li>
            <li>Team seats, shared templates, inline review</li>
            <li>API access on Scale &amp; Institution tiers</li>
          </ul>
        </div>
        <div className="ld-aud-col reveal">
          <BanksIcon/>
          <h3>Banks &amp; lenders</h3>
          <p>Risk, credit, and compliance teams who need thousands of fresh valuations on a schedule.</p>
          <ul>
            <li>Bulk revaluation across the full collateral book</li>
            <li>LTV drift &amp; covenant alerts</li>
            <li>Role separation &amp; 7-year audit trail</li>
            <li>SSO, SCIM, VPC deployment</li>
            <li>CBN-aligned reporting formats</li>
          </ul>
        </div>
      </div>
    </section>
  );
}

function LivePreview() {
  return (
    <section className="ld-section dark">
      <div className="ld-eyebrow">See it live</div>
      <h2 className="ld-section-h">The same map your valuers and your credit desk open every morning.</h2>
      <p className="ld-section-sub">Satellite imagery with 3D terrain and extruded buildings over Lagos Metro. Every pipeline plot tracked, every LGA boundary drawn. Pan and tilt — this is the actual platform view.</p>
      <div className="ld-preview">
        <MapCanvas
          focus="ikoyi"
          mapStyle="satellite"
          layers={{pipeline:true, lgaLines:false, labels:false}}
          subject={{ lng: 3.438, lat: 6.452 }}
        />
        <div className="ld-preview-cap">Lagos Metro · Satellite 3D · 14 LGAs covered</div>
      </div>
    </section>
  );
}

function Testimonials() { return null; }

function Pricing({ openForm }) {
  const tiers = [
    {
      aud:   "Individual valuers",
      name:  "Starter",
      desc:  "For independent valuers getting fast, defensible reports.",
      price: "₦ 40K",
      per:   "/mo",
      badge: null,
    },
    {
      aud:   "Brokerages & developers",
      name:  "Scale",
      desc:  "For teams that need volume, co-branded reports, and market analytics.",
      price: "Contact us",
      per:   "",
      badge: "Popular",
    },
    {
      aud:   "Banks & lenders",
      name:  "Institution",
      desc:  "Portfolio revaluation, CBN-aligned formats, audit trail, and API access.",
      price: "Contact us",
      per:   "",
      badge: null,
    },
  ];

  return (
    <section className="ld-section" id="pricing">
      <div className="ld-eyebrow reveal">Pricing</div>
      <h2 className="ld-section-h reveal">Simple plans. Built around your workflow.</h2>
      <p className="ld-section-sub reveal">Start on Starter and upgrade as your volume grows — or talk to us about a tailored institution plan.</p>

      <div className="ld-pricing-cards">
        {tiers.map((t, i) => (
          <div key={t.name} className={`ld-pricing-card reveal${i===1?' featured':''}`}>
            {t.badge && <div className="ld-pricing-badge">{t.badge}</div>}
            <div className="ld-pricing-aud">{t.aud}</div>
            <div className="ld-pricing-name">{t.name}</div>
            <div className="ld-pricing-price">
              {t.price}{t.per && <span className="ld-pricing-per">{t.per}</span>}
            </div>
            <p className="ld-pricing-desc">{t.desc}</p>
            <button className={`ld-pricing-cta${i===1?' gold':''}`} onClick={openForm}>
              {i === 0 ? 'Request access' : 'Talk to us'} <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </button>
          </div>
        ))}
      </div>
    </section>
  );
}

function CTA({ openForm }) {
  return (
    <section className="ld-cta" id="contact">
      <h2>See your next valuation <em>in four minutes.</em></h2>
      <p>Book a 20-minute demo. Bring a real address — we'll value it on the call and send you the signed PDF before you hang up.</p>
      <div className="ld-cta-ctas">
        <button className="ld-btn gold" onClick={openForm}>Book a demo <Icons.arrow size={13}/></button>
        <button className="ld-btn dark-invert" onClick={openForm}>Open the platform</button>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="ld-footer">
      <div className="ld-footer-grid">
        <div>
          <div className="ld-footer-brand"><LogoMarkFooter size={46}/><div className="ld-footer-brand-name">Groma <em style={{color:"var(--gold-500)", fontStyle:"normal"}}>intelligence</em></div></div>
          <p style={{fontSize:13, lineHeight:1.55, maxWidth:320, margin:0, color:"var(--slate-300)"}}>
            The single source of truth for Lagos real estate. Lagos today, Abuja &amp; Port Harcourt by Q4.
          </p>
        </div>
        <div><h4>Product</h4><ul>
          <li><a href="#platform">Platform</a></li>
          <li><a href="#who">For firms</a></li>
          <li><a href="#who">For banks</a></li>
          <li><a href="#pricing">Pricing</a></li>
        </ul></div>
        <div><h4>Company</h4><ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Press</a></li>
          <li><a href="#">Careers</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul></div>
        <div><h4>Legal</h4><ul>
          <li><a href="#">Terms</a></li>
          <li><a href="#">Privacy</a></li>
          <li><a href="#">Data sources</a></li>
          <li><a href="#">Security</a></li>
        </ul></div>
      </div>
      <div className="ld-footer-bottom">
        <span>© 2026 Groma Intelligence Ltd. Lagos, Nigeria.</span>
        <div className="ld-footer-bottom-spacer"/>
        <span>RC 7841229</span>
      </div>
    </footer>
  );
}

function Landing() {
  useReveal();
  const [modalOpen, setModalOpen] = useState(false);
  const openForm  = useCallback(() => setModalOpen(true),  []);
  const closeForm = useCallback(() => setModalOpen(false), []);
  return (
    <>
      <ContactModal open={modalOpen} onClose={closeForm}/>
      <Nav openForm={openForm}/>
      <Hero openForm={openForm}/>
      <TrustStrip/>
      <HowItWorks/>
      <Features/>
      <Audience/>
      <LivePreview/>
      <Testimonials/>
      <Pricing openForm={openForm}/>
      <CTA openForm={openForm}/>
      <Footer/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Landing/>);