{children}

); } // Phone frame (minimal, no notch detail since these are decorative mocks) function Phone({ children, width = 260 }) { const h = Math.round(width * 2.05); return (

{children}

); } // ────────────────────────────────────────────────────────── // Reusable building blocks // ────────────────────────────────────────────────────────── function Pill({ t, children, tone = 'accent' }) { const bg = tone === 'accent' ? `color-mix(in oklch, ${t.accent} 18%, transparent)` : t.chip; const fg = tone === 'accent' ? t.accent : t.textDim; return ( {children} ); } function Btn({ t, children, primary = false, sm = false, href, onClick }) { const Tag = href ? 'a' : 'button'; const linkProps = href ? { href, target: '_blank', rel: 'noopener noreferrer' } : {}; return ( {children}); } function Nav({ t }) { return (

MyHomeAware

Product Use Cases Partners

); } function Logo({ t, size = 28 }) { // Abstract house-with-radar mark return ( ); } // ────────────────────────────────────────────────────────── // HERO — Daylight variant // ────────────────────────────────────────────────────────── function HeroDaylight({ t, headline, sub }) { return (

NEW · COMMUNITY INSIGHTS

{headline}

{sub}

Open the app ↗

{Ico.leaf(t.accent)} Trusted by families, agents, and service providers across the country.

); } // ────────────────────────────────────────────────────────── // HERO — Signal variant (full-bleed dark, map ambient bg) // ────────────────────────────────────────────────────────── function HeroSignal({ t, headline, sub }) { return (

{/* ambient map background */}

TRUSTED DATA SOURCES THAT YOU CAN VERIFY

{headline}

{sub}

Open the app ↗

{Ico.leaf(t.accent)} Trusted by families, agents, and service providers across the country.

{/* big laptop showcase under hero */}

); } // ────────────────────────────────────────────────────────── // Feature showcase — 3 cards w/ device frames // ────────────────────────────────────────────────────────── function Features({ t }) { return (

Everything around your home,
in one searchable view.} />

{/* Big: Map */}

{/* Small: Favorites — actual saved-addresses screen on phone */}

{/* Small: Export reports */}

{/* Big: Export — actual report PDF in a laptop */}

); } function SectionHead({ t, kicker, title, sub }) { return (

{kicker}

{title}

{sub &&

{sub}

}

); } function FeatureCard({ t, title, tag, body, children, h = 520, textW = '80%' }) { return (

{tag}

{title}

{body}

{children}

); } function ExportMock({ t }) { const accent = t.accent; return (

EMAIL REPORT

142 Elm Street

renee.p@gmail.com

PDF

142-Elm-St-Report.pdf

18 pages · attached

); } // ────────────────────────────────────────────────────────── // How it works // ────────────────────────────────────────────────────────── function HowItWorks({ t }) { const steps = [ { n: '01', title: 'Search an address', body: 'Search any property nationwide. We pull from 10+ trusted sources to see what is around it.' }, { n: '02', title: 'See what surrounds', body: 'Browse hazards, infrastructure, and environmental signals on the map — filter by category, set a radius.' }, { n: '03', title: 'Share the report', body: 'Email, export, or save to favorites. Every report is easy to see, easy to read, and easy to understand.' }]; return (

