// Lower.jsx. Problem + Audience + Portal + FAQ + Testimonials + CTA + Footer

// ======================================================================
// Problem. The real problem (quote + 4 bullet failures)
// ======================================================================
function Problem({ theme, ornaments }) {
  const isDark = theme === 'dark';
  const bg = isDark ? 'var(--night-owl)' : 'var(--linen)';
  const fg = isDark ? 'var(--cream)' : 'var(--night-owl)';
  const mute = isDark ? 'var(--warm-sand)' : 'var(--dusk)';
  const border = isDark ? 'rgba(196,162,101,0.18)' : 'var(--sandstone)';

  const items = [
    { h: 'Vacancies eating into your yield', p: 'Every day a unit sits empty is money your property is losing. Strategy matters more than luck.' },
    { h: 'Self-managing is a second job', p: "Investor time is worth more than what most PMs charge. Reclaim yours." },
    { h: 'One-size-fits-all management', p: 'Most PMs only know one model. Your portfolio deserves a firm that knows three.' },
    { h: 'No visibility into performance', p: "If you don't know your actual numbers, you can't optimize. We fix that from day one." },
  ];

  return (
    <section style={{ padding: '140px 40px', background: bg, color: fg, position: 'relative' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto 64px' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--sovana-gold)' }}>// THE REAL PROBLEM</div>
      </div>

      <div style={{ maxWidth: 1040, margin: '0 auto 80px', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 32, alignItems: 'start' }}>
        <div aria-hidden="true" style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 500, fontSize: 96, lineHeight: 0.7, color: 'var(--sovana-gold)', letterSpacing: '-0.04em' }}>“</div>
        <blockquote style={{ margin: 0, paddingTop: 18, fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400, fontSize: 40, lineHeight: 1.24, letterSpacing: '-0.005em', color: fg, textWrap: 'pretty' }}>
          You didn't buy the property to manage it.<br />You bought it to own it.
        </blockquote>
      </div>

      <div style={{ maxWidth: 1040, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '40px 64px' }} className="sv-feat-grid">
        {items.map((it, i) => (
          <div key={i} style={{ display: 'flex', gap: 22 }}>
            <div style={{ flexShrink: 0, marginTop: 6 }}>
              <span style={{ display: 'inline-block', width: 14, height: 14, borderRadius: '50%', border: '1.5px solid var(--sovana-gold)' }} aria-hidden="true" />
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 16, letterSpacing: '0.005em', color: fg, marginBottom: 8 }}>{it.h}</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.6, color: mute }}>{it.p}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ======================================================================
// Audience. "Who we work with / Built for Serious Investors"
// ======================================================================
function Audience({ theme }) {
  const isDark = theme === 'dark';
  const bg = isDark ? 'var(--obsidian)' : 'var(--cream)';
  const fg = isDark ? 'var(--cream)' : 'var(--night-owl)';
  const mute = isDark ? 'var(--warm-sand)' : 'var(--dusk)';
  const cardBg = isDark ? 'var(--night-owl)' : 'var(--linen)';
  const border = isDark ? 'rgba(196,162,101,0.18)' : 'var(--sandstone)';

  const types = [
    { num: '01', title: 'Out of State Investors', body: "You own Chicago real estate but you're not in Chicago. We're your boots on the ground, your eyes in the property, and your voice to every tenant and vendor." },
    { num: '02', title: 'Portfolio Holders (2 to 50 Units)', body: "You've scaled past self management but need a firm that thinks in terms of portfolio ROI. Not just individual units. We talk in yield, cap rate, and strategy." },
    { num: '03', title: 'First Time Landlords Scaling Up', body: "You own your first or second property and you're building toward more. We help you do it right from the start. No costly mistakes, no wasted years." },
    { num: '04', title: 'Busy Professionals & W2 Investors', body: 'Real estate is your wealth vehicle, not your job. We remove every operational task from your plate so you can keep earning without the landlord headaches.' },
  ];

  return (
    <section style={{ padding: '140px 40px', background: bg, color: fg }}>
      <div style={{ maxWidth: 1240, margin: '0 auto 64px' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--sovana-gold)' }}>// WHO WE WORK WITH</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 60, lineHeight: 1.04, letterSpacing: '-0.015em', margin: '20px 0 0', color: fg }}>Built for <em style={{ fontStyle: 'italic', color: 'var(--sovana-gold)' }}>Serious</em> Investors.</h2>
      </div>
      <div style={{ maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: `1px solid ${border}` }} className="sv-feat-grid">
        {types.map((t, i) => (
          <div key={i} style={{ padding: '44px 32px', background: cardBg, borderRight: i < 3 ? `1px solid ${border}` : 'none', position: 'relative' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 64, fontWeight: 500, color: 'var(--sovana-gold)', letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 28 }}>{t.num}</div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 22, lineHeight: 1.2, margin: '0 0 14px', letterSpacing: '-0.005em', color: fg }}>{t.title}</h3>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.65, margin: 0, color: mute }}>{t.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ======================================================================
// Portal. Owner Portal (mock dashboard widget + feature callouts)
// ======================================================================
function Portal({ theme }) {
  const isDark = theme === 'dark';
  const bg = isDark ? 'var(--night-owl)' : 'var(--linen)';
  const fg = isDark ? 'var(--cream)' : 'var(--night-owl)';
  const mute = isDark ? 'var(--warm-sand)' : 'var(--dusk)';
  const cardBg = isDark ? 'var(--obsidian)' : 'var(--cream)';
  const border = isDark ? 'rgba(196,162,101,0.24)' : 'var(--sandstone)';
  const line = isDark ? 'rgba(196,162,101,0.12)' : 'rgba(26,26,23,0.06)';

  const rows = [
    ['Property', '1842 W. Division, Unit 2', false],
    ['Strategy', 'Mid Term Furnished', true],
    ['Status', '● Occupied', true, 'var(--success)'],
    ['Monthly Revenue', '$2,900.00', true],
    ['Occupancy (YTD)', '97.4%', true],
    ['Open Maintenance', 'None', false, 'var(--success)'],
    ['Next Owner Disbursement', 'Apr 1, 2026', true],
  ];

  const features = [
    { h: 'Real-Time Owner Dashboard', p: 'Log in anytime to see occupancy, revenue, maintenance status, and upcoming disbursements across your entire portfolio.', icon: 'grid' },
    { h: 'Monthly Owner Reports', p: 'Detailed P&L sent automatically each month. No chasing numbers. No surprises. Tax ready year end statements included.', icon: 'pdf' },
    { h: 'Instant Maintenance Alerts', p: "You're notified the moment a maintenance issue is logged. And again when it's resolved. Full transparency, always.", icon: 'bell' },
    { h: 'Automated Disbursements', p: 'Rent hits your account on a predictable schedule. No delays, no manual processes, no excuses.', icon: 'arrow' },
  ];

  return (
    <section id="portal" style={{ padding: '140px 40px', background: bg, color: fg }}>
      <div style={{ maxWidth: 1240, margin: '0 auto 56px', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'end' }} className="sv-grid-collapse">
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--sovana-gold)' }}>// OWNER PORTAL</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 58, lineHeight: 1.04, letterSpacing: '-0.015em', margin: '20px 0 0', color: fg, textWrap: 'pretty' }}>Visibility Into<br /><em style={{ fontStyle: 'italic', color: 'var(--sovana-gold)' }}>Every Dollar</em>.</h2>
        </div>
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 18, lineHeight: 1.6, margin: 0, color: mute, maxWidth: 520 }}>
          The owner portal is the single source of truth for your portfolio. Occupancy, revenue, maintenance, and disbursements. Always one login away.
        </p>
      </div>

      <div style={{ maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 40 }} className="sv-grid-collapse">
        {/* Portal mock */}
        <div style={{ background: cardBg, border: `1px solid ${border}`, borderRadius: 4, overflow: 'hidden' }}>
          <div style={{ padding: '16px 24px', borderBottom: `1px solid ${border}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: isDark ? 'rgba(15,29,43,0.4)' : 'rgba(212,196,174,0.15)' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', fontWeight: 600, color: 'var(--sovana-gold)', textTransform: 'uppercase' }}>SOVANA // OWNER PORTAL</div>
            <div style={{ display: 'flex', gap: 6 }} aria-hidden="true">
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'rgba(196,162,101,0.35)' }} />
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'rgba(196,162,101,0.55)' }} />
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--sovana-gold)' }} />
            </div>
          </div>
          <div style={{ padding: '8px 24px 20px' }}>
            {rows.map(([label, value, hilite, valueColor], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', padding: '18px 0', borderBottom: i < rows.length - 1 ? `1px solid ${line}` : 'none' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.06em', color: mute }}>{label}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 500, color: valueColor || (hilite ? 'var(--sovana-gold)' : fg) }}>{value}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Feature callouts */}
        <div>
          {features.map((f, i) => (
            <div key={i} style={{ display: 'flex', gap: 20, padding: '22px 0', borderBottom: i < features.length - 1 ? `1px solid ${border}` : 'none' }}>
              <div style={{ flexShrink: 0, width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', border: `1px solid ${border}`, borderRadius: 4 }}>
                <PortalIcon kind={f.icon} />
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 15, color: fg, marginBottom: 6 }}>{f.h}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.6, color: mute }}>{f.p}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PortalIcon({ kind }) {
  const s = { width: 18, height: 18, stroke: 'var(--sovana-gold)', strokeWidth: 1.4, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'grid': return <svg {...s} viewBox="0 0 20 20"><rect x="3" y="3" width="6" height="6" /><rect x="11" y="3" width="6" height="6" /><rect x="3" y="11" width="6" height="6" /><rect x="11" y="11" width="6" height="6" /></svg>;
    case 'pdf': return <svg {...s} viewBox="0 0 20 20"><path d="M5 2h7l3 3v13H5z" /><path d="M12 2v3h3M7 10h6M7 13h6M7 7h3" /></svg>;
    case 'bell': return <svg {...s} viewBox="0 0 20 20"><path d="M10 3c-3 0-5 2-5 5v3l-2 2h14l-2-2V8c0-3-2-5-5-5zM8 15a2 2 0 0 0 4 0" /></svg>;
    case 'arrow': return <svg {...s} viewBox="0 0 20 20"><path d="M3 10h14M12 5l5 5-5 5" /></svg>;
    default: return null;
  }
}

// ======================================================================
// Testimonial. Investor voices (3 rotating quotes)
// ======================================================================
function Testimonial({ theme, ornaments }) {
  const isDark = theme === 'dark';
  const bg = isDark ? 'var(--obsidian)' : 'var(--cream)';
  const fg = isDark ? 'var(--cream)' : 'var(--night-owl)';
  const mute = isDark ? 'var(--warm-sand)' : 'var(--tuscan-earth)';
  const [i, setI] = React.useState(0);
  const quotes = [
    {
      q_a: 'Sovana converted my long term unit to mid term and I saw a ',
      q_em: '40% revenue jump',
      q_b: " in the first quarter. I didn't change a single thing about the property. Just the strategy.",
      who: 'Marcus T.',
      role: 'Portfolio owner · 6 units, Chicagoland',
    },
    {
      q_a: "I'm based in Texas. Before Sovana, I was flying in twice a year to deal with issues. Now I check the dashboard once a week and that's it. ",
      q_em: 'Completely hands off',
      q_b: '.',
      who: 'Diana R.',
      role: 'Out of state investor. 3 units, Logan Square',
    },
    {
      q_a: 'What separates them is ',
      q_em: 'they talk like investors',
      q_b: ". They understand cap rate, they understand yield, they understand what I'm actually trying to accomplish with each asset.",
      who: 'Kevin M.',
      role: 'W2 investor · 2 units, Wicker Park',
    },
  ];
  const t = quotes[i];
  return (
    <section style={{ padding: '140px 40px', background: bg, color: fg }}>
      <div style={{ maxWidth: 980, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--sovana-gold)', marginBottom: 16 }}>// INVESTOR VOICES</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 48, lineHeight: 1.1, letterSpacing: '-0.01em', margin: '0 0 60px', color: fg }}>From <em style={{ fontStyle: 'italic', color: 'var(--sovana-gold)' }}>Owners</em> Like You.</h2>
        <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--sovana-gold)', fontSize: 60, lineHeight: 0.8, textAlign: 'left', marginBottom: 12 }}>“</div>
        <blockquote style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400, fontSize: 38, lineHeight: 1.35, letterSpacing: '-0.005em', margin: 0, textWrap: 'pretty', color: fg, textAlign: 'left' }}>
          {t.q_a}
          {ornaments ? (
            <span style={{ position: 'relative', display: 'inline-block', padding: '0 10px' }}>
              {t.q_em}
              <svg style={{ position: 'absolute', left: -6, top: '50%', width: 'calc(100% + 12px)', height: 54, transform: 'translateY(-50%)', pointerEvents: 'none', overflow: 'visible' }} viewBox="0 0 99.782 31.568" preserveAspectRatio="none" fill="none" aria-hidden="true">
                <path d="M 16.775 5.081 C 16.531 5.185 16.338 5.381 16.24 5.627 C 16.141 5.874 16.145 6.149 16.25 6.394 C 16.354 6.638 16.552 6.831 16.798 6.93 C 17.044 7.028 17.319 7.024 17.563 6.919 C 21.023 5.436 24.809 4.517 28.606 3.842 C 48.035 0.996 68.684 1.398 87.362 7.253 C 91.746 9.096 96.534 11.388 98.534 15.474 C 100.505 19.772 96.123 23.89 92.267 26.384 C 67.206 34.409 38.398 31.423 12.317 26.523 C 8.477 25.304 4.52 23.774 1.95 20.757 C -0.859 17.697 0.601 13.016 3.393 10.211 C 6.924 6.452 11.868 4.28 16.772 2.641 C 20.479 1.438 24.304 0.547 28.169 0 C 24.293 0.472 20.446 1.279 16.697 2.401 C 11.734 3.939 6.701 5.977 2.945 9.791 C 0.009 12.547 -1.814 17.82 1.282 21.29 C 4.052 24.628 8.109 26.197 12.021 27.478 C 38.627 32.559 66.553 35.985 93.071 27.616 C 96.959 25.086 102.342 20.594 99.956 14.859 C 97.472 9.886 92.482 7.725 87.975 5.747 C 68.626 -0.406 48.195 -0.838 28.275 1.934 C 24.38 2.607 20.475 3.522 16.775 5.081 Z" fill="#C4A265" fillRule="nonzero" />
              </svg>
            </span>
          ) : (<em style={{ color: 'var(--sovana-gold)' }}>{t.q_em}</em>)}
          {t.q_b}
        </blockquote>
        <div style={{ marginTop: 48, color: mute, textAlign: 'left' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 14, letterSpacing: '0.04em', color: fg }}>{t.who}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, marginTop: 6, letterSpacing: '0.08em', fontWeight: 500 }}>{t.role}</div>
        </div>
        <div style={{ marginTop: 40, display: 'flex', gap: 8, justifyContent: 'flex-start' }}>
          {quotes.map((_, k) => (
            <button key={k} onClick={() => setI(k)} style={{ width: i === k ? 32 : 8, height: 8, borderRadius: 999, border: 0, padding: 0, cursor: 'pointer', background: i === k ? 'var(--sovana-gold)' : (isDark ? 'rgba(245,239,228,0.2)' : 'var(--sandstone)'), transition: 'width 240ms var(--ease-out)' }} aria-label={`Quote ${k + 1}`} />
          ))}
        </div>
      </div>
    </section>
  );
}

// ======================================================================
// FAQ. Common questions (accordion) + closing panel
// ======================================================================
function FAQ({ theme, onInquire }) {
  const isDark = theme === 'dark';
  const bg = isDark ? 'var(--night-owl)' : 'var(--linen)';
  const fg = isDark ? 'var(--cream)' : 'var(--night-owl)';
  const mute = isDark ? 'var(--warm-sand)' : 'var(--dusk)';
  const border = isDark ? 'rgba(196,162,101,0.2)' : 'var(--sandstone)';

  const qs = [
    { q: 'How do you decide which strategy fits my property?', a: 'We start with a walk through and a market pull. Location, unit layout, neighborhood tenant mix, current rent vs. comps, seasonal demand patterns, and STR regulation all feed the decision. You get a side by side projection for long, mid, and short before you commit to anything.' },
    { q: 'What are your management fees?', a: "One fee, deducted from the income we collect. 6 to 8% of rent on long term, 12% of each stay on mid term, 18 to 22% on short term. No onboarding fee, no setup fee, no markups on vendor invoices. You see every line on your monthly statement." },
    { q: 'What markets in Chicagoland do you cover?', a: 'The city proper (Lincoln Park, Logan Square, West Loop, Wicker Park, River North and adjacent), the North Shore (Evanston through Highland Park), and the collar counties. Twelve+ sub-markets in active rotation as of Q2 2026.' },
    { q: 'How do you handle vacancies?', a: 'Dynamic re-pricing starts at day three. At day ten we re-shoot listings and re-target demand pools. At day twenty we sit down and discuss whether the current strategy is the right one, or if a pivot (LTR → MTR, or MTR → STR) will shorten the gap.' },
    { q: 'Can I switch strategies after we start?', a: "Yes. That's the entire point. We review each unit quarterly and flag candidates for a strategy change. The Wicker Park case study on this page is a real example: we moved the unit from LTR to MTR after the first review and revenue jumped 57%." },
    { q: 'How long does onboarding take?', a: "Typically 10 to 14 days for long term and 3 to 4 weeks for mid- and short term (the extra time covers furnishing consultation, permits, and listing preparation). You'll have a named steward assigned on day one." },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" style={{ padding: '140px 40px', background: bg, color: fg }}>
      <div style={{ maxWidth: 900, margin: '0 auto 56px' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--sovana-gold)' }}>// COMMON QUESTIONS</div>
      </div>
      <div style={{ maxWidth: 900, margin: '0 auto', borderTop: `1px solid ${border}` }}>
        {qs.map((x, i) => {
          const isOpen = open === i;
          return (
            <div key={i} style={{ borderBottom: `1px solid ${border}` }}>
              <button
                onClick={() => setOpen(isOpen ? -1 : i)}
                aria-expanded={isOpen}
                style={{
                  width: '100%', background: 'transparent', border: 0, padding: '26px 4px', cursor: 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, textAlign: 'left',
                  fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, letterSpacing: '-0.005em', color: fg,
                }}
              >
                <span>{x.q}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 22, color: 'var(--sovana-gold)', fontWeight: 400, transform: isOpen ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform 240ms var(--ease-out)', display: 'inline-block' }}>+</span>
              </button>
              <div style={{ display: 'grid', gridTemplateRows: isOpen ? '1fr' : '0fr', transition: 'grid-template-rows 320ms var(--ease-out)' }}>
                <div style={{ overflow: 'hidden' }}>
                  <p style={{ padding: '0 0 24px', margin: 0, fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.7, color: mute, maxWidth: 720 }}>{x.a}</p>
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <div style={{ maxWidth: 900, margin: '72px auto 0', padding: '40px 0 0', borderTop: `1px solid ${border}`, display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'center' }} className="sv-grid-collapse">
        <div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400, fontSize: 32, lineHeight: 1.2, letterSpacing: '-0.005em', color: fg, margin: '0 0 14px' }}>Still have questions? That's what the call is for.</h3>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.65, margin: 0, color: mute, maxWidth: 620 }}>Every investor's situation is different. Portfolio size, property type, location, risk profile, target yield. These all shape the right answer. We'd rather spend 20 minutes on a call than have you make a decision without the full picture.</p>
        </div>
        <button onClick={onInquire} style={{ whiteSpace: 'nowrap', background: 'var(--sovana-gold)', color: 'var(--obsidian)', border: 0, padding: '16px 26px', borderRadius: 4, fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', cursor: 'pointer' }}>Schedule a free analysis</button>
      </div>
    </section>
  );
}

// ======================================================================
// CTASection. "Stop Managing. Start Earning." email capture
// ======================================================================
function CTASection({ onInquire, ornaments }) {
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);
  const submit = async (e) => {
    e.preventDefault();
    if (!email) return;
    setSubmitting(true);
    setError(null);
    try {
      const id = window.SV_FORMSPREE_ID;
      if (id) {
        const res = await fetch('https://formspree.io/f/' + id, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
          body: JSON.stringify({
            _subject: 'New Sovana CTA email signup',
            source: 'cta-email-capture',
            email,
          }),
        });
        if (!res.ok) throw new Error('HTTP ' + res.status);
      } else {
        console.warn('[Sovana] SV_FORMSPREE_ID not set in index.html — CTA email submission is mocked.');
      }
      setSent(true);
    } catch (err) {
      setError("Couldn't reach the server. Please try again in a moment.");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--sovana-teal)', color: 'var(--cream)', padding: '140px 40px' }}>
      {ornaments && <div className="sv-orbit" style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%) rotate(-6deg)', width: 820, height: 280, border: '1.5px solid var(--sovana-gold)', borderRadius: '50%', opacity: 0.45, pointerEvents: 'none' }} />}
      {ornaments && <div className="sv-orbit" style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%) rotate(20deg)', width: 540, height: 540, border: '1px solid var(--sovana-gold)', borderRadius: '50%', opacity: 0.2, pointerEvents: 'none' }} />}
      <div style={{ position: 'relative', maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--sovana-gold)', marginBottom: 24 }}>// READY TO START</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 76, fontWeight: 400, lineHeight: 1.02, letterSpacing: '-0.02em', margin: '0 0 24px' }}>Stop Managing.<br />Start <em style={{ fontStyle: 'italic', color: 'var(--sovana-gold)' }}>Earning</em>.</h2>
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 18, color: 'var(--warm-sand)', margin: '0 auto', lineHeight: 1.6, maxWidth: 520 }}>
          Tell us your email and we'll reach out within 24 hours to schedule your free portfolio analysis. No pitch. No pressure. Just numbers.
        </p>

        {!sent ? (
          <>
            <form onSubmit={submit} style={{ marginTop: 40, display: 'flex', gap: 0, justifyContent: 'center', flexWrap: 'wrap', alignItems: 'stretch', maxWidth: 520, marginLeft: 'auto', marginRight: 'auto', border: '1px solid rgba(196,162,101,0.4)', borderRadius: 4, overflow: 'hidden', background: 'rgba(0,0,0,0.18)' }}>
              <input
                type="email"
                value={email}
                onChange={e => setEmail(e.target.value)}
                placeholder="your@email.com"
                disabled={submitting}
                style={{ flex: 1, minWidth: 240, border: 0, background: 'transparent', padding: '16px 20px', color: 'var(--cream)', fontFamily: 'var(--font-sans)', fontSize: 15, outline: 'none' }}
              />
              <button type="submit" disabled={submitting} style={{ background: 'var(--sovana-gold)', color: 'var(--obsidian)', border: 0, padding: '16px 24px', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', cursor: submitting ? 'not-allowed' : 'pointer', opacity: submitting ? 0.7 : 1 }}>{submitting ? 'Sending...' : 'Get my analysis'}</button>
            </form>
            {error && <div style={{ marginTop: 14, padding: '10px 14px', background: 'rgba(182,65,65,0.18)', border: '1px solid rgba(182,65,65,0.45)', borderRadius: 4, fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--cream)', maxWidth: 520, marginLeft: 'auto', marginRight: 'auto' }}>{error}</div>}
          </>
        ) : (
          <div style={{ marginTop: 40, padding: '22px 28px', background: 'rgba(196,162,101,0.12)', border: '1px solid rgba(196,162,101,0.4)', borderRadius: 4, maxWidth: 520, marginLeft: 'auto', marginRight: 'auto', fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--cream)' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--sovana-gold)', textTransform: 'uppercase', marginBottom: 6 }}>// Received</div>
            We'll write back to <strong style={{ color: 'var(--sovana-gold)' }}>{email}</strong> within 24 hours with a tailored portfolio analysis.
          </div>
        )}

        <div style={{ marginTop: 24, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--warm-sand)', letterSpacing: '0.08em', opacity: 0.7 }}>We respond within 24 hours. No spam. No pressure.</div>

        <div style={{ marginTop: 36, fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--warm-sand)', opacity: 0.7 }}>
          Prefer the long form? <button onClick={onInquire} style={{ background: 'transparent', border: 0, color: 'var(--sovana-gold)', fontFamily: 'inherit', fontSize: 'inherit', cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 3 }}>Open the full intake →</button>
        </div>
      </div>
    </section>
  );
}

// ======================================================================
// Footer
// ======================================================================
function Footer() {
  return (
    <footer style={{ background: 'var(--obsidian)', color: 'var(--warm-sand)', padding: '96px 40px 32px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.4fr 2.6fr', gap: 80 }} className="sv-grid-collapse">
        <div>
          <Wordmark color="var(--cream)" size={24} theme="dark" />
          <p style={{ marginTop: 22, maxWidth: 360, fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--tuscan-earth)', lineHeight: 1.65 }}>
            Chicagoland's investor first property management firm. Long term, mid term, and short term rentals. One team, one portfolio.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }} className="sv-feat-grid">
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--sovana-gold)', marginBottom: 20 }}>// Navigation</div>
            {[['#strategies', 'Our Strategies'], ['#services', 'Services'], ['#results', 'Results'], ['#case', 'Case Study'], ['#faq', 'FAQ']].map(([h, l]) => (
              <a key={l} href={h} style={{ display: 'block', fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--warm-sand)', textDecoration: 'none', padding: '6px 0' }}>{l}</a>
            ))}
          </div>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--sovana-gold)', marginBottom: 20 }}>// Contact</div>
            {[['#', 'Book a free analysis'], ['mailto:hello@sovanapm.com', 'hello@sovanapm.com'], ['tel:+13125550100', '(312) 555-0100'], ['#', 'Chicago, IL']].map(([h, l]) => (
              <a key={l} href={h} style={{ display: 'block', fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--warm-sand)', textDecoration: 'none', padding: '6px 0' }}>{l}</a>
            ))}
          </div>
        </div>
      </div>
      <div style={{ maxWidth: 1280, margin: '72px auto 0', paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.08)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--tuscan-earth)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
        <div>© 2026 Sovana Property Management · Chicagoland</div>
        <div>Built for investors · Operated by investors</div>
      </div>
    </footer>
  );
}

window.Problem = Problem;
window.Audience = Audience;
window.Portal = Portal;
window.Testimonial = Testimonial;
window.FAQ = FAQ;
window.CTASection = CTASection;
window.Footer = Footer;