// Homepage app
const { useState: useStateH } = React;

function Home() {
  return (
    <>
      <UtilityBar />
      <Header active="home" />

      {/* HERO */}
      <section className="hero">
        <div className="container hero-grid">
          <div>
            <div className="eyebrow">Locally owned · Tampa, FL · Since 2008</div>
            <h1>A Tampa mortgage lender that <em>actually</em> picks up the phone.</h1>
            <p className="hero-lede">
              FGC is a locally owned mortgage lender serving families across Florida and the Southeast. From conventional and FHA to VA, jumbo, and investor loans — one local team, real underwriting decisions, closings that hit the date on the contract.
            </p>
            <div className="hero-cta">
              <a className="btn btn-primary" href="apply.html">Start a 7-minute application <span className="arr">→</span></a>
              <a className="btn btn-ghost" href="rates.html">See today's rates</a>
            </div>
          </div>
          <aside className="hero-side">
            <div className="hero-stats">
              <div className="stat">
                <div className="num">4,200<small>+</small></div>
                <div className="label">Florida families served since 2008</div>
              </div>
              <div className="stat">
                <div className="num">19<small>days</small></div>
                <div className="label">Average purchase close time</div>
              </div>
              <div className="stat">
                <div className="num">4.9<small>/5.0</small></div>
                <div className="label">Google rating · 612 verified reviews</div>
              </div>
              <div className="stat">
                <div className="num">28<small>local LOs</small></div>
                <div className="label">All licensed, salaried, in-state</div>
              </div>
            </div>
          </aside>
        </div>
      </section>

      <Ticker />

      {/* PRODUCTS */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">01 — Loan Products</div>
              <h2>The full menu, underwritten in-house.</h2>
            </div>
            <p className="lede">Every product below is originated and processed locally by our Tampa team. Whether you're buying your first place in Brandon or a vacation home in 30A, we have a loan that fits.</p>
          </div>

          <div className="products">
            {[
              { n: "01", t: "Conventional", d: "Fannie Mae & Freddie Mac conforming. Best fit for buyers with strong credit and 5–20% down.", min: "3% down", apr: "from 6.390%", href: "products.html#conventional" },
              { n: "02", t: "FHA", d: "Government-insured, designed for first-time buyers and borrowers with credit scores from 580.", min: "3.5% down", apr: "from 6.150%", href: "products.html#fha" },
              { n: "03", t: "VA", d: "For active-duty service members and veterans. No down payment, no PMI, competitive pricing.", min: "$0 down", apr: "from 6.020%", href: "products.html#va" },
              { n: "04", t: "Jumbo", d: "Loan amounts above conforming limits, up to $5M. Portfolio products for high-cost markets.", min: "10% down", apr: "from 6.432%", href: "products.html#jumbo" },
              { n: "05", t: "DSCR Investor", d: "Qualify on the property's cash flow — no personal income docs. Built for 1–4 unit rentals.", min: "20% down", apr: "from 7.375%", href: "products.html#dscr" },
              { n: "06", t: "HELOC & Home Equity", d: "Tap up to 90% CLTV without disturbing your first mortgage. Draw periods up to 10 years.", min: "Prime+0", apr: "from 8.250%", href: "products.html#heloc" },
            ].map(p => (
              <a key={p.n} className="product" href={p.href}>
                <div className="p-num">{p.n}</div>
                <h3>{p.t}</h3>
                <p>{p.d}</p>
                <dl className="p-meta">
                  <div><dt>Minimum</dt><dd>{p.min}</dd></div>
                  <div><dt>Rate</dt><dd>{p.apr}</dd></div>
                </dl>
                <span className="p-link">Explore {p.t} <span className="arr">→</span></span>
              </a>
            ))}
          </div>

          <div style={{textAlign:"center",marginTop:48}}>
            <a className="btn btn-ghost" href="products.html">Compare all products <span className="arr">→</span></a>
          </div>
        </div>
      </section>

      {/* CALCULATOR */}
      <section className="section alt">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">02 — Tools</div>
              <h2>Run the numbers before you talk to anyone.</h2>
            </div>
            <p className="lede">A real amortization engine — not a teaser. Adjust price, down payment, term, and rate to see the full PITI breakdown in real time. The figure you see is the figure we'll quote.</p>
          </div>
          <MortgageCalc />
          <div style={{marginTop:24,display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:16}}>
            <a className="btn btn-ghost" href="rates.html#affordability">Affordability calculator <span className="arr">→</span></a>
            <a className="btn btn-ghost" href="rates.html#refi">Refinance savings calculator <span className="arr">→</span></a>
            <a className="btn btn-ghost" href="rates.html#compare">Compare two scenarios <span className="arr">→</span></a>
          </div>
        </div>
      </section>

      {/* PROCESS — DARK */}
      <section className="section dark">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num" style={{color:"#a8896b"}}>03 — How it works</div>
              <h2>Four steps. One advisor. No surprises at closing.</h2>
            </div>
            <p className="lede">No 1-800 numbers. No call centers. Your loan officer's direct cell, your processor's email, and a clear timeline you can share with your Realtor.</p>
          </div>

          <div className="steps">
            {[
              { n: "Step 01", t: "Pre-qualify", d: "Soft credit pull, no impact on your score. Same-day pre-qualification letter your Realtor can use immediately.", dur: "Same day" },
              { n: "Step 02", t: "Application", d: "Secure document upload. Your loan officer reviews everything personally before it goes to underwriting.", dur: "1–3 days" },
              { n: "Step 03", t: "Underwriting", d: "Local processors and underwriters. Direct phone calls — no support tickets, no offshore queues.", dur: "7–10 days" },
              { n: "Step 04", t: "Close", d: "E-sign where Florida law permits. Wire to title same morning. Keys in your hand by lunch.", dur: "Day 17–21" },
            ].map(s => (
              <div className="step" key={s.t}>
                <div className="s-num">{s.n}</div>
                <h4>{s.t}</h4>
                <p>{s.d}</p>
                <div className="duration">{s.dur}</div>
              </div>
            ))}
          </div>

          <div style={{marginTop:48,display:"flex",gap:12,flexWrap:"wrap"}}>
            <a className="btn btn-primary" href="apply.html" style={{background:"#fafaf7",color:"#0b1f3a",borderColor:"#fafaf7"}}>Start a pre-qualification <span className="arr">→</span></a>
            <a className="btn btn-ghost" href="purchase.html" style={{borderColor:"#2d4a73",color:"#fafaf7",background:"transparent"}}>Read the full playbook <span className="arr">→</span></a>
          </div>
        </div>
      </section>

      {/* PULL QUOTE */}
      <section className="section">
        <div className="container split">
          <div>
            <div className="kicker">Why FGC</div>
            <p className="pull" style={{marginTop:24}}>
              "We started FGC in 2008 because Tampa families deserved a lender who answers the phone, knows the local market, and treats their closing date like a promise — not a suggestion."
            </p>
            <div style={{marginTop:32,display:"flex",gap:16,alignItems:"center"}}>
              <div style={{width:56,height:56,background:"var(--bg-3)",borderRadius:"50%"}} />
              <div>
                <div style={{fontWeight:600}}>Frank Gallo</div>
                <div style={{color:"var(--ink-3)",fontSize:13}}>President & Founder</div>
              </div>
            </div>
          </div>
          <div>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:1,background:"var(--rule)",border:"1px solid var(--rule)"}}>
              {[
                { k: "On-time close rate", v: "97%", s: "FL industry avg: 71%" },
                { k: "Avg. close time (purchase)", v: "19 days", s: "FL industry avg: 32 days" },
                { k: "Repeat & referral business", v: "68%", s: "Past 24 months" },
                { k: "Realtor partners", v: "180+", s: "Tampa Bay & Southeast" },
              ].map(s => (
                <div key={s.k} style={{padding:24,background:"var(--bg)"}}>
                  <div style={{fontFamily:"var(--mono)",fontSize:11,letterSpacing:"0.1em",textTransform:"uppercase",color:"var(--ink-3)",marginBottom:10}}>{s.k}</div>
                  <div style={{fontFamily:"var(--serif)",fontSize:36,letterSpacing:"-0.02em",lineHeight:1}}>{s.v}</div>
                  <div style={{fontSize:12,color:"var(--ink-4)",marginTop:8,fontFamily:"var(--mono)"}}>{s.s}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* TRUST */}
      <section style={{padding:"40px 0",background:"var(--bg)"}}>
        <div className="container">
          <div className="section-num" style={{textAlign:"center",marginBottom:24}}>Recognized locally</div>
          <div className="trust-row">
            <div className="trust-cell">Best of Tampa Bay '24</div>
            <div className="trust-cell">Tampa Bay Times Top Workplace</div>
            <div className="trust-cell">Tampa Chamber Member</div>
            <div className="trust-cell">Florida Realtors Affiliate</div>
            <div className="trust-cell">Better Business Bureau A+</div>
            <div className="trust-cell">Equal Housing Lender</div>
          </div>
        </div>
      </section>

      {/* INSIGHTS */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">04 — Insights</div>
              <h2>Market intelligence, written by underwriters.</h2>
            </div>
            <p className="lede">Plain-English breakdowns of the Florida housing market, FHA/VA changes, and rate moves — written by our local loan officers, not a marketing team.</p>
          </div>

          <div className="insights">
            {[
              { tag: "Tampa Bay Market", t: "Hillsborough & Pinellas inventory is up 14% — what that means for buyers this spring", date: "May 1, 2026", read: "6 min" },
              { tag: "First-Time Buyers", t: "Florida Hometown Heroes program: who qualifies in 2026 and how to stack the savings", date: "Apr 24, 2026", read: "8 min" },
              { tag: "Insurance", t: "Florida homeowners insurance and your mortgage: the conversation to have before you offer", date: "Apr 18, 2026", read: "10 min" },
            ].map(i => (
              <a className="insight" href="#" key={i.t}>
                <Placeholder label={i.tag.split(" · ")[0]} />
                <div className="i-tag">{i.tag}</div>
                <h4>{i.t}</h4>
                <div className="i-meta">{i.date} · {i.read} read</div>
              </a>
            ))}
          </div>

          <div style={{marginTop:48,textAlign:"center"}}>
            <a className="btn btn-ghost" href="resources.html">All insights <span className="arr">→</span></a>
          </div>
        </div>
      </section>

      {/* CTA STRIP */}
      <section style={{background:"var(--bg-2)",padding:"56px 0",borderTop:"1px solid var(--rule)",borderBottom:"1px solid var(--rule)"}}>
        <div className="container" style={{display:"grid",gridTemplateColumns:"1fr auto",gap:32,alignItems:"center"}}>
          <div>
            <div className="section-num">Ready when you are</div>
            <div style={{fontFamily:"var(--serif)",fontSize:"clamp(28px, 3.4vw, 44px)",letterSpacing:"-0.02em",lineHeight:1.05,marginTop:12,maxWidth:"24ch"}}>
              Call us today, walk into your Realtor's office tomorrow with a pre-qual letter.
            </div>
          </div>
          <div style={{display:"flex",gap:12,flexWrap:"wrap"}}>
            <a className="btn btn-primary" href="apply.html">Apply now <span className="arr">→</span></a>
            <a className="btn btn-ghost" href="contact.html">Find a loan officer</a>
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Home />);