{steps.map((s) =>

{s.n}

{s.title}

{s.body}

)}

); } // ────────────────────────────────────────────────────────── // For who — homeowner vs agent // ────────────────────────────────────────────────────────── function ForWho({ t }) { return (

); } function AudienceCard({ t, kicker, title, body, bullets, ctaText, ctaHref, emphasised = false }) { const bg = emphasised ? t.text : t.surface; const fg = emphasised ? t.bg : t.text; const dim = emphasised ? t.isDark ? 'rgba(10,12,17,.65)' : 'rgba(248,246,241,.7)' : t.textDim; const border = emphasised ? 'transparent' : t.border; const accent = emphasised && !t.isDark ? '#a78bff' : t.accent; return (

{kicker}

{title}

{body}

{Ico.check(accent)} {b}

{ctaHref ? {ctaText} : }

); } // ────────────────────────────────────────────────────────── // ────────────────────────────────────────────────────────── // Partner inquiry modal // ────────────────────────────────────────────────────────── function PartnerModal({ t, onClose }) { const [form, setForm] = React.useState({ name: '', company: '', role: '', email: '', phone: '', message: '' }); const [status, setStatus] = React.useState('idle'); // idle | sending | success | error const [errorMsg, setErrorMsg] = React.useState(''); const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value })); // Close on backdrop click const onBackdrop = (e) => { if (e.target === e.currentTarget) onClose(); }; // Close on Escape React.useEffect(() => { const handler = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', handler); return () => window.removeEventListener('keydown', handler); }, [onClose]); const submit = async (e) => { e.preventDefault(); if (status === 'sending') return; setStatus('sending'); setErrorMsg(''); try { const res = await fetch('/api/partner-contact', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(form), }); const data = await res.json(); if (!res.ok) throw new Error(data.error || 'Something went wrong.'); setStatus('success'); } catch (err) { setErrorMsg(err.message || 'Something went wrong. Please try again.'); setStatus('error'); } }; const inputStyle = { width: '100%', boxSizing: 'border-box', background: t.surface, border: `1px solid ${t.borderStrong}`, borderRadius: 8, padding: '10px 13px', color: t.text, fontSize: 14, fontFamily: 'inherit', outline: 'none', }; const labelStyle = { display: 'block', fontSize: 12, fontWeight: 600, color: t.textDim, marginBottom: 5, letterSpacing: '.03em' }; const fieldStyle = { marginBottom: 16 }; return (

{/* Header */}

Partner Inquiry

Become a MyHomeAware Partner

Tell us about yourself and how you’d like to work together. We’ll follow up within 1–2 business days.

{status === 'success' ? (

✅

We’ve received your inquiry!

Thanks for reaching out. Someone from the MyHomeAware team will be in touch within 1–2 business days.

) : (

{/* Row: Name + Company */}

Full Name *

Company *

{/* Role */}

Your Role *

{/* Row: Email + Phone */}

Email *

Phone (optional)

{/* Message */}

How would you like to partner?

</div>

{status === 'error' && (
              <p style={{ margin: '0 0 12px', fontSize: 13, color: '#f87171' }}>{errorMsg}</p>
            )}

<button type="submit" disabled={status === 'sending'} style={{
              width: '100%', background: t.accent, color: t.accentInk,
              border: 'none', borderRadius: 10, padding: '12px 0',
              fontWeight: 700, fontSize: 15, cursor: status === 'sending' ? 'not-allowed' : 'pointer',
              opacity: status === 'sending' ? 0.7 : 1, fontFamily: 'inherit',
            }}>
              {status === 'sending' ? 'Sending…' : 'Send Inquiry'}
            </button>
          </form>
        )}
      </div>
    </div>
  );
}

// Partners
// ──────────────────────────────────────────────────────────
function Partners({ t }) {
  const [showModal, setShowModal] = React.useState(false);
  const partners = [
  { name: 'Brain Restoration Clinic', tag: 'Neuro-wellness', url: 'https://brainrestorationclinic.com' },
  { name: 'Carolina Holistic Medicine', tag: 'Integrative care', url: 'https://carolinaholisticmedicine.com' },
  { name: 'Kingdom Builders', tag: 'Custom homes', url: 'https://kingdombuilderslmsw.com' },
  { name: 'Ecos Paints', tag: 'Non-toxic finishes', url: 'https://ecospaints.net' }];

return (
    <section id="partners" style={{ padding: '80px 56px', background: t.bgAlt }}>
      {showModal && <PartnerModal t={t} onClose={() => setShowModal(false)} />}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'end' }}>
        <SectionHead t={t} kicker="OUR PARTNERS" title="The people we connect families to."
        sub="When MyHomeAware surfaces something around your home, we don't leave you stuck. These are the trusted partners we connect you with — vetted experts in health, building, and environmental care." />
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, justifyContent: 'flex-end' }}>
          <Btn t={t} sm onClick={() => setShowModal(true)}>Become a partner</Btn>
        </div>
      </div>

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 48 }}>
        {partners.map((p) => <PartnerTile key={p.name} t={t} {...p} />)}
      </div>
    </section>);

}

}

// ──────────────────────────────────────────────────────────
// Testimonials
// ──────────────────────────────────────────────────────────
function Testimonials({ t }) {
  const quotes = [
  { q: "MyHomeAware made home searching less stressful. I have four kids and little time to do research. This app makes home searching easier and more enjoyable.", who: 'Aimee H.', role: 'Buyer · Greenville, SC' },
  { q: "It's the only tool that makes me look smarter than the buyer's agent. I bring the report to every showing now.", who: 'Marcus T.', role: 'Realtor · Charlotte, NC' },
  { q: "We use it when shortlisting homes for clients with sensitivities. It's become essential to how we work.", who: 'Dr. Lin Hayes', role: 'Carolina Holistic Medicine' }];

return (
    <section style={{ padding: '120px 56px 80px' }}>
      <SectionHead t={t} kicker="HEARD FROM FAMILIES & AGENTS" title="Decisions made with more information." />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 48 }}>
        {quotes.map((q, i) =>
        <div key={i} style={{ padding: '32px 28px', borderRadius: 18, background: t.surface, border: `1px solid ${t.border}`, display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', gap: 2, marginBottom: 18 }}>
              {Array.from({ length: 5 }).map((_, j) => <span key={j} style={{ color: t.accent }}>{Ico.star(t.accent)}</span>)}
            </div>
            <p style={{ fontFamily: 'var(--font-display)', fontSize: 20, lineHeight: 1.3, fontWeight: 500, letterSpacing: '-0.015em', color: t.text, margin: 0, flex: 1, textWrap: 'pretty' }}>"{q.q}"</p>
            <div style={{ marginTop: 24, paddingTop: 18, borderTop: `1px solid ${t.border}` }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: t.text }}>{q.who}</div>
              <div style={{ fontSize: 12.5, color: t.textMute, marginTop: 2 }}>{q.role}</div>
            </div>
          </div>
        )}
      </div>
    </section>);

}

// ──────────────────────────────────────────────────────────
// Final CTA
// ──────────────────────────────────────────────────────────
function FinalCTA({ t, cta }) {
  return (
    <section style={{ padding: '40px 56px 80px' }}>
      <div style={{ position: 'relative', borderRadius: 28, padding: '80px 64px', overflow: 'hidden', background: t.text, color: t.bg }}>
        <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(80% 100% at 100% 50%, ${t.accent}55, transparent 60%)` }} />
        <div style={{ position: 'relative', zIndex: 1, maxWidth: 720 }}>
          <Pill t={{ ...t, accent: t.accent, chip: 'rgba(255,255,255,.1)', textDim: 'rgba(255,255,255,.7)' }}>CREATE A FREE ACCOUNT FOR FULL USE</Pill>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 76, lineHeight: 0.98, letterSpacing: '-0.04em', margin: '20px 0 18px', fontWeight: 600, textWrap: 'balance' }}>
            {cta}
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.5, opacity: .75, maxWidth: 520, margin: '0 0 36px', textWrap: 'pretty' }}>No credit card. Free Report. Search nationwide.</p>
          <div style={{ display: 'flex', gap: 12 }}>
            <a href="https://myhomeaware.app" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', textDecoration: 'none', appearance: 'none', border: 'none', height: 56, padding: '0 28px', borderRadius: 14, background: t.accent, color: t.accentInk, fontWeight: 600, fontSize: 16, cursor: 'pointer', fontFamily: 'inherit' }}>Open the app ↗</a>
          </div>
        </div>
        {/* Decorative phone with real app screenshot */}
        <div style={{ position: 'absolute', right: -10, bottom: -40, transform: 'rotate(8deg)', opacity: .95 }}>
          <Phone width={240}>
            <img src="assets/app-mobile.png" alt="MyHomeAware mobile app" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </Phone>
        </div>
      </div>
    </section>);

}

// ──────────────────────────────────────────────────────────
// Contact modal (footer)
// ──────────────────────────────────────────────────────────
const SUPPORT_SUBJECTS = ['General Question', 'Bug Report', 'Feature Request', 'Billing', 'Other'];

function ContactModal({ t, onClose }) {
  const [form, setForm] = React.useState({ name: '', email: '', subject: 'General Question', message: '' });
  const [status, setStatus] = React.useState('idle');
  const [errorMsg, setErrorMsg] = React.useState('');

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

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

const inp = {
    width: '100%', boxSizing: 'border-box',
    background: t.surface, border: `1px solid ${t.borderStrong}`,
    borderRadius: 8, padding: '10px 13px',
    color: t.text, fontSize: 14, fontFamily: 'inherit', outline: 'none',
  };
  const lbl = { display: 'block', fontSize: 12, fontWeight: 600, color: t.textDim, marginBottom: 5, letterSpacing: '.03em' };

return (
    <div onClick={onBackdrop} style={{
      position: 'fixed', inset: 0, zIndex: 1000,
      background: 'rgba(0,0,0,.65)', backdropFilter: 'blur(4px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16,
    }}>
      <div style={{
        background: t.bg, borderRadius: 18, width: '100%', maxWidth: 480,
        maxHeight: '90vh', overflowY: 'auto',
        boxShadow: '0 24px 80px rgba(0,0,0,.45)', position: 'relative',
      }}>
        <div style={{ padding: '28px 28px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <p style={{ margin: '0 0 4px', fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: t.accent }}>Get in touch</p>
            <h2 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: t.text, letterSpacing: '-0.02em' }}>Contact MyHomeAware</h2>
            <p style={{ margin: '8px 0 0', fontSize: 14, color: t.textDim, lineHeight: 1.5 }}>Have a question or found a bug? We'd love to hear from you.</p>
          </div>
          <button onClick={onClose} aria-label="Close" style={{
            background: 'none', border: 'none', cursor: 'pointer', padding: 4,
            marginLeft: 12, marginTop: -2, color: t.textMute, fontSize: 22, lineHeight: 1, fontFamily: 'inherit',
          }}>×</button>
        </div>

{status === 'success' ? (
          <div style={{ padding: '40px 28px 36px', textAlign: 'center' }}>
            <div style={{ fontSize: 40, marginBottom: 16 }}>✅</div>
            <h3 style={{ margin: '0 0 8px', fontSize: 18, fontWeight: 700, color: t.text }}>Message sent!</h3>
            <p style={{ margin: '0 0 24px', fontSize: 14, color: t.textDim, lineHeight: 1.6 }}>We'll reply to <strong>{form.email}</strong> as soon as possible.</p>
            <button onClick={onClose} style={{
              background: t.accent, color: t.accentInk, border: 'none', borderRadius: 10,
              padding: '10px 24px', fontWeight: 600, fontSize: 14, cursor: 'pointer', fontFamily: 'inherit',
            }}>Done</button>
          </div>
        ) : (
          <form onSubmit={submit} style={{ padding: '24px 28px 28px' }}>
            <div style={{ marginBottom: 16 }}>
              <label style={lbl}>Your name (optional)</label>
              <input style={inp} placeholder="Jane Smith" value={form.name} onChange={set('name')} />
            </div>
            <div style={{ marginBottom: 16 }}>
              <label style={lbl}>Email address *</label>
              <input required type="email" style={inp} placeholder="jane@example.com" value={form.email} onChange={set('email')} />
            </div>
            <div style={{ marginBottom: 16 }}>
              <label style={lbl}>Subject</label>
              <select style={{ ...inp, appearance: 'none' }} value={form.subject} onChange={set('subject')}>
                {SUPPORT_SUBJECTS.map((s) => <option key={s}>{s}</option>)}
              </select>
            </div>
            <div style={{ marginBottom: 16 }}>
              <label style={lbl}>Message *</label>
              <textarea required style={{ ...inp, resize: 'vertical', minHeight: 110, lineHeight: 1.5 }}
                placeholder="Describe your question or issue…" value={form.message} onChange={set('message')} />
            </div>
            {status === 'error' && <p style={{ margin: '0 0 12px', fontSize: 13, color: '#f87171' }}>{errorMsg}</p>}
            <button type="submit" disabled={status === 'sending'} style={{
              width: '100%', background: t.accent, color: t.accentInk,
              border: 'none', borderRadius: 10, padding: '12px 0',
              fontWeight: 700, fontSize: 15, cursor: status === 'sending' ? 'not-allowed' : 'pointer',
              opacity: status === 'sending' ? 0.7 : 1, fontFamily: 'inherit',
            }}>{status === 'sending' ? 'Sending…' : 'Send message'}</button>
          </form>
        )}
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────
// Terms of Service view modal (footer — read-only, no accept)
// ──────────────────────────────────────────────────────────
function WebTermsModal({ t, onClose }) {
  const onBackdrop = (e) => { if (e.target === e.currentTarget) onClose(); };
  React.useEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [onClose]);

return (
    <div onClick={onBackdrop} style={{
      position: 'fixed', inset: 0, zIndex: 1000,
      background: 'rgba(0,0,0,.7)', backdropFilter: 'blur(4px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16,
    }}>
      <div style={{
        background: t.bg, borderRadius: 18, width: '100%', maxWidth: 620,
        maxHeight: '90vh', display: 'flex', flexDirection: 'column',
        boxShadow: '0 24px 80px rgba(0,0,0,.5)', position: 'relative',
      }}>
        {/* Header */}
        <div style={{ padding: '24px 28px 16px', borderBottom: `1px solid ${t.border}`, display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', flexShrink: 0 }}>
          <div>
            <p style={{ margin: '0 0 2px', fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: t.accent }}>Legal</p>
            <h2 style={{ margin: 0, fontSize: 20, fontWeight: 700, color: t.text, letterSpacing: '-0.02em' }}>MyHomeAware Terms of Service</h2>
            <p style={{ margin: '4px 0 0', fontSize: 12, color: t.textMute }}>Version 3.0 · Last Revised: April 18, 2026</p>
          </div>
          <button onClick={onClose} aria-label="Close" style={{
            background: 'none', border: 'none', cursor: 'pointer', padding: 4,
            marginLeft: 12, marginTop: -2, color: t.textMute, fontSize: 22, lineHeight: 1, fontFamily: 'inherit',
          }}>×</button>
        </div>

{/* Scrollable body */}
        <div style={{ overflowY: 'auto', padding: '4px 28px 28px', flex: 1 }}>
          <h2 style={h2s}>1. Binding Agreement</h2>
          <p style={ps}>By accessing or using MyHomeAware (the "Platform"), you confirm that you have read, understood, and agree to be bound by these Terms of Service ("Terms"). <strong>If you do not agree, you must not use the Platform.</strong> These Terms form a legally binding agreement between you and MyHomeAware.</p>

<h2 style={h2s}>2. About the Platform & Data Sources</h2>
          <p style={ps}>MyHomeAware is a <strong>data aggregation and visualization tool</strong>. The Platform collects, normalizes, and displays publicly available environmental, infrastructure, and facility data from U.S. government agencies, including:</p>
          <ul style={{ paddingLeft: 20, margin: '0 0 10px' }}>
            <li style={lis}>U.S. Environmental Protection Agency (EPA) — Superfund/NPL sites, Toxic Release Inventory (TRI), RCRA hazardous waste handlers, NPDES discharge permits, FRS facility registry, ATTAINS impaired water bodies, brownfields, and non-NPL cleanup sites.</li>
            <li style={lis}>Federal Aviation Administration (FAA) — Public-use airport locations.</li>
            <li style={lis}>Federal Communications Commission (FCC) — Cell tower and antenna structure registrations.</li>
            <li style={lis}>U.S. Department of Transportation (DOT) / EIA — Electric transmission lines, power plants, substations, oil refineries, chemical plants, and cement/asphalt facilities.</li>
            <li style={lis}>State and local drinking water system records.</li>
          </ul>
          <p style={ps}><strong>Data Latency & Completeness:</strong> All datasets are sourced from third-party government databases updated on their own schedules. Records may be incomplete, delayed, or reflect historical conditions. You should independently verify any information before relying on it.</p>

<h2 style={h2s}>3. No Professional Advice</h2>
          <p style={ps}>The Platform is an informational research tool only. It does <strong>not</strong> constitute and should <strong>not</strong> be relied upon as real estate, appraisal, environmental, engineering, legal, financial, or investment advice. Always engage qualified professionals before making decisions about property purchase, sale, or remediation.</p>

<h2 style={h2s}>4. Payment Terms & Report Credits</h2>
          <ul style={{ paddingLeft: 20, margin: '0 0 10px' }}>
            <li style={lis}><strong>Free Tier:</strong> All users receive a limited number of free searches as stated on the Platform at the time of use.</li>
            <li style={lis}><strong>Report Credits:</strong> Additional searches require the purchase of Report Credits at <strong>$2.99 USD per credit</strong>. Each credit entitles you to one address search and the ability to export the resulting report.</li>
            <li style={lis}><strong>No Refunds on Used Credits:</strong> Credits are consumed upon conducting a paid search and are <strong>non-refundable</strong> once used.</li>
            <li style={lis}><strong>Unused Credits:</strong> If you request a refund for unused credits within 30 days of purchase, we will honor the refund. Contact us at <a href="mailto:support@myhomeaware.app" style={{ color: t.accent }}>support@myhomeaware.app</a>. After 30 days, unused credits are non-refundable.</li>
            <li style={lis}><strong>Payment Processing:</strong> All payments are processed by Stripe, Inc. MyHomeAware does not store your payment card details.</li>
            <li style={lis}><strong>Price Changes:</strong> We reserve the right to change credit pricing with at least 14 days' notice posted on the Platform.</li>
          </ul>

<h2 style={h2s}>5. Privacy & Data Collection</h2>
          <ul style={{ paddingLeft: 20, margin: '0 0 10px' }}>
            <li style={lis}><strong>Account Data:</strong> If you create an account, we collect your email address and name via our authentication provider (Clerk), used solely to manage your account.</li>
            <li style={lis}><strong>Usage Data:</strong> We store your search count, report credit balance, and Terms of Service acceptance records on Cloudflare's infrastructure.</li>
            <li style={lis}><strong>No Sale of Data:</strong> We do not sell, rent, or share your personal information with third parties for marketing purposes.</li>
            <li style={lis}><strong>Data Requests:</strong> To request access to or deletion of your data, contact <a href="mailto:support@myhomeaware.app" style={{ color: t.accent }}>support@myhomeaware.app</a>.</li>
          </ul>

<h2 style={h2s}>6. Limitation of Liability</h2>
          <p style={caps}>TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, IN NO EVENT SHALL MYHOMEAWARE, ITS AFFILIATES, OR DATA PROVIDERS BE LIABLE FOR FINANCIAL LOSS, ENVIRONMENTAL OR SAFETY RELIANCE, DATA INACCURACY, OR THIRD-PARTY RELIANCE.</p>
          <div style={callout}><strong>Liability Cap:</strong> In the event MyHomeAware is found liable despite the above, our total aggregate liability shall not exceed the greater of <strong>$50.00 USD</strong> or the total fees you paid in the preceding three months.</div>

<h2 style={h2s}>7. Binding Arbitration & Class Action Waiver</h2>
          <p style={{ ...ps, ...caps }}>PLEASE READ THIS SECTION CAREFULLY — IT AFFECTS YOUR LEGAL RIGHTS.</p>
          <ul style={{ paddingLeft: 20, margin: '0 0 10px' }}>
            <li style={lis}><strong>Governing Law:</strong> These Terms are governed by the laws of the State of Delaware.</li>
            <li style={lis}><strong>Individual Arbitration:</strong> All disputes shall be resolved through binding arbitration administered by the AAA under its Consumer Arbitration Rules.</li>
            <li style={lis}><strong>Class Action Waiver:</strong> You waive any right to participate in a class-action lawsuit or class-wide arbitration.</li>
            <li style={lis}><strong>Exception:</strong> Either party may seek emergency injunctive relief in a court of competent jurisdiction.</li>
          </ul>

<h2 style={h2s}>8. User Indemnification</h2>
          <p style={ps}>You agree to indemnify and hold harmless MyHomeAware from any claims, liabilities, or expenses arising from your use of Platform data without independent professional verification, your redistribution of Platform data, or your violation of these Terms or any applicable law.</p>

<h2 style={h2s}>9. Account Termination</h2>
          <p style={ps}>MyHomeAware reserves the right to suspend or terminate your account at any time for violation of these Terms, abuse of the Platform, or fraudulent activity. If we terminate your account without cause, any unused Report Credits will be refunded. You may close your account at any time by contacting <a href="mailto:support@myhomeaware.app" style={{ color: t.accent }}>support@myhomeaware.app</a>.</p>

<h2 style={h2s}>10. Severability & Survival</h2>
          <p style={ps}>If any provision of these Terms is found unenforceable, it shall be modified to the minimum extent necessary to make it enforceable. Sections 6, 7, and 8 shall survive termination of your account or these Terms.</p>
        </div>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────
// Footer
// ──────────────────────────────────────────────────────────
function Footer({ t }) {
  const [showContact, setShowContact] = React.useState(false);
  const [showTerms, setShowTerms] = React.useState(false);

const cols = [
    { heading: 'Product', links: [
      { label: 'Search', href: '#product' },
      { label: 'Favorites', href: '#product' },
      { label: 'Reports', href: '#product' },
      { label: 'Partners', href: '#partners' },
    ]},
    { heading: 'For', links: [
      { label: 'Families', href: '#use-cases' },
      { label: 'Agents', href: '#use-cases' },
    ]},
    { heading: 'Company', links: [
      { label: 'About' },
      { label: 'Insights' },
      { label: 'Contact', action: () => setShowContact(true) },
    ]},
    { heading: 'Legal', links: [
      { label: 'Privacy' },
      { label: 'Terms', action: () => setShowTerms(true) },
    ]},
  ];

const linkStyle = { fontSize: 14, color: t.textDim, cursor: 'pointer', textDecoration: 'none', background: 'none', border: 'none', padding: 0, fontFamily: 'inherit' };

return (
    <>
      {showContact && <ContactModal t={t} onClose={() => setShowContact(false)} />}
      {showTerms && <WebTermsModal t={t} onClose={() => setShowTerms(false)} />}
      <footer style={{ padding: '64px 56px 40px', borderTop: `1px solid ${t.border}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 32 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <Logo t={t} />
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 19, letterSpacing: '-0.02em', color: t.text }}>MyHomeAware</span>
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.5, color: t.textDim, maxWidth: 320, marginTop: 14, textWrap: 'pretty' }}>Know what's around your home. Built so families can make informed decisions about their most important investment.</p>
          </div>
          {cols.map(({ heading, links }) =>
            <div key={heading}>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.12em', color: t.textMute, textTransform: 'uppercase' }}>{heading}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: '14px 0 0', display: 'flex', flexDirection: 'column', gap: 8 }}>
                {links.map(({ label, href, action }) =>
                  <li key={label}>
                    {href
                      ? <a href={href} style={linkStyle}>{label}</a>
                      : action
                        ? <button onClick={action} style={linkStyle}>{label}</button>
                        : <span style={linkStyle}>{label}</span>}
                  </li>
                )}
              </ul>
            </div>
          )}
        </div>
        <div style={{ marginTop: 56, paddingTop: 24, borderTop: `1px solid ${t.border}`, display: 'flex', justifyContent: 'space-between', color: t.textMute, fontSize: 12.5 }}>
          <span>© 2026 MyHomeAware. All rights reserved.</span>
        </div>
      </footer>
    </>
  );

}

// ──────────────────────────────────────────────────────────
// Landing — composes the page from sections, allows reordering
// ──────────────────────────────────────────────────────────
function Landing({ variant, accent, headline, sub, cta, sectionOrder }) {
  const t = getTheme(variant, accent);
  const Hero = variant === 'signal' ? HeroSignal : HeroDaylight;

const sectionMap = {
    features: <Features t={t} />,
    how: <HowItWorks t={t} />,
    audiences: <ForWho t={t} />,
    partners: <Partners t={t} />,
    testimonials: <Testimonials t={t} />
  };
  const order = sectionOrder || ['features', 'how', 'audiences', 'partners', 'testimonials'];

return (
    <div style={{ background: t.bg, color: t.text, minHeight: '100%', fontFamily: 'var(--font-body)' }}>
      <Nav t={t} />
      <Hero t={t} headline={headline} sub={sub} />
      {order.map((k) => <React.Fragment key={k}>{sectionMap[k]}</React.Fragment>)}
      <FinalCTA t={t} cta={cta} />
      <Footer t={t} />
    </div>);

}

Object.assign(window, { Landing, getTheme });