// Combined: Purchase, Refinance, About, Resources, Contact, Apply pages
// Each page is a self-contained component; the HTML decides which to mount.

const { useState: useStateX } = React;

// ─────────────── PURCHASE ───────────────
function PurchasePage() {
  return (
    <>
      <UtilityBar /><Header active="purchase" />
      <Crumb items={[{label:"Home",href:"index.html"},{label:"Buy a Home"}]} />
      <section className="page-hero">
        <div className="container">
          <div className="section-num">Purchase</div>
          <h1>From offer letter to keys, in plain English.</h1>
          <p className="lede">One local loan officer, one local processor, one closer — assigned to your file from day one. The same three people from pre-qual to wire. No call centers, no handoffs.</p>
          <div style={{marginTop:32,display:"flex",gap:12,flexWrap:"wrap"}}>
            <a className="btn btn-primary" href="apply.html">Start pre-qualification <span className="arr">→</span></a>
            <a className="btn btn-ghost" href="rates.html#affordability">See what you can afford</a>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div><div className="section-num">The playbook</div><h2>Eight milestones. Every one tracked in your portal.</h2></div>
            <p className="lede">Each milestone has a named owner you can call. If we miss our promised close date, you get a $500 credit toward closing costs — no exceptions.</p>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:0,border:"1px solid var(--rule)"}}>
            {[
              ["01","Pre-qualification","Soft credit pull, 7-minute application. Verified pre-qual letter the same day.","Same day"],
              ["02","Home shopping","Connect with our agent network or your own. We re-issue pre-quals at any price point.","Ongoing"],
              ["03","Offer accepted","Send us the contract. We open the file, lock your rate (optional), order appraisal.","Day 0–1"],
              ["04","Loan estimate","Federally-required disclosure within 3 business days, with a clear cost-to-close.","Day 3"],
              ["05","Underwriting","In-house review. Most files clear conditions in a single review cycle.","Day 5–10"],
              ["06","Appraisal & title","We coordinate both. You see the appraisal report the day it's delivered.","Day 7–14"],
              ["07","Clear to close","Final approval issued. Closing disclosure sent at least 3 days before settlement.","Day 14–18"],
              ["08","Settlement","Hybrid e-close where state law permits. Wire confirmation in your portal.","Day 17–21"],
            ].map(([n,t,d,dur],i) => (
              <div key={n} style={{padding:32,borderRight:(i%2===0?"1px solid var(--rule)":0),borderBottom:(i<6?"1px solid var(--rule)":0)}}>
                <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline",marginBottom:12}}>
                  <span style={{fontFamily:"var(--mono)",fontSize:11,letterSpacing:"0.12em",color:"var(--bronze)"}}>{n}</span>
                  <span style={{fontFamily:"var(--mono)",fontSize:11,letterSpacing:"0.06em",color:"var(--ink-4)",textTransform:"uppercase"}}>{dur}</span>
                </div>
                <h4 style={{fontFamily:"var(--serif)",fontWeight:500,fontSize:24,letterSpacing:"-0.01em",margin:"0 0 8px"}}>{t}</h4>
                <p style={{margin:0,color:"var(--ink-3)",fontSize:14.5,lineHeight:1.55}}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section alt">
        <div className="container">
          <div className="section-head">
            <div><div className="section-num">Programs</div><h2>Down-payment assistance and first-time buyer help.</h2></div>
            <p className="lede">We participate in every major Florida down-payment assistance program. Our team checks your eligibility against all of them — most buyers don't realize they qualify.</p>
          </div>
          <div className="products">
            {[
              {n:"Florida Hometown Heroes",d:"Up to 5% of loan amount (max $35,000) for Florida workforce — teachers, nurses, first responders, and more.",e:"FL workforce · Income-tested"},
              {n:"Florida Assist (FL HFA)",d:"Up to $10,000 deferred second mortgage for first-time buyers statewide. Combine with FHA, VA, or conventional.",e:"First-time buyer · 80% AMI"},
              {n:"HFA Preferred",d:"Reduced PMI and below-market rates for qualifying first-time and repeat buyers in Florida.",e:"FICO 640+"},
              {n:"FGC Realtor Credit",d:"$500 lender credit when you close with one of our 180+ partner Realtors across Tampa Bay.",e:"Partner agent"},
              {n:"VA + Service Member",d:"Zero-down VA financing with $0 FGC lender fees for active-duty borrowers at MacDill AFB and beyond.",e:"COE required"},
              {n:"Move-Up Buyer Bridge",d:"Use equity in your current Florida home before it sells. Up to 80% CLTV, 11-month term.",e:"FICO 700+"},
            ].map(p => (
              <div className="product" key={p.n}>
                <div className="p-num">PROG</div>
                <h3>{p.n}</h3>
                <p>{p.d}</p>
                <dl className="p-meta"><div><dt>Eligibility</dt><dd>{p.e}</dd></div></dl>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

// ─────────────── REFINANCE ───────────────
function RefinancePage() {
  return (
    <>
      <UtilityBar /><Header active="refinance" />
      <Crumb items={[{label:"Home",href:"index.html"},{label:"Refinance"}]} />
      <section className="page-hero">
        <div className="container">
          <div className="section-num">Refinance</div>
          <h1>Three reasons to refinance. One number to call.</h1>
          <p className="lede">Lower your payment, shorten your term, or pull equity. We model all three side-by-side so you can see which actually moves the needle for your household.</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="products">
            {[
              {t:"Rate-and-term",d:"Replace your loan with one at a lower rate or shorter term. The classic move when rates drop or your credit has improved.",m:["Break-even typically 18–30 months","No cash out — costs rolled in or paid out of pocket","Eligible across all agency products"]},
              {t:"Cash-out",d:"Tap up to 80% of your home's value as a single lump sum. Common uses: renovation, debt consolidation, education.",m:["Up to 80% LTV (90% with HELOC stack)","Single fixed rate, fixed term","Funds wired same day as recording"]},
              {t:"Streamline (FHA / VA)",d:"Reduced documentation, often no appraisal, for existing FHA or VA borrowers refinancing into a lower rate.",m:["Net tangible benefit required","No income re-verification in most cases","Closes in 14 days median"]},
            ].map(p => (
              <div className="product" key={p.t} style={{cursor:"default"}}>
                <div className="p-num">REFI</div>
                <h3>{p.t}</h3>
                <p>{p.d}</p>
                <ul style={{listStyle:"none",padding:0,margin:"12px 0 0",display:"grid",gap:8}}>
                  {p.m.map(x => <li key={x} style={{paddingLeft:14,position:"relative",fontSize:13,color:"var(--ink-2)",lineHeight:1.5}}>
                    <span style={{position:"absolute",left:0,top:9,width:8,height:1,background:"var(--navy)"}} />{x}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section alt">
        <div className="container">
          <div className="section-num" style={{marginBottom:16}}>Run your savings</div>
          <RefiSavingsLite />
        </div>
      </section>

      <Footer />
    </>
  );
}

function RefiSavingsLite() {
  // Inlined to avoid cross-file dependency on rates.jsx
  const [balance, setBalance] = useStateX(420000);
  const [oldRate, setOldRate] = useStateX(7.250);
  const [newRate, setNewRate] = useStateX(6.390);
  const [term, setTerm] = useStateX(30);
  const calc = (rate) => {
    const i = rate/100/12, n = term*12;
    return balance * (i * Math.pow(1+i,n)) / (Math.pow(1+i,n)-1);
  };
  const oldPI = calc(oldRate), newPI = calc(newRate);
  const ms = oldPI - newPI;
  return (
    <div className="calc-wrap">
      <div className="calc-form">
        <h3>Estimate your savings</h3>
        <div className="field"><label>Current balance <span className="v">{fmtUSD(balance)}</span></label>
          <input type="range" min="50000" max="2000000" step="5000" value={balance} onChange={e=>setBalance(+e.target.value)} /></div>
        <div className="field"><label>Current rate <span className="v">{oldRate.toFixed(3)}%</span></label>
          <input type="range" min="3" max="10" step="0.125" value={oldRate} onChange={e=>setOldRate(+e.target.value)} /></div>
        <div className="field"><label>New rate <span className="v">{newRate.toFixed(3)}%</span></label>
          <input type="range" min="3" max="10" step="0.125" value={newRate} onChange={e=>setNewRate(+e.target.value)} /></div>
        <div className="field"><label>Term</label>
          <div className="field-pills">{[10,15,20,30].map(t => <button key={t} className={term===t?"active":""} onClick={()=>setTerm(t)}>{t}-yr</button>)}</div>
        </div>
      </div>
      <div className="calc-out">
        <div className="label">Monthly savings</div>
        <div className="big">{fmtUSD(ms,0)}</div>
        <div className="sub">{fmtUSD(ms*60,0)} over 5 years · {fmtUSD(ms*term*12,0)} over the life of the loan</div>
        <div className="calc-breakdown" style={{marginTop:24}}>
          <dl>
            <dt>Current P&I</dt><dd>{fmtUSD(oldPI,0)}</dd>
            <dt>New P&I</dt><dd>{fmtUSD(newPI,0)}</dd>
          </dl>
        </div>
      </div>
    </div>
  );
}

// ─────────────── ABOUT ───────────────
function AboutPage() {
  return (
    <>
      <UtilityBar /><Header active="about" />
      <Crumb items={[{label:"Home",href:"index.html"},{label:"About"}]} />
      <section className="page-hero">
        <div className="container split">
          <div>
            <div className="section-num">About FGC</div>
            <h1>Tampa born. Tampa run.</h1>
          </div>
          <p className="lede" style={{paddingBottom:8}}>A locally owned mortgage lender, helping Florida families close on time since 2008.</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:0,border:"1px solid var(--rule)"}}>
            {[
              {k:"Founded",v:"2008",s:"In Tampa"},
              {k:"States",v:"5",s:"FL, GA, AL, SC, NC"},
              {k:"Families served",v:"4,200+",s:"Since 2008"},
              {k:"Repeat & referral",v:"68%",s:"Past 24 months"},
            ].map((c,i) => (
              <div key={c.k} style={{padding:28,borderRight:(i===3?0:"1px solid var(--rule)")}}>
                <div style={{fontFamily:"var(--mono)",fontSize:11,letterSpacing:"0.1em",textTransform:"uppercase",color:"var(--ink-3)",marginBottom:8}}>{c.k}</div>
                <div style={{fontFamily:"var(--serif)",fontSize:32,letterSpacing:"-0.02em",lineHeight:1}}>{c.v}</div>
                <div style={{fontSize:12,color:"var(--ink-4)",marginTop:8,fontFamily:"var(--mono)"}}>{c.s}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section alt">
        <div className="container">
          <div className="section-head">
            <div><div className="section-num">Leadership</div><h2>The people on your file.</h2></div>
            <p className="lede">A small team by design. Every loan is reviewed by a senior underwriter — no offshore queues, no outsourced decisions.</p>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:32,maxWidth:960}}>
            {[
              {n:"Frank Gallo",t:"Founder & President",b:"Tampa native. 24 years in residential lending. Founded FGC in 2008 after a decade at a national lender."},
              {n:"Maria Delgado",t:"Director of Operations",b:"Runs underwriting and processing. 18 years closing Florida loans on time."},
              {n:"Chris Bennett",t:"Head of Lending",b:"Oversees product, pricing, and the loan officer team across all five states."},
            ].map(p => (
              <div key={p.n}>
                <Placeholder label={p.n.split(" ").map(s=>s[0]).join("")} className="square" />
                <div style={{marginTop:14,fontFamily:"var(--serif)",fontWeight:500,fontSize:20}}>{p.n}</div>
                <div style={{fontSize:12.5,color:"var(--ink-3)",marginTop:2,fontFamily:"var(--mono)",letterSpacing:"0.02em"}}>{p.t}</div>
                <div style={{fontSize:13.5,color:"var(--ink-2)",marginTop:10,lineHeight:1.55}}>{p.b}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

// ─────────────── RESOURCES ───────────────
function ResourcesPage() {
  const items = [
    {tag:"Rate Outlook",t:"Why the 30-year is decoupling from the 10-year — and what it means for your lock window",d:"May 1, 2026",r:"6 min"},
    {tag:"Policy",t:"FHA's 2026 loan limit changes, parsed: where buyers actually gain ground",d:"Apr 24, 2026",r:"8 min"},
    {tag:"Credit",t:"Self-employed buyers and bank-statement loans: the underwriting reality in 2026",d:"Apr 18, 2026",r:"10 min"},
    {tag:"Buyer Guide",t:"What 'clear to close' actually means — and how to get there faster",d:"Apr 11, 2026",r:"5 min"},
    {tag:"Refinance",t:"Cash-out vs. HELOC: a decision framework for homeowners with 30%+ equity",d:"Apr 4, 2026",r:"7 min"},
    {tag:"Investor",t:"DSCR loans in a higher-rate environment: what still pencils",d:"Mar 28, 2026",r:"9 min"},
    {tag:"Market",t:"The spring 2026 housing market: inventory, prices, and the regional picture",d:"Mar 21, 2026",r:"12 min"},
    {tag:"Buyer Guide",t:"First-time buyers: a 90-day plan from credit pull to closing",d:"Mar 14, 2026",r:"8 min"},
    {tag:"Policy",t:"GSE patch redux: what the 2026 QM rule changes mean for jumbo borrowers",d:"Mar 7, 2026",r:"11 min"},
  ];
  return (
    <>
      <UtilityBar /><Header active="resources" />
      <Crumb items={[{label:"Home",href:"index.html"},{label:"Insights"}]} />
      <section className="page-hero">
        <div className="container">
          <div className="section-num">Insights</div>
          <h1>Market intelligence, written by underwriters.</h1>
          <p className="lede">Weekly briefings on rates, agency policy, and credit trends. Authored by the people who actually price the loans.</p>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="insights">
            {items.map(i => (
              <a className="insight" href="#" key={i.t}>
                <Placeholder label={i.tag} />
                <div className="i-tag">{i.tag}</div>
                <h4>{i.t}</h4>
                <div className="i-meta">{i.d} · {i.r} read</div>
              </a>
            ))}
          </div>
        </div>
      </section>
      <Footer />
    </>
  );
}

// ─────────────── CONTACT ───────────────
function ContactPage() {
  const officers = [
    {n:"Sarah Mitchell",t:"Senior Loan Officer",l:"Tampa, FL · Licensed in FL, GA, AL",y:"14 years",s:"5.0",r:"412 reviews"},
    {n:"David Reyes",t:"Senior Loan Officer",l:"Dallas, TX · Licensed in TX, OK, NM",y:"11 years",s:"4.9",r:"328 reviews"},
    {n:"Jennifer Kang",t:"Loan Officer",l:"Seattle, WA · Licensed in WA, OR, ID",y:"7 years",s:"5.0",r:"281 reviews"},
    {n:"Michael O'Brien",t:"Senior Loan Officer",l:"Boston, MA · Licensed in MA, CT, RI, NH",y:"19 years",s:"4.9",r:"604 reviews"},
    {n:"Aisha Patel",t:"Loan Officer",l:"Phoenix, AZ · Licensed in AZ, NV, UT",y:"6 years",s:"5.0",r:"194 reviews"},
    {n:"Carlos Mendez",t:"Senior Loan Officer",l:"Denver, CO · Licensed in CO, WY, MT",y:"13 years",s:"4.9",r:"387 reviews"},
  ];
  return (
    <>
      <UtilityBar /><Header active="contact" />
      <Crumb items={[{label:"Home",href:"index.html"},{label:"Contact"}]} />
      <section className="page-hero">
        <div className="container">
          <div className="section-num">Contact</div>
          <h1>One advisor, from pre-qual to keys.</h1>
          <p className="lede">Search by ZIP or browse by region. Every advisor below is a salaried W-2 employee of FGC — never a 1099 contractor.</p>
          <div style={{marginTop:24,display:"flex",gap:8,maxWidth:480}}>
            <input placeholder="ZIP code" style={{flex:1,padding:"14px 16px",border:"1px solid var(--rule)",fontSize:15,fontFamily:"var(--mono)",background:"var(--bg)"}} defaultValue="33602" />
            <button className="btn btn-primary">Find advisors</button>
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="section-num" style={{marginBottom:16}}>Loan officers near 33602 · Tampa, FL</div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:0,border:"1px solid var(--rule)"}}>
            {officers.map((o,i) => (
              <div key={o.n} style={{padding:28,borderRight:(i%3===2?0:"1px solid var(--rule)"),borderBottom:(i<3?"1px solid var(--rule)":0),display:"flex",gap:16,flexDirection:"column"}}>
                <div style={{display:"flex",gap:14,alignItems:"center"}}>
                  <Placeholder label={o.n.split(" ").map(s=>s[0]).join("")} style={{aspectRatio:"1/1",width:56,height:56}} />
                  <div>
                    <div style={{fontFamily:"var(--serif)",fontWeight:500,fontSize:18,letterSpacing:"-0.01em"}}>{o.n}</div>
                    <div style={{fontFamily:"var(--mono)",fontSize:11,letterSpacing:"0.04em",color:"var(--ink-3)",marginTop:2}}>{o.t}</div>
                  </div>
                </div>
                <div style={{fontSize:13.5,color:"var(--ink-2)",lineHeight:1.5}}>{o.l}</div>
                <div style={{display:"flex",gap:24,fontSize:12,color:"var(--ink-3)",fontFamily:"var(--mono)",letterSpacing:"0.04em",marginTop:"auto"}}>
                  <span>{o.y} experience</span>
                  <span>★ {o.s} · {o.r}</span>
                </div>
                <div style={{display:"flex",gap:8}}>
                  <button className="btn btn-ghost" style={{flex:1,justifyContent:"center"}}>Schedule</button>
                  <button className="btn btn-primary" style={{flex:1,justifyContent:"center"}}>Message</button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="section alt">
        <div className="container split">
          <div>
            <div className="section-num">General contact</div>
            <h2 style={{fontFamily:"var(--serif)",fontWeight:400,fontSize:40,letterSpacing:"-0.02em",lineHeight:1.05,margin:"12px 0 24px"}}>Prefer to write? We respond.</h2>
            <p style={{fontSize:16,color:"var(--ink-2)",maxWidth:"50ch",lineHeight:1.5}}>Send a note and we'll route it to the right team. Most messages get a same-day reply during business hours, and a next-business-morning response otherwise.</p>
          </div>
          <div style={{display:"grid",gap:1,background:"var(--rule)",border:"1px solid var(--rule)",gridTemplateColumns:"1fr 1fr"}}>
            {[
              ["General","hello@fgcmortgage.com"],
              ["New applications","apply@fgcmortgage.com"],
              ["Servicing","servicing@fgcmortgage.com"],
              ["Partners & agents","partners@fgcmortgage.com"],
              ["Press","press@fgcmortgage.com"],
              ["Careers","careers@fgcmortgage.com"],
            ].map(([k,v]) => (
              <div key={k} style={{padding:24,background:"var(--bg)"}}>
                <div style={{fontFamily:"var(--mono)",fontSize:11,letterSpacing:"0.1em",textTransform:"uppercase",color:"var(--ink-3)",marginBottom:8}}>{k}</div>
                <div style={{fontFamily:"var(--serif)",fontSize:22,letterSpacing:"-0.01em"}}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <Footer />
    </>
  );
}

// ─────────────── APPLY ───────────────
function ApplyPage() {
  const [step, setStep] = useStateX(1);
  const total = 4;
  const steps = ["Goal","Property","Income","Identity"];
  return (
    <>
      <UtilityBar /><Header active="apply" />
      <Crumb items={[{label:"Home",href:"index.html"},{label:"Apply"}]} />
      <section style={{padding:"48px 0 0"}}>
        <div className="container">
          <div className="section-num">Apply</div>
          <h1 style={{fontFamily:"var(--serif)",fontWeight:400,fontSize:48,letterSpacing:"-0.025em",lineHeight:1,margin:"16px 0 8px"}}>Pre-qualification · 7 minutes</h1>
          <p style={{fontSize:16,color:"var(--ink-3)",maxWidth:"60ch"}}>Soft credit pull — won't affect your score. You'll receive a verified pre-qualification letter the same day.</p>
        </div>
      </section>
      <section style={{padding:"32px 0 80px"}}>
        <div className="container" style={{display:"grid",gridTemplateColumns:"260px 1fr",gap:48,alignItems:"start"}}>
          <aside>
            <ol style={{listStyle:"none",padding:0,margin:0,display:"grid",gap:0,borderTop:"1px solid var(--rule)"}}>
              {steps.map((s,i) => (
                <li key={s} onClick={()=>setStep(i+1)} style={{padding:"18px 0",borderBottom:"1px solid var(--rule)",display:"flex",gap:14,alignItems:"baseline",cursor:"pointer",opacity: step===i+1 ? 1 : (step>i+1 ? 0.7 : 0.4)}}>
                  <span style={{fontFamily:"var(--mono)",fontSize:11,color: step===i+1 ? "var(--navy)" : "var(--ink-4)",letterSpacing:"0.1em"}}>{String(i+1).padStart(2,"0")}</span>
                  <span style={{fontFamily:"var(--serif)",fontSize:18,fontWeight: step===i+1?500:400}}>{s}</span>
                  {step>i+1 && <span style={{marginLeft:"auto",fontSize:11,color:"var(--green)",fontFamily:"var(--mono)"}}>✓</span>}
                </li>
              ))}
            </ol>
          </aside>
          <div style={{border:"1px solid var(--rule)",background:"var(--bg)",padding:48,minHeight:560}}>
            <div style={{fontFamily:"var(--mono)",fontSize:11,letterSpacing:"0.1em",color:"var(--ink-3)",textTransform:"uppercase",marginBottom:8}}>Step {step} of {total}</div>
            <h2 style={{fontFamily:"var(--serif)",fontWeight:400,fontSize:36,letterSpacing:"-0.02em",lineHeight:1.05,margin:"0 0 32px"}}>
              {step===1 && "What are you looking to do?"}
              {step===2 && "Tell us about the property."}
              {step===3 && "How do you earn?"}
              {step===4 && "Verify your identity."}
            </h2>
            <ApplyStep step={step} />
            <div style={{display:"flex",justifyContent:"space-between",marginTop:48,paddingTop:24,borderTop:"1px solid var(--rule)"}}>
              <button className="btn btn-ghost" onClick={()=>setStep(Math.max(1,step-1))} disabled={step===1}>← Back</button>
              <button className="btn btn-primary" onClick={()=>setStep(Math.min(total,step+1))}>{step===total ? "Submit application" : "Continue"} <span className="arr">→</span></button>
            </div>
          </div>
        </div>
      </section>
      <Footer />
    </>
  );
}

function ApplyStep({ step }) {
  const Field = ({ label, children }) => (
    <div style={{marginBottom:20}}>
      <label style={{display:"block",fontSize:13,fontWeight:500,color:"var(--ink-2)",marginBottom:8}}>{label}</label>
      {children}
    </div>
  );
  const Input = (props) => <input {...props} style={{width:"100%",padding:"12px 14px",border:"1px solid var(--rule)",fontSize:15,fontFamily:"var(--sans)",background:"#fff"}} />;
  const Card = ({ active, label, sub }) => (
    <div style={{padding:20,border:active?"1.5px solid var(--navy)":"1px solid var(--rule)",background:active?"var(--bg-2)":"#fff",cursor:"pointer"}}>
      <div style={{fontFamily:"var(--serif)",fontSize:18,fontWeight:500}}>{label}</div>
      <div style={{fontSize:12.5,color:"var(--ink-3)",marginTop:4}}>{sub}</div>
    </div>
  );
  if (step===1) return (
    <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:12}}>
      <Card active label="Buy a home" sub="Pre-qual or full application" />
      <Card label="Refinance" sub="Lower rate, cash-out, or term" />
      <Card label="Tap home equity" sub="HELOC or fixed second" />
      <Card label="Investment property" sub="DSCR or conventional" />
    </div>
  );
  if (step===2) return (<>
    <Field label="Property type">
      <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:8}}>
        <Card active label="Single family" sub="" />
        <Card label="Condo" sub="" />
        <Card label="2–4 unit" sub="" />
      </div>
    </Field>
    <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
      <Field label="Estimated price"><Input defaultValue="$685,000" /></Field>
      <Field label="Down payment"><Input defaultValue="$137,000 (20%)" /></Field>
      <Field label="ZIP code"><Input defaultValue="33602" /></Field>
      <Field label="Estimated close date"><Input defaultValue="2026-07-15" type="date" /></Field>
    </div>
  </>);
  if (step===3) return (<>
    <Field label="Employment">
      <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:8}}>
        <Card active label="W-2 employee" sub="" />
        <Card label="Self-employed" sub="" />
        <Card label="Retired / Other" sub="" />
      </div>
    </Field>
    <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
      <Field label="Annual income"><Input defaultValue="$185,000" /></Field>
      <Field label="Co-borrower income"><Input defaultValue="$0" /></Field>
      <Field label="Monthly debts"><Input defaultValue="$650" /></Field>
      <Field label="Liquid assets"><Input defaultValue="$220,000" /></Field>
    </div>
  </>);
  return (<>
    <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
      <Field label="Legal first name"><Input defaultValue="" placeholder="Jane" /></Field>
      <Field label="Legal last name"><Input defaultValue="" placeholder="Doe" /></Field>
      <Field label="Email"><Input type="email" placeholder="jane@example.com" /></Field>
      <Field label="Phone"><Input placeholder="(555) 123-4567" /></Field>
      <Field label="Date of birth"><Input type="date" /></Field>
      <Field label="SSN (last 4)"><Input placeholder="••••" maxLength="4" /></Field>
    </div>
    <div style={{padding:16,background:"var(--bg-2)",border:"1px solid var(--rule)",fontSize:13,color:"var(--ink-2)",marginTop:16,lineHeight:1.5}}>
      <strong>Soft credit pull only.</strong> Submitting this form authorizes FGC Mortgage to perform a soft inquiry — it will not affect your credit score. Your information is encrypted in transit and at rest.
    </div>
  </>);
}

// ─────────────── ROUTER ───────────────
const PAGE_COMPONENT = {
  purchase: PurchasePage, refinance: RefinancePage, about: AboutPage,
  resources: ResourcesPage, contact: ContactPage, apply: ApplyPage,
};
window.renderPage = (key) => {
  const Comp = PAGE_COMPONENT[key];
  if (Comp) ReactDOM.createRoot(document.getElementById("root")).render(<Comp />);
};