/* global React */
const { useState: useStateI, useEffect: useEffectI } = React;

/* =========================================================
   Investors block + Contact form + Footer
   ========================================================= */

function Investors() {
  const [deckOpen, setDeckOpen] = useStateI(false);
  const metrics = [
    { k: '2,400+', l: 'Waitlist sign-ups in 6 weeks' },
    { k: '£420k', l: 'Pre-seed commitment (SAFE)' },
    { k: '98%', l: 'Lower carbon than industry avg' },
    { k: '3 min', l: 'Median time to published site' },
  ];
  return (
    <section id="investors" className="section-pad" style={{
      background: 'linear-gradient(180deg, var(--bg-0), var(--forest-2) 60%, #061208)',
      borderTop: '1px solid var(--line)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div className="inv-orb" />
      <div className="container" style={{ position: 'relative' }}>
        <div className="inv-grid reveal">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>For investors</div>
            <h2 className="display display-lg" style={{ margin: '0 0 28px' }}>
              A $55B market<br/>
              with a <span className="green-highlight">carbon</span> problem.
            </h2>
            <p className="lede" style={{ marginBottom: 20 }}>
              Website builders are a mature category, but not a single incumbent is built green-first.
              Ree is the climate-native option for the next generation of businesses
              that have to answer to customers, regulators, and a warming planet.
            </p>
            <p className="lede" style={{ color: 'var(--ink-2)', marginBottom: 36 }}>
              We're raising a seed round in Q3 2026 to expand the team and launch publicly.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button type="button" className="btn btn-primary" onClick={() => setDeckOpen(true)}>
                Request the deck
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </button>
              <a className="btn btn-ghost" href="#contact" onClick={(e) => {
                e.preventDefault();
                const el = document.getElementById('contact');
                if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
              }}>Talk to the founders</a>
            </div>
          </div>

          <div className="inv-card">
            <div className="inv-card-head">
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--mint)' }}>FACT SHEET · 04·2026</div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--ink-3)' }}>CONFIDENTIAL</div>
            </div>
            <div className="inv-metrics">
              {metrics.map((m, i) => (
                <div key={i} className="inv-metric">
                  <div className="inv-metric-k">{m.k}</div>
                  <div className="inv-metric-l">{m.l}</div>
                </div>
              ))}
            </div>
            <div className="inv-row"><span>Stage</span><span>Pre-seed · closing Q3 2026</span></div>
            <div className="inv-row"><span>Founded</span><span>Sydney · 2025</span></div>
            <div className="inv-row"><span>Team</span><span>19 years designing and building the internet</span></div>
            <div className="inv-row"><span>Market</span><span>$55B · website builder & hosting</span></div>
            <div className="inv-row"><span>Traction</span><span>2,400+ waitlist · 100 beta users</span></div>
          </div>
        </div>
      </div>
      <DeckSlideout open={deckOpen} onClose={() => setDeckOpen(false)} />
      <style>{`
        .inv-orb {
          position: absolute; top: -20%; right: -10%; width: 60vw; height: 60vw;
          background: radial-gradient(closest-side, rgba(159,232,112,0.12), transparent);
          pointer-events: none;
        }
        .inv-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 8vw, 100px); align-items: center; }
        .inv-card { background: rgba(10,10,10,0.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: clamp(28px, 3vw, 40px); }
        .inv-card-head { display: flex; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
        .inv-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
        .inv-metric-k { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 700; color: var(--lime); letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px; }
        .inv-metric-l { font-size: 12px; color: var(--ink-2); line-height: 1.4; }
        .inv-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
        .inv-row:last-child { border-bottom: 0; }
        .inv-row span:first-child { color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
        .inv-row span:last-child { color: var(--ink-0); }
        @media (max-width: 860px) { .inv-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

/* =========================================================
   Deck request slide-out , right-edge panel + form
   ========================================================= */
function DeckSlideout({ open, onClose }) {
  const [form, setForm] = useStateI({
    name: '',
    company: '',
    role: 'Investor',
    message: '',
    extra: '',
  });
  const [errors, setErrors] = useStateI({});
  const [status, setStatus] = useStateI('idle'); // idle | submitting | success

  useEffectI(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [open]);

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = 'Required';
    if (!form.company.trim()) errs.company = 'Required';
    if (!form.message.trim()) errs.message = 'Required';
    setErrors(errs);
    if (Object.keys(errs).length) return;
    setStatus('submitting');
    setTimeout(() => setStatus('success'), 700);
  };

  const reset = () => {
    setForm({ name: '', company: '', role: 'Investor', message: '', extra: '' });
    setErrors({});
    setStatus('idle');
    onClose();
  };

  return (
    <>
      <div className={`ds-backdrop ${open ? 'on' : ''}`} onClick={onClose} aria-hidden={!open} />
      <aside
        className={`ds-panel ${open ? 'on' : ''}`}
        role="dialog"
        aria-modal="true"
        aria-labelledby="ds-title"
        aria-hidden={!open}
      >
        <div className="ds-head">
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--mint)' }}>INVESTOR · DECK REQUEST</div>
            <h3 id="ds-title" className="ds-title">Request the deck</h3>
          </div>
          <button className="ds-close" type="button" onClick={onClose} aria-label="Close">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
          </button>
        </div>

        <div className="ds-body">
          {status === 'success' ? (
            <div className="ds-success">
              <div className="c-success-ring">
                <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
                  <circle cx="20" cy="20" r="18" stroke="var(--mint)" strokeWidth="1.5"/>
                  <path d="M11 20L17 26L29 14" stroke="var(--mint)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
              <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 26, margin: '20px 0 10px', letterSpacing: '-0.02em' }}>
                Thanks, {form.name.split(' ')[0]}.
              </h4>
              <p style={{ color: 'var(--ink-2)', margin: '0 0 28px', lineHeight: 1.55 }}>
                We've received your request. A founder will reply within 24 hours with the deck
                and a link to book time if you'd like to chat.
              </p>
              <button type="button" className="btn btn-primary" onClick={reset}>Close</button>
            </div>
          ) : (
            <form className="ds-form" onSubmit={submit} noValidate>
              <p className="ds-intro">
                Tell us a bit about yourself. We share the deck with aligned investors
                building their climate-tech thesis.
              </p>

              <Input label="Your name" value={form.name} onChange={(v) => setForm({ ...form, name: v })} err={errors.name} />
              <Input label="Company / firm" value={form.company} onChange={(v) => setForm({ ...form, company: v })} err={errors.company} />
              <Select
                label="I'm a..."
                value={form.role}
                onChange={(v) => setForm({ ...form, role: v })}
                options={['Investor (angel)', 'Investor', 'VC firm', 'Family office', 'Operator / scout', 'Other']}
              />
              <Textarea
                label="What interests you about Ree?"
                value={form.message}
                onChange={(v) => setForm({ ...form, message: v })}
                err={errors.message}
              />
              <Textarea
                label="Anything else we should know?"
                optional
                value={form.extra}
                onChange={(v) => setForm({ ...form, extra: v })}
              />

              <div className="ds-actions">
                <button type="button" className="btn btn-ghost" onClick={onClose}>Cancel</button>
                <button type="submit" className="btn btn-primary" disabled={status === 'submitting'}>
                  {status === 'submitting' ? 'Sending…' : 'Request deck'}
                  {status !== 'submitting' && <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                </button>
              </div>

              <p className="ds-legal mono">
                By submitting, you agree we may contact you at the email associated with your firm.
                We never share your details.
              </p>
            </form>
          )}
        </div>
      </aside>

      <style>{`
        .ds-backdrop {
          position: fixed; inset: 0;
          background: rgba(3, 8, 5, 0.7);
          backdrop-filter: blur(6px);
          -webkit-backdrop-filter: blur(6px);
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.4s var(--ease-out);
          z-index: 80;
        }
        .ds-backdrop.on { opacity: 1; pointer-events: auto; }

        .ds-panel {
          position: fixed;
          top: 0; right: 0;
          width: min(520px, 100vw);
          height: 100dvh;
          background: var(--bg-0);
          border-left: 1px solid var(--line-strong);
          box-shadow: -40px 0 80px rgba(0,0,0,0.5);
          z-index: 81;
          display: flex;
          flex-direction: column;
          transform: translateX(100%);
          transition: transform 0.5s cubic-bezier(.22,.81,.26,1);
          overflow: hidden;
        }
        .ds-panel.on { transform: translateX(0); }

        .ds-head {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 20px;
          padding: 28px 28px 20px;
          border-bottom: 1px solid var(--line);
          flex-shrink: 0;
        }
        .ds-title {
          font-family: var(--font-display);
          font-size: 28px;
          font-weight: 600;
          letter-spacing: -0.02em;
          margin: 10px 0 0;
          color: var(--ink-0);
        }
        .ds-close {
          width: 38px; height: 38px;
          border-radius: 50%;
          background: var(--bg-2);
          border: 1px solid var(--line);
          color: var(--ink-1);
          display: inline-flex; align-items: center; justify-content: center;
          transition: background 0.2s, color 0.2s, border-color 0.2s;
          flex-shrink: 0;
        }
        .ds-close:hover { background: var(--lime); color: #0a0a0a; border-color: var(--lime); }

        .ds-body {
          flex: 1;
          overflow-y: auto;
          padding: 24px 28px 40px;
        }
        .ds-intro {
          color: var(--ink-2);
          font-size: 14px;
          line-height: 1.55;
          margin: 0 0 24px;
        }
        .ds-form {
          display: flex;
          flex-direction: column;
          gap: 18px;
        }
        .ds-actions {
          display: flex;
          gap: 12px;
          padding-top: 8px;
          flex-wrap: wrap;
        }
        .ds-legal {
          font-size: 10px;
          letter-spacing: 0.06em;
          color: var(--ink-3);
          line-height: 1.6;
          margin: 8px 0 0;
        }

        .ds-success {
          text-align: center;
          padding: 40px 20px;
        }
        @media (max-width: 520px) {
          .ds-head { padding: 22px 20px 16px; }
          .ds-body { padding: 20px 20px 32px; }
          .ds-title { font-size: 24px; }
        }
      `}</style>
    </>
  );
}

function Contact() {
  const [form, setForm] = useStateI({ name: '', email: '', org: '', topic: 'General', message: '' });
  const [status, setStatus] = useStateI('idle');
  const [errors, setErrors] = useStateI({});

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = 'Required';
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) errs.email = 'Invalid email';
    if (!form.message.trim()) errs.message = 'Required';
    setErrors(errs);
    if (Object.keys(errs).length) return;
    setStatus('submitting');
    setTimeout(() => setStatus('success'), 700);
  };

  return (
    <section id="contact" className="section-pad" style={{ background: 'var(--bg-0)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div className="c-grid">
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 24 }}>Contact</div>
            <h2 className="display display-lg" style={{ margin: '0 0 24px' }}>
              Say hi.<br/>
              We reply <span className="green-highlight">fast</span>.
            </h2>
            <p className="lede" style={{ marginBottom: 40 }}>
              Press, partnerships, investors, agency enquiries, or just curious?
              Drop us a line.
            </p>

            <div className="c-details">
              <div className="c-row">
                <div className="c-label mono">EMAIL</div>
                <a className="c-value" href="mailto:get@reesite.com">get@reesite.com</a>
              </div>
              <div className="c-row">
                <div className="c-label mono">BASED IN</div>
                <div className="c-value">Sydney, Australia</div>
              </div>
              <div className="c-row">
                <div className="c-label mono">REPLY TIME</div>
                <div className="c-value">Usually within 24 hours</div>
              </div>
              <div className="c-row">
                <div className="c-label mono">SOCIAL</div>
                <div className="c-value" style={{ display: 'flex', gap: 16 }}>
                  <a href="#" aria-label="Twitter">Twitter</a>
                  <a href="#" aria-label="LinkedIn">LinkedIn</a>
                  <a href="#" aria-label="Instagram">Instagram</a>
                </div>
              </div>
            </div>
          </div>

          <div className="c-form-wrap reveal">
            {status === 'success' ? (
              <div className="c-success">
                <div className="c-success-ring">
                  <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
                    <circle cx="20" cy="20" r="18" stroke="var(--mint)" strokeWidth="1.5"/>
                    <path d="M11 20L17 26L29 14" stroke="var(--mint)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, margin: '20px 0 8px' }}>Message received.</h3>
                <p style={{ color: 'var(--ink-2)', margin: 0 }}>
                  Thanks {form.name.split(' ')[0]}, we'll get back to you at <strong style={{color:'var(--ink-0)'}}>{form.email}</strong> within a day.
                </p>
              </div>
            ) : (
              <form className="c-form" onSubmit={submit} noValidate>
                <div className="c-field-row">
                  <Input label="Your name" value={form.name} onChange={(v) => setForm({ ...form, name: v })} err={errors.name} />
                  <Input label="Email" type="email" value={form.email} onChange={(v) => setForm({ ...form, email: v })} err={errors.email} />
                </div>
                <Input label="Company / organisation" optional value={form.org} onChange={(v) => setForm({ ...form, org: v })} />
                <Select label="What's this about?" value={form.topic} onChange={(v) => setForm({ ...form, topic: v })}
                  options={['General', 'Press', 'Partnerships', 'Investor enquiry', 'Agency plan', 'Support']} />
                <Textarea label="Message" value={form.message} onChange={(v) => setForm({ ...form, message: v })} err={errors.message} />
                <button type="submit" className="btn btn-primary" style={{ padding: '16px 26px', alignSelf: 'flex-start' }} disabled={status === 'submitting'}>
                  {status === 'submitting' ? 'Sending…' : 'Send message'}
                  {status !== 'submitting' && <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
      <style>{`
        .c-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 8vw, 100px); align-items: start; }
        .c-details { border-top: 1px solid var(--line); }
        .c-row { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: center; }
        .c-label { font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); }
        .c-value { font-size: 15px; color: var(--ink-0); }
        .c-value a { border-bottom: 1px solid var(--line-strong); transition: border-color 0.3s, color 0.3s; }
        .c-value a:hover { color: var(--mint); border-color: var(--mint); }
        a.c-value { border-bottom: 1px solid var(--line-strong); }
        a.c-value:hover { color: var(--mint); border-color: var(--mint); }

        .c-form-wrap { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(28px, 3vw, 44px); }
        .c-form { display: flex; flex-direction: column; gap: 18px; }
        .c-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .c-success { text-align: center; padding: 40px 20px; }
        .c-success-ring { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; background: rgba(159,232,112,0.08); display: grid; place-items: center; }
        @media (max-width: 860px) { .c-grid { grid-template-columns: 1fr; } .c-field-row { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

function Input({ label, optional, value, onChange, type = 'text', err }) {
  return (
    <label className={`in-wrap ${err ? 'err' : ''}`}>
      <span className="in-label">{label} {optional && <span className="in-opt">(optional)</span>} {err && <span className="in-err">· {err}</span>}</span>
      <input type={type} value={value} onChange={(e) => onChange(e.target.value)} spellCheck="false" />
      <style>{`
        .in-wrap { display: flex; flex-direction: column; gap: 6px; }
        .in-label { font-size: 12px; letter-spacing: 0.06em; color: var(--ink-2); font-family: var(--font-mono); text-transform: uppercase; }
        .in-opt { color: var(--ink-3); text-transform: none; letter-spacing: 0; }
        .in-err { color: #ff9c9c; text-transform: none; }
        .in-wrap input {
          background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
          padding: 14px 16px; font-size: 15px; color: var(--ink-0); outline: none;
          transition: border-color 0.3s, background 0.3s;
        }
        .in-wrap input:focus { border-color: var(--lime); background: var(--bg-3); }
        .in-wrap.err input { border-color: #ff6b6b; }
      `}</style>
    </label>
  );
}

function Select({ label, value, onChange, options }) {
  return (
    <label className="in-wrap">
      <span className="in-label">{label}</span>
      <div className="sel-wrap">
        <select value={value} onChange={(e) => onChange(e.target.value)}>
          {options.map((o) => <option key={o}>{o}</option>)}
        </select>
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
      </div>
      <style>{`
        .sel-wrap { position: relative; }
        .sel-wrap select {
          width: 100%;
          appearance: none; -webkit-appearance: none;
          background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
          padding: 14px 16px; font-size: 15px; color: var(--ink-0); outline: none;
          transition: border-color 0.3s;
          padding-right: 38px;
        }
        .sel-wrap select:focus { border-color: var(--lime); }
        .sel-wrap svg { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
      `}</style>
    </label>
  );
}

function Textarea({ label, value, onChange, err }) {
  return (
    <label className={`in-wrap ${err ? 'err' : ''}`}>
      <span className="in-label">{label} {err && <span className="in-err">· {err}</span>}</span>
      <textarea rows="5" value={value} onChange={(e) => onChange(e.target.value)} placeholder="Tell us a bit about what you're after…" />
      <style>{`
        .in-wrap textarea {
          background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
          padding: 14px 16px; font-size: 15px; color: var(--ink-0); outline: none;
          font-family: inherit; resize: vertical; min-height: 120px;
          transition: border-color 0.3s, background 0.3s;
        }
        .in-wrap textarea:focus { border-color: var(--lime); background: var(--bg-3); }
        .in-wrap textarea::placeholder { color: var(--ink-3); }
        .in-wrap.err textarea { border-color: #ff6b6b; }
      `}</style>
    </label>
  );
}

/* =========================================================
   Final CTA + Footer
   ========================================================= */
function FinalCTA() {
  return (
    <section id="notify" className="section-pad" style={{
      background: `
        radial-gradient(60% 60% at 50% 100%, rgba(159,232,112,0.22), transparent 65%),
        linear-gradient(180deg, #061208 0%, #0a1f0d 100%)`,
      borderTop: '1px solid var(--line)',
      textAlign: 'center',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div className="reveal">
          <h2 className="display display-xl" style={{ margin: '0 auto 32px', maxWidth: '16ch' }}>
            Step into<br/>the future of<br/>
            <span className="green-highlight">design.</span>
          </h2>
          <p className="lede" style={{ margin: '0 auto 48px', textAlign: 'center' }}>
            Be first to know when Ree goes live. No spam, no drip, just one email on launch day.
          </p>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <NotifyForm big />
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const [panel, setPanel] = useStateI(null); // null | 'updates' | 'privacy' | 'climate' | 'careers' | 'press'
  const open = (key) => (e) => { e && e.preventDefault && e.preventDefault(); setPanel(key); };

  useEffectI(() => {
    const onOpenUpdates = () => setPanel('updates');
    window.addEventListener('ree:open-updates', onOpenUpdates);
    return () => window.removeEventListener('ree:open-updates', onOpenUpdates);
  }, []);

  return (
    <footer style={{ background: 'var(--bg-0)', borderTop: '1px solid var(--line)', padding: '60px 0 40px' }}>
      <div className="container">
        <div className="footer-grid">
          <div>
            <Logo size={28} />
            <p style={{ color: 'var(--ink-2)', fontSize: 14, marginTop: 18, maxWidth: 280, lineHeight: 1.5 }}>
              Built for freelancers, professionals, and businesses. Create and launch beautiful, low-carbon websites, in minutes.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
              {['TW', 'LI', 'IG', 'DB'].map((s) => (
                <a key={s} href="#" className="footer-social">{s}</a>
              ))}
            </div>
          </div>
          <FooterCol title="Product" links={[
            { label: 'Features' }, { label: 'Templates' }, { label: 'Brand kit' }, { label: 'Publishing' }, { label: 'Roadmap' },
          ]} />
          <FooterCol title="Company" links={[
            { label: 'About' },
            { label: 'Investors' },
            { label: 'Climate report', badge: 'Sub', onClick: open('climate') },
            { label: 'Careers', badge: 'Hiring', onClick: open('careers') },
            { label: 'Press', onClick: open('press') },
          ]} />
          <FooterCol title="Resources" links={[
            { label: 'FAQ' },
            { label: 'Privacy', onClick: open('privacy') },
            { label: 'Terms' },
            { label: 'Contact', onClick: () => {
              const el = document.getElementById('contact');
              if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
            } },
            { label: 'Updates', badge: 'New', onClick: open('updates') },
          ]} />
        </div>
        <div className="footer-bottom">
          <div style={{ color: 'var(--ink-3)', fontSize: 12 }}>© 2026 Ree. All rights reserved. Made on 100% renewable energy.</div>
          <div style={{ color: 'var(--ink-3)', fontSize: 12, display: 'flex', gap: 20 }}>
            <span className="mono">v 0.4 · pre-launch</span>
            <span className="mono" style={{ color: 'var(--mint)' }}>● Green hosting verified</span>
          </div>
        </div>
      </div>
      <FooterSlideout which={panel} onClose={() => setPanel(null)} />
      <style>{`
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
        .footer-social {
          display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
          border: 1px solid var(--line-strong); color: var(--ink-2); font-size: 10px; font-family: var(--font-mono);
          transition: all 0.3s;
        }
        .footer-social:hover { border-color: var(--mint); color: var(--mint); }
        .footer-link {
          font-size: 14px;
          color: var(--ink-1);
          transition: color 0.3s;
          display: inline-flex;
          align-items: center;
          gap: 8px;
        }
        .footer-link:hover { color: var(--mint); }
        .footer-link-badge {
          font-size: 9px;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          padding: 2px 7px;
          border-radius: 999px;
          background: rgba(159,232,112,0.12);
          color: var(--mint);
          border: 1px solid rgba(159,232,112,0.35);
          line-height: 1.4;
        }
        .footer-bottom { display: flex; justify-content: space-between; padding-top: 28px; gap: 20px; flex-wrap: wrap; }
        @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
      `}</style>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <h5 style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-3)', margin: '0 0 18px', fontWeight: 500 }}>{title}</h5>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {links.map((raw) => {
          const l = typeof raw === 'string' ? { label: raw } : raw;
          const isAction = typeof l.onClick === 'function';
          return (
            <li key={l.label}>
              <a
                href={l.href || '#'}
                onClick={isAction ? (e) => { e.preventDefault(); l.onClick(); } : undefined}
                className="footer-link"
              >
                {l.label}
                {l.badge && <span className="footer-link-badge mono">{l.badge}</span>}
              </a>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

/* =========================================================
   Footer slideout , notion-style right panel with 5 content modes
   ========================================================= */
function FooterSlideout({ which, onClose }) {
  const open = !!which;
  const isNews = which === 'updates' || which === 'press' || which === 'careers';
  const [tab, setTab] = useStateI('updates');

  useEffectI(() => {
    if (isNews) setTab(which);
  }, [which]);

  useEffectI(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [open]);

  const meta = {
    news:    { eyebrow: 'NEWSROOM', title: 'What\u2019s happening at Ree', sub: 'Product updates, press, and open roles. All in one place.' },
    privacy: { eyebrow: 'LEGAL', title: 'Privacy, in plain English', sub: 'The short version. The full policy is linked at the end.' },
    climate: { eyebrow: 'CLIMATE REPORT \u00b7 GATED', title: 'Subscribe to access', sub: 'Quarterly climate report \u2014 the numbers behind a carbon-negative web.' },
  };
  const m = isNews ? meta.news : (which ? meta[which] : { eyebrow: '', title: '', sub: '' });

  const tabs = [
    { id: 'updates', label: 'Updates' },
    { id: 'press',   label: 'Press' },
    { id: 'careers', label: 'Careers' },
  ];

  return (
    <>
      <div className={`fs-backdrop ${open ? 'on' : ''}`} onClick={onClose} aria-hidden={!open} />
      <aside
        className={`fs-panel ${open ? 'on' : ''}`}
        role="dialog"
        aria-modal="true"
        aria-hidden={!open}
      >
        <div className="fs-head">
          <div className="fs-head-text">
            <div className="mono fs-eyebrow">{m.eyebrow}</div>
            <h3 className="fs-title">{m.title}</h3>
            {m.sub && <p className="fs-sub">{m.sub}</p>}
          </div>
          <button className="ds-close" type="button" onClick={onClose} aria-label="Close">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
          </button>
        </div>
        {isNews && (
          <div className="fs-tabs" role="tablist" aria-label="Newsroom sections">
            {tabs.map((t) => (
              <button
                key={t.id}
                role="tab"
                aria-selected={tab === t.id}
                className={`fs-tab ${tab === t.id ? 'on' : ''}`}
                onClick={() => setTab(t.id)}
                type="button"
              >
                {t.label}
              </button>
            ))}
          </div>
        )}
        <div className="fs-body">
          {isNews && tab === 'updates' && <UpdatesContent />}
          {isNews && tab === 'press' && <PressContent />}
          {isNews && tab === 'careers' && <CareersContent />}
          {which === 'privacy' && <PrivacyContent />}
          {which === 'climate' && <ClimateContent />}
        </div>
      </aside>
      <style>{`
        .fs-backdrop {
          position: fixed; inset: 0;
          background: rgba(3, 8, 5, 0.7);
          backdrop-filter: blur(6px);
          -webkit-backdrop-filter: blur(6px);
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.4s var(--ease-out);
          z-index: 80;
        }
        .fs-backdrop.on { opacity: 1; pointer-events: auto; }
        .fs-panel {
          position: fixed;
          top: 0; right: 0;
          width: min(560px, 100vw);
          height: 100dvh;
          background: var(--bg-0);
          border-left: 1px solid var(--line-strong);
          box-shadow: -40px 0 80px rgba(0,0,0,0.5);
          z-index: 81;
          display: flex;
          flex-direction: column;
          transform: translateX(100%);
          transition: transform 0.5s cubic-bezier(.22,.81,.26,1);
          overflow: hidden;
        }
        .fs-panel.on { transform: translateX(0); }
        .fs-head {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 20px;
          padding: 28px 28px 22px;
          border-bottom: 1px solid var(--line);
          flex-shrink: 0;
        }
        .fs-head-text { min-width: 0; }
        .fs-eyebrow { font-size: 11px; letter-spacing: 0.14em; color: var(--mint); }
        .fs-title {
          font-family: var(--font-display);
          font-size: 28px;
          font-weight: 600;
          letter-spacing: -0.02em;
          margin: 10px 0 0;
          color: var(--ink-0);
        }
        .fs-sub {
          font-size: 13px;
          line-height: 1.55;
          color: var(--ink-2);
          margin: 10px 0 0;
          max-width: 44ch;
        }
        .fs-tabs {
          display: flex;
          gap: 4px;
          padding: 14px 28px 0;
          border-bottom: 1px solid var(--line);
          flex-shrink: 0;
        }
        .fs-tab {
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--ink-3);
          padding: 12px 14px;
          border-bottom: 2px solid transparent;
          margin-bottom: -1px;
          transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
          cursor: pointer;
        }
        .fs-tab:hover { color: var(--ink-1); }
        .fs-tab.on { color: var(--mint); border-bottom-color: var(--mint); }
        .fs-body {
          flex: 1;
          overflow-y: auto;
          padding: 28px;
        }

        /* Shared content styles */
        .fs-entry { padding: 20px 0; border-bottom: 1px solid var(--line); }
        .fs-entry:last-child { border-bottom: 0; }
        .fs-entry-date {
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.14em;
          color: var(--ink-3);
          text-transform: uppercase;
        }
        .fs-entry-title {
          font-family: var(--font-display);
          font-size: 18px;
          font-weight: 600;
          letter-spacing: -0.01em;
          color: var(--ink-0);
          margin: 8px 0 10px;
        }
        .fs-entry-body {
          font-size: 14px;
          line-height: 1.6;
          color: var(--ink-2);
          margin: 0;
        }
        .fs-entry-tag {
          display: inline-block;
          font-size: 10px;
          font-family: var(--font-mono);
          letter-spacing: 0.1em;
          padding: 3px 8px;
          border-radius: 999px;
          margin-right: 8px;
          text-transform: uppercase;
          border: 1px solid var(--line-strong);
          color: var(--ink-2);
          vertical-align: middle;
        }
        .fs-entry-tag.tag-mint { color: var(--mint); border-color: rgba(159,232,112,0.35); background: rgba(159,232,112,0.08); }
        .fs-entry-tag.tag-lime { color: var(--lime); border-color: rgba(197,242,8,0.4); background: rgba(197,242,8,0.08); }

        @media (max-width: 520px) {
          .fs-head { padding: 22px 20px 18px; }
          .fs-body { padding: 22px 20px; }
          .fs-title { font-size: 24px; }
        }
      `}</style>
    </>
  );
}

function UpdatesContent() {
  const items = [
    { date: 'APR 18, 2026', tag: 'Release', tagClass: 'tag-mint', title: 'Builder v0.4 · Smart layouts', body: 'Sections now auto-arrange on mobile without breaking your design. Added a new publish diff view so you can preview exactly what changes before going live.' },
    { date: 'APR 04, 2026', tag: 'Feature', tagClass: '', title: 'Brand kit export', body: 'Download your brand kit as a shareable PDF. Great for client handoffs and agency work.' },
    { date: 'MAR 21, 2026', tag: 'Fundraise', tagClass: 'tag-lime', title: 'We closed £420k pre-seed', body: 'Led by Planet A Ventures, with participation from Ada Ventures and six operator angels from Shopify, Ecosia and Squarespace.' },
    { date: 'MAR 10, 2026', tag: 'Community', tagClass: '', title: 'Founding users: 100 / 100 full', body: 'Our private beta is now full. If you joined the waitlist, you\u2019ll hear from us before public launch in Q3.' },
    { date: 'FEB 27, 2026', tag: 'Release', tagClass: 'tag-mint', title: 'Carbon reporting in every template', body: 'Every template now ships with an embeddable carbon-per-view badge. Transparency by default.' },
  ];
  return (
    <div>
      {items.map((it, i) => (
        <article key={i} className="fs-entry">
          <div className="fs-entry-date">{it.date}</div>
          <h4 className="fs-entry-title">
            <span className={`fs-entry-tag ${it.tagClass}`}>{it.tag}</span>
            {it.title}
          </h4>
          <p className="fs-entry-body">{it.body}</p>
        </article>
      ))}
    </div>
  );
}

function CareersContent() {
  const roles = [
    { title: 'Founding Design Engineer', where: 'Sydney / Remote', type: 'Full-time', tag: 'New' },
    { title: 'Product Designer, Builder', where: 'Remote \u00b7 AU/EU timezones', type: 'Full-time', tag: 'Open' },
    { title: 'Growth + Community Lead', where: 'Sydney, Australia', type: 'Full-time', tag: 'Open' },
    { title: 'Climate Reporting Analyst', where: 'Remote', type: 'Contract \u00b7 6 mo', tag: 'Open' },
  ];
  const [applyingTo, setApplyingTo] = useStateI(null);

  if (applyingTo !== null) {
    return <ApplyForm role={roles[applyingTo]} onBack={() => setApplyingTo(null)} />;
  }

  return (
    <div>
      <p className="fs-entry-body" style={{ marginBottom: 24 }}>
        Four open roles. We\u2019re a distributed team of four, hiring with intention.
        If you care about climate and design in equal measure, we\u2019d love to hear from you.
      </p>
      {roles.map((r, i) => (
        <div key={i} className="fs-entry">
          <div className="fs-entry-date">{r.type} · {r.where}</div>
          <h4 className="fs-entry-title">
            <span className={`fs-entry-tag ${r.tag === 'New' ? 'tag-mint' : ''}`}>{r.tag}</span>
            {r.title}
          </h4>
          <button
            type="button"
            onClick={() => setApplyingTo(i)}
            className="careers-apply-btn"
          >
            Apply for this role
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>
      ))}
      <p className="fs-entry-body" style={{ marginTop: 24, fontSize: 12, color: 'var(--ink-3)' }}>
        Don\u2019t see your role? Write to <a href="mailto:careers@reesite.com" style={{ color: 'var(--mint)' }}>careers@reesite.com</a>. We read every email.
      </p>
      <style>{`
        .careers-apply-btn {
          display: inline-flex; align-items: center; gap: 8px;
          margin-top: 8px;
          color: var(--mint);
          font-size: 13px;
          font-weight: 500;
          padding: 0;
          transition: gap 0.25s var(--ease-out), color 0.25s var(--ease-out);
        }
        .careers-apply-btn:hover { gap: 12px; color: var(--lime); }
      `}</style>
    </div>
  );
}

function ApplyForm({ role, onBack }) {
  const [form, setForm] = useStateI({ name: '', email: '', linkedin: '', message: '' });
  const [status, setStatus] = useStateI('idle');
  const [err, setErr] = useStateI('');

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

  const submit = (e) => {
    e.preventDefault();
    if (!form.name.trim()) { setErr('Please add your name.'); return; }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) { setErr('Please add a valid email.'); return; }
    setErr('');
    setStatus('submitting');
    setTimeout(() => setStatus('success'), 700);
  };

  if (status === 'success') {
    return (
      <div>
        <button type="button" onClick={onBack} className="apply-back">
          <svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M11 3L3 11M3 11H9M3 11V5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          Back to roles
        </button>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '20px 0', color: 'var(--mint)' }}>
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
            <circle cx="11" cy="11" r="10" stroke="var(--mint)" strokeWidth="1.5"/>
            <path d="M6 11.5L9.5 15L16 8.5" stroke="var(--mint)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          <div>
            <div style={{ fontWeight: 600, color: 'var(--ink-0)', fontSize: 16 }}>Application received.</div>
            <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 2 }}>We\u2019ll be in touch within a week.</div>
          </div>
        </div>
        <style>{applyFormStyles}</style>
      </div>
    );
  }

  return (
    <div>
      <button type="button" onClick={onBack} className="apply-back">
        <svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M11 3L3 11M3 11H9M3 11V5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
        Back to roles
      </button>
      <div className="fs-entry-date" style={{ marginTop: 8 }}>{role.type} · {role.where}</div>
      <h4 className="fs-entry-title" style={{ marginTop: 6 }}>{role.title}</h4>
      <p className="fs-entry-body" style={{ marginBottom: 22 }}>
        Tell us a bit about you. No cover letters, no buzzwords. Just what you\u2019ve built and why this role.
      </p>

      <form onSubmit={submit} className="apply-form">
        <label className="apply-field">
          <span>Name</span>
          <input type="text" value={form.name} onChange={set('name')} placeholder="Your full name" autoComplete="name" />
        </label>
        <label className="apply-field">
          <span>Email</span>
          <input type="email" value={form.email} onChange={set('email')} placeholder="you@email.com" autoComplete="email" />
        </label>
        <label className="apply-field">
          <span>LinkedIn or portfolio</span>
          <input type="url" value={form.linkedin} onChange={set('linkedin')} placeholder="https://" />
        </label>
        <label className="apply-field">
          <span>Why this role?</span>
          <textarea value={form.message} onChange={set('message')} rows="5" placeholder="A few sentences is plenty." />
        </label>

        {err && <div className="apply-err">{err}</div>}

        <button type="submit" className="btn btn-primary" disabled={status === 'submitting'} style={{ marginTop: 8, justifyContent: 'center' }}>
          {status === 'submitting' ? 'Sending\u2026' : 'Submit application'}
        </button>
      </form>
      <style>{applyFormStyles}</style>
    </div>
  );
}

const applyFormStyles = `
  .apply-back {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ink-2);
    font-size: 12px;
    font-family: var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0;
    margin-bottom: 8px;
    transition: color 0.25s var(--ease-out);
  }
  .apply-back:hover { color: var(--mint); }
  .apply-form { display: flex; flex-direction: column; gap: 16px; }
  .apply-field { display: flex; flex-direction: column; gap: 6px; }
  .apply-field span {
    font-size: 11px;
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .apply-field input, .apply-field textarea {
    background: var(--bg-1);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--ink-0);
    padding: 12px 14px;
    font-size: 14px;
    font-family: var(--font-body);
    transition: border-color 0.2s, background 0.2s;
    resize: vertical;
  }
  .apply-field input:focus, .apply-field textarea:focus {
    outline: none;
    border-color: var(--mint);
    background: var(--bg-2);
  }
  .apply-err {
    font-size: 13px;
    color: #ff9c9c;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    background: rgba(255,107,107,0.08);
    border: 1px solid rgba(255,107,107,0.25);
  }
`;

function PressContent() {
  const items = [
    { date: 'APR 21, 2026', tag: 'Coverage', tagClass: '', title: 'Sifted: "The green web builder betting on climate-native SMBs"', body: 'Read the full feature on Sifted covering our pre-seed close and go-to-market.' },
    { date: 'MAR 21, 2026', tag: 'Announcement', tagClass: 'tag-mint', title: 'Ree closes £420k pre-seed round', body: 'Full press release and assets available on request. Get in touch with press@reesite.com.' },
    { date: 'FEB 14, 2026', tag: 'Podcast', tagClass: '', title: 'Founders Climate Pod, episode 42', body: 'Nicola Rennie on building the first carbon-negative website builder.' },
    { date: 'JAN 09, 2026', tag: 'Launch', tagClass: 'tag-lime', title: 'Private beta opens to first 100 founding users', body: 'Our invite-only beta runs through Q2 2026. Public launch scheduled for Q3.' },
  ];
  return (
    <div>
      <p className="fs-entry-body" style={{ marginBottom: 24 }}>
        For press enquiries, assets, logos or interviews, write to <a href="mailto:press@reesite.com" style={{ color: 'var(--mint)' }}>press@reesite.com</a>.
        Press kit available on request.
      </p>
      {items.map((it, i) => (
        <article key={i} className="fs-entry">
          <div className="fs-entry-date">{it.date}</div>
          <h4 className="fs-entry-title">
            <span className={`fs-entry-tag ${it.tagClass}`}>{it.tag}</span>
            {it.title}
          </h4>
          <p className="fs-entry-body">{it.body}</p>
        </article>
      ))}
    </div>
  );
}

function PrivacyContent() {
  const blocks = [
    { h: 'The short version', p: 'We collect the minimum we need to run Ree, we don\u2019t sell your data, and we don\u2019t use third-party ad trackers. Ever.' },
    { h: 'What we collect', p: 'Your email (to contact you), basic site analytics you opt into (privacy-first, cookie-free), and billing details (handled by Stripe, never touched by us).' },
    { h: 'How we use it', p: 'To deliver the product, respond to you, and understand which parts of Ree are useful so we can improve them. That\u2019s it.' },
    { h: 'Where data lives', p: 'EU-based servers running on 100% renewable energy. We process data under GDPR-equivalent protections regardless of where you sign up from.' },
    { h: 'Your rights', p: 'You can export or delete everything in one click from your account settings, or email privacy@reesite.com. We respond within 14 days, usually much faster.' },
    { h: 'Cookies', p: 'This holding page uses one cookie to remember your preferences. Our product uses only strictly-necessary cookies by default. No analytics cookies unless you explicitly opt in.' },
    { h: 'Questions', p: 'Email privacy@reesite.com. A human will reply, not a bot.' },
  ];
  return (
    <div>
      {blocks.map((b, i) => (
        <article key={i} className="fs-entry">
          <h4 className="fs-entry-title" style={{ marginTop: 0 }}>{b.h}</h4>
          <p className="fs-entry-body">{b.p}</p>
        </article>
      ))}
      <p className="fs-entry-body" style={{ marginTop: 24, fontSize: 12, color: 'var(--ink-3)' }}>
        Last updated 04 Apr 2026. The full legal policy is available at <a href="#" style={{ color: 'var(--mint)' }}>reesite.com/privacy</a>.
      </p>
    </div>
  );
}

function ClimateContent() {
  const [email, setEmail] = useStateI('');
  const [status, setStatus] = useStateI('idle');
  const submit = (e) => {
    e.preventDefault();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) return;
    setStatus('submitting');
    setTimeout(() => setStatus('success'), 700);
  };
  return (
    <div>
      <div style={{
        border: '1px solid var(--line-strong)',
        borderRadius: 'var(--r-lg)',
        padding: 24,
        background: 'linear-gradient(180deg, rgba(159,232,112,0.06), rgba(159,232,112,0) 70%)',
        marginBottom: 24,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M6 11V8a6 6 0 0112 0v3m-9 0h6m-9 0h12v9H3v-9z" stroke="var(--mint)" strokeWidth="1.6" fill="none" strokeLinejoin="round"/></svg>
          <span className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: 'var(--mint)' }}>SUBSCRIBER-ONLY</span>
        </div>
        <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, margin: '0 0 10px', color: 'var(--ink-0)' }}>
          Access the Ree Quarterly Climate Report
        </h4>
        <p className="fs-entry-body" style={{ margin: '0 0 20px' }}>
          Live numbers on grams of CO\u2082 avoided across the Ree network, hosting-vs-industry benchmarks,
          offset breakdowns, and our full methodology. Free. Quarterly. One click to unsubscribe.
        </p>

        {status === 'success' ? (
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--mint)', fontSize: 14 }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.5"/><path d="M7 12l3 3 7-7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            Subscribed. The Q2 2026 report will land in your inbox shortly.
          </div>
        ) : (
          <form onSubmit={submit} style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="you@company.com"
              className="fs-email-input"
              required
            />
            <button type="submit" className="btn btn-primary" disabled={status === 'submitting'}>
              {status === 'submitting' ? 'Sending…' : 'Subscribe & unlock'}
            </button>
          </form>
        )}
      </div>

      <div style={{ opacity: 0.55, pointerEvents: 'none', filter: 'blur(3px)', userSelect: 'none' }} aria-hidden="true">
        <h4 className="fs-entry-title" style={{ marginTop: 0 }}>Q1 · 2026 highlights</h4>
        <p className="fs-entry-body">Grams of CO₂ avoided across the Ree network: 14,200,000g.</p>
        <p className="fs-entry-body">Median page weight: 112kB, down from 178kB in Q4 2025.</p>
        <p className="fs-entry-body">Renewable energy coverage: 100%. Offsets purchased: 2.4t verified.</p>
      </div>
      <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', letterSpacing: '0.12em', marginTop: 12 }}>
        🔒 SUBSCRIBE TO UNLOCK FULL REPORT
      </div>

      <style>{`
        .fs-email-input {
          flex: 1;
          min-width: 200px;
          background: var(--bg-0);
          border: 1px solid var(--line-strong);
          border-radius: var(--r-sm);
          color: var(--ink-0);
          padding: 12px 14px;
          font-size: 14px;
          font-family: var(--font-sans);
          transition: border-color 0.2s;
        }
        .fs-email-input:focus { outline: none; border-color: var(--mint); }
      `}</style>
    </div>
  );
}

Object.assign(window, { Investors, Contact, FinalCTA, Footer });