// 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. The exact rate depends on the property, the strategy, and the scope of work. Long term carries the lowest rate. Short term the highest. After we walk the asset and run the numbers we send a clear quote. 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: 'Chicagoland and the surrounding suburbs. If you have a property in the metro area, reach out and we will let you know whether it fits our coverage.' },
    { 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. A long term unit that's underperforming may make more sense as a mid term furnished rental. A mid term in the right neighborhood may yield more as a short term. We move when the numbers say move." },
    { 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 endpoint = window.SV_FORM_ENDPOINT_CTA;
      if (endpoint) {
        const res = await fetch(endpoint, {
          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_FORM_ENDPOINT_CTA 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 best investor 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;