// Home page
const { useState: useStateH, useMemo: useMemoH } = React;

// Tiered price steps: $100k up to $1M, $250k to $2M, $500k above $2M, to $10M.
const PRICE_STEPS = (() => {
  const a = [];
  for (let v = 100000; v < 1000000; v += 100000) a.push(v);
  for (let v = 1000000; v < 2000000; v += 250000) a.push(v);
  for (let v = 2000000; v <= 10000000; v += 500000) a.push(v);
  return a;
})();
const fmtPrice = (v) => v >= 1000000
  ? '$' + (v / 1000000).toFixed(v % 1000000 === 0 ? 0 : (v % 500000 === 0 ? 1 : 2)).replace(/\.0$/, '') + 'M'
  : '$' + (v / 1000) + 'k';

function Hero({ setPage }) {
  const [tab, setTab] = useStateH('buy');
  const [place, setPlace] = useStateH('Calgary');
  const [minP, setMinP] = useStateH('0');
  const [maxP, setMaxP] = useStateH('0');
  const [beds, setBeds] = useStateH('Any');

  const runSearch = () => {
    const min = parseInt(minP) || 0;
    const max = parseInt(maxP) || 0;
    window.openIdxSearch({
      place,
      beds: beds !== 'Any' ? parseInt(beds) : 0,
      minPrice: min,
      maxPrice: max > 0 ? max : 100000000,
    });
  };

  return (
    <section className="hero">
      <picture style={{display:'contents'}}>
        <source media="(max-width: 720px)" srcSet="images/calgary-hero-mobile.webp" type="image/webp" />
        <source srcSet="images/calgary-hero.webp" type="image/webp" />
        <img className="hero-photo" src="images/calgary-hero.jpg" width="1920" height="1080"
          fetchpriority="high" decoding="async"
          alt="Downtown Calgary skyline and the Bow River"
          onError={(e)=>{ e.currentTarget.style.display='none'; }} />
      </picture>
      <div className="hero-bg"></div>

      <div className="hero-content shell container">
        <div></div>
        <div>
          <h1 className="display hero-headline">
            Find your next<br/>
            home in <em>Calgary.</em>
          </h1>
          <div className="hero-meta">
            <div className="hero-meta-block">
              <span className="eyebrow">Seenu George · REALTOR® · eXp Realty</span>
              <p>Helping families and investors buy and sell across Calgary, Airdrie, Cochrane, Chestermere, Canmore, Banff, High River and Okotoks.</p>
            </div>
            <div className="hero-meta-block">
              <span className="eyebrow muted">Live MLS® Search</span>
              <p style={{fontFamily:'var(--serif)', fontSize: 18, fontStyle:'italic', color:'var(--cream)'}}>
                Every active listing, updated in real time
              </p>
            </div>
            <div className="hero-meta-block text-right">
              <span className="kicker">SCROLL ↓ EXPLORE</span>
            </div>
          </div>
        </div>
      </div>

      <div className="hero-search">
        <div className="hero-search-tabs">
          {['buy','sold'].map(t => (
            <div key={t} className={"hs-tab " + (tab===t?'active':'')} onClick={() => setTab(t)}>
              {t}
            </div>
          ))}
        </div>
        <div className="hs-field">
          <label>Area</label>
          <select value={place} onChange={(e)=>setPlace(e.target.value)}>
            {(window.idxPlaces ? window.idxPlaces() : ['Calgary']).map(p => (
              <option key={p} value={p}>{p}</option>
            ))}
          </select>
        </div>
        <div className="hs-field">
          <label>Min price</label>
          <select value={minP} onChange={(e)=>setMinP(e.target.value)}>
            <option value="0">No min</option>
            {PRICE_STEPS.map(v => <option key={v} value={v}>{fmtPrice(v)}</option>)}
          </select>
        </div>
        <div className="hs-field">
          <label>Max price</label>
          <select value={maxP} onChange={(e)=>setMaxP(e.target.value)}>
            <option value="0">No max</option>
            {PRICE_STEPS.map(v => <option key={v} value={v}>{fmtPrice(v)}</option>)}
          </select>
        </div>
        <div className="hs-field">
          <label>Bedrooms</label>
          <select value={beds} onChange={(e)=>setBeds(e.target.value)}>
            <option>Any</option>
            <option>2+</option>
            <option>3+</option>
            <option>4+</option>
            <option>5+</option>
            <option>6+</option>
          </select>
        </div>
        <div className="hs-field">
          <label>Property type</label>
          <select>
            <option>Any type</option>
            <option>Detached</option>
            <option>Condo / Apartment</option>
            <option>Townhouse</option>
            <option>Acreage</option>
            <option>Land</option>
            <option>New build</option>
          </select>
        </div>
        <button className="hs-submit" onClick={runSearch}>
          Search MLS®
          <span className="arrow">→</span>
        </button>
      </div>
    </section>
  );
}

function FeaturedListings({ setPage }) {
  return (
    <section className="section shell container">
      <div className="section-header">
        <div>
          <span className="eyebrow">,  Listings</span>
          <h2 className="display" style={{marginTop: 18}}>
            Live on the Calgary<br/>
            &amp; area <em className="display-italic">MLS®.</em>
          </h2>
        </div>
        <div className="meta">
          <p>Every listing is pulled in real time from the MLS®, never a stale, hand-maintained gallery. Search the full inventory, save favourites, and book showings online.</p>
          <a className="link-arrow" onClick={() => window.openIdxLink('allListings')}>Browse all active listings →</a>
        </div>
      </div>

      {/* ════════════════════════════════════════════════════════════════════
          BOLDTRAIL / kvCORE WIDGET SLOT  (real live listings carousel)
          ─────────────────────────────────────────────────────────────────────
          In BoldTrail → "Widgets" tab → create a "Listings Carousel" widget,
          copy its <script>, and paste it into index.html at "BOLDTRAIL WIDGET
          SLOT". It renders into the div below, replacing this CTA panel.
      ════════════════════════════════════════════════════════════════════ */}
      <div id="boldtrail-featured-widget"></div>

      <div className="listings-hub">
        <div className="listings-hub-row">
          {[
            { label: 'All MLS® Listings', link: 'allListings' },
            { label: 'Just Listed', link: 'justListed' },
            { label: 'Just Reduced', link: 'justReduced' },
            { label: "Seenu's Listings", link: 'ourListings' },
          ].map(c => (
            <button key={c.link} className="listings-hub-card" onClick={() => window.openIdxLink(c.link)}>
              <span className="lhc-label">{c.label}</span>
              <span className="lhc-go">Open →</span>
            </button>
          ))}
        </div>
        <div style={{marginTop: 24}}>
          <a className="link-arrow" onClick={() => window.openIdxLink('advanced')}>
            Need more filters? Open the full advanced search →
          </a>
        </div>
      </div>
    </section>
  );
}

// SVG city/neighborhood map (very minimal, abstracted, no copyrighted geography)
function CalgaryMap() {
  return (
    <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice">
      <defs>
        <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(236,229,212,0.04)" strokeWidth="0.5"/>
        </pattern>
      </defs>
      <rect width="400" height="500" fill="url(#grid)" />
      {/* Bow river, abstract curve */}
      <path d="M -10 180 C 80 200, 140 140, 200 200 S 320 280, 410 240"
        fill="none" stroke="rgba(122,156,176,0.4)" strokeWidth="14" />
      <path d="M -10 180 C 80 200, 140 140, 200 200 S 320 280, 410 240"
        fill="none" stroke="rgba(122,156,176,0.25)" strokeWidth="22" />
      {/* Elbow river */}
      <path d="M 220 510 C 200 420, 240 380, 200 320 S 160 240, 200 200"
        fill="none" stroke="rgba(122,156,176,0.35)" strokeWidth="9" />

      {/* Downtown core */}
      <rect x="200" y="170" width="40" height="30" fill="rgba(236,229,212,0.06)" stroke="rgba(236,229,212,0.18)" />
      <text x="220" y="188" fontFamily="JetBrains Mono, monospace" fontSize="7" fill="#8a8474" textAnchor="middle" letterSpacing="1">DOWNTOWN</text>

      {/* Dots for neighborhoods */}
      {[
        { x: 170, y: 260, label: 'Mount Royal' },
        { x: 140, y: 290, label: 'Elbow Park' },
        { x: 60, y: 320, label: 'Aspen' },
        { x: 110, y: 215, label: 'Britannia' },
        { x: 195, y: 305, label: 'Roxboro' },
        { x: 80, y: 380, label: 'Pump Hill' },
        { x: 230, y: 295, label: 'Rideau' },
        { x: 245, y: 245, label: 'Bel-Aire' },
        { x: 95, y: 165, label: 'Eagle Ridge' },
      ].map((n, i) => (
        <g key={i}>
          <circle cx={n.x} cy={n.y} r="14" fill="rgba(201,168,117,0.08)" />
          <circle cx={n.x} cy={n.y} r="5" fill="#c9a875" />
          <text x={n.x + 12} y={n.y + 3} fontFamily="Cormorant Garamond, serif"
            fontSize="13" fontStyle="italic" fill="#ece5d4">{n.label}</text>
        </g>
      ))}

      <text x="20" y="480" fontFamily="JetBrains Mono, monospace" fontSize="8" fill="#6b6657" letterSpacing="1">
        FIG. 01, CALGARY SW · ESTATE COMMUNITIES MAP
      </text>
      <text x="380" y="480" fontFamily="JetBrains Mono, monospace" fontSize="8" fill="#6b6657" letterSpacing="1" textAnchor="end">
        N ↑
      </text>
    </svg>
  );
}

function NeighborhoodsSection({ setPage }) {
  return (
    <section className="section shell container" style={{paddingTop: 0}}>
      <div className="section-header">
        <div>
          <span className="eyebrow">,  Areas I serve</span>
          <h2 className="display" style={{marginTop: 18}}>
            Calgary &amp; the<br/>
            <em className="display-italic">communities around it.</em>
          </h2>
        </div>
        <div className="meta">
          <p>From the city core to the foothills and the Bow Valley, choose an area to browse every active MLS® listing there, updated in real time.</p>
        </div>
      </div>

      {/* Real serviceable areas, each card deep-links to live BoldTrail search */}
      <div className="area-grid">
        {AREAS.map(a => (
          <button key={a.place} className="area-card" onClick={() => window.openIdxSearch({ place: a.place })}>
            <div className="area-top">
              <span className="area-num">{a.num}</span>
              <span className="area-go">View listings →</span>
            </div>
            <h3 className="area-name display">{a.name}</h3>
            <p className="area-blurb">{a.blurb}</p>
          </button>
        ))}
      </div>
    </section>
  );
}

function MeetSeenu({ setPage }) {
  return (
    <section className="section shell container" style={{paddingTop: 0}}>
      <div className="meet">
        <div className="meet-portrait">
          <picture style={{display:'contents'}}>
            <source srcSet="images/seenu-portrait.webp" type="image/webp" />
            <img src="images/seenu-portrait.png" width="543" height="543" loading="lazy" decoding="async" alt="Seenu George, Real Estate Advisor" />
          </picture>
          <div className="meet-portrait-tone"></div>
          <div className="meet-portrait-fade"></div>
          <div className="meet-portrait-cap">
            <div className="who">Seenu George</div>
            <div className="role">Real Estate Advisor · eXp Realty</div>
          </div>
        </div>
        <div className="meet-copy">
          <span className="eyebrow">,  Meet Seenu</span>
          <h2 className="display" style={{marginTop: 18, marginBottom: 40, fontSize:'clamp(38px,4.4vw,60px)', lineHeight: 1.08}}>
            Your partner, from first<br/>
            <em className="display-italic">search to final signature.</em>
          </h2>
          <p className="body" style={{marginTop: 0}}>
            Seenu's path into real estate began with buying her own first home, and the customer-service background she brought with her still shapes every client relationship. Having relocated across Canada herself, she understands the excitement and the challenges of a move, and she's dedicated to finding the opportunities that bring her clients the most value.
          </p>
          <p className="body" style={{marginTop: 16}}>
            Known for a strong work ethic, prompt communication and genuine care, she's a true advocate in every transaction, for first-time buyers, growing families, and clients moving up.
          </p>
          <div className="flex gap" style={{marginTop: 32}}>
            <button className="btn btn-gold" onClick={() => setPage('about')}>
              Read Seenu's story
              <span className="arrow">→</span>
            </button>
            <button className="btn btn-ghost" onClick={() => setPage('contact')}>
              Book a consultation
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function InstagramReel() {
  const REEL = 'https://www.instagram.com/reel/DFB9QmFJnd3/';

  React.useEffect(() => {
    const process = () => { try { window.instgrm && window.instgrm.Embeds.process(); } catch (e) {} };
    if (!document.getElementById('ig-embed-js')) {
      const s = document.createElement('script');
      s.id = 'ig-embed-js';
      s.async = true;
      s.src = 'https://www.instagram.com/embed.js';
      s.onload = process;
      document.body.appendChild(s);
    } else {
      process();
    }
    const t = setTimeout(process, 1200);
    return () => clearTimeout(t);
  }, []);

  // Official Instagram embed markup. embed.js replaces it with the live player
  // on the published site; if a browser blocks it, the link below still works.
  const reelHtml = '<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/reel/DFB9QmFJnd3/?utm_source=ig_embed&utm_campaign=loading" data-instgrm-version="14" style="background:#FFF;border:0;border-radius:3px;box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15);margin:0 auto;max-width:420px;min-width:300px;padding:0;width:100%;"><div style="padding:16px;"><a href="https://www.instagram.com/reel/DFB9QmFJnd3/?utm_source=ig_embed" target="_blank" rel="noopener" style="color:#385185;font-family:Arial,sans-serif;font-size:14px;text-decoration:none;">View this reel on Instagram</a></div></blockquote>';

  return (
    <section className="section shell container" style={{paddingTop: 0}}>
      <div className="reel-layout">
        <div className="reel-copy">
          <span className="eyebrow">,  Watch</span>
          <h2 className="display" style={{marginTop: 18, fontSize: 'clamp(40px,5vw,72px)'}}>
            A moment from<br/>
            <em className="display-italic">@seenugeorge3.</em>
          </h2>
          <p className="body" style={{marginTop: 24}}>
            Market notes, new listings, and a look at life as a Calgary real estate advisor, straight from Seenu's Instagram. Follow along for the latest.
          </p>
          <a className="btn btn-gold" href="https://www.instagram.com/seenugeorge3/reels/" target="_blank" rel="noopener" style={{marginTop: 32}}>
            Follow @seenugeorge3
            <span className="arrow">→</span>
          </a>
        </div>

        <div className="reel-embed-col">
          <div className="reel-embed" dangerouslySetInnerHTML={{ __html: reelHtml }}></div>
          <a className="link-arrow" href={REEL} target="_blank" rel="noopener" style={{marginTop: 18, display:'inline-flex'}}>
            Open the reel on Instagram →
          </a>
        </div>
      </div>
    </section>
  );
}

function StatsStrip() {
  return (
    <section className="shell container">
      <div className="stats-strip">
        {STATS.map((s, i) => (
          <div key={i} className="stat">
            <div className="num display">{s.num}</div>
            <div className="lbl">{s.lbl}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Calculator({ setPage }) {
  const [price, setPrice] = useStateH(2500000);
  const [down, setDown] = useStateH(25);
  const [rate, setRate] = useStateH(5.49);
  const [term, setTerm] = useStateH(25);

  // Canada minimum down payment: 5% on first $500k, 10% on $500k, $1.5M, 20% over $1.5M.
  const minDownPct = useMemoH(() => {
    if (price <= 500000) return 5;
    if (price >= 1500000) return 20;
    const minDollars = 25000 + (price - 500000) * 0.10; // 5% of 500k + 10% of remainder
    return (minDollars / price) * 100;
  }, [price]);

  // Keep the chosen down % at or above the legal minimum for this price.
  React.useEffect(() => {
    if (down < minDownPct) setDown(Math.ceil(minDownPct));
  }, [minDownPct]);

  const effDown = Math.max(down, minDownPct);
  // CMHC mortgage insurance (added to the loan) when down payment < 20%.
  const cmhcRate = (p) => p < 0.10 ? 0.04 : (p < 0.15 ? 0.031 : (p < 0.20 ? 0.028 : 0));
  const basePrincipal = price * (1 - effDown / 100);
  const cmhc = effDown < 20 ? basePrincipal * cmhcRate(effDown / 100) : 0;
  const principal = basePrincipal + cmhc;

  const monthly = useMemoH(() => {
    const r = rate / 100 / 12;
    const n = term * 12;
    if (r === 0) return principal / n;
    return principal * (r * Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1);
  }, [principal, rate, term]);

  const fmt = (n) => '$' + Math.round(n).toLocaleString('en-CA');

  return (
    <section className="section shell container" style={{paddingTop: 0}}>
      <div className="section-header">
        <div>
          <span className="eyebrow">,  The Numbers</span>
          <h2 className="display" style={{marginTop: 18}}>
            Mortgage<br/>
            <em className="display-italic">calculator.</em>
          </h2>
        </div>
        <div className="meta">
          <p>A starting point, not financial advice. For real, tailored numbers, create a free account and Seenu will connect you with a trusted local lender.</p>
        </div>
      </div>

      <div className="calc">
        <div className="calc-form">
          <div className="calc-field">
            <label>Home price</label>
            <div className="calc-input">
              <span>$</span>
              <input type="number" value={price} onChange={(e) => setPrice(+e.target.value || 0)} />
            </div>
            <div className="calc-slider">
              <input type="range" min={500000} max={10000000} step={50000}
                value={price} onChange={(e) => setPrice(+e.target.value)} />
            </div>
          </div>

          <div className="calc-field">
            <label>Down payment · {effDown.toFixed(effDown % 1 === 0 ? 0 : 1)}% · {fmt(price * effDown / 100)}</label>
            <div className="calc-slider">
              <input type="range" min={5} max={50} step={1}
                value={down} onChange={(e) => setDown(+e.target.value)} />
            </div>
            <div className="kicker" style={{marginTop: 8, color: down < minDownPct ? 'var(--gold)' : 'var(--muted)'}}>
              Canada minimum for this price: {minDownPct.toFixed(minDownPct % 1 === 0 ? 0 : 1)}% ({fmt(price * minDownPct / 100)})
            </div>
          </div>

          <div className="calc-field">
            <label>Interest rate · {rate.toFixed(2)}%</label>
            <div className="calc-slider">
              <input type="range" min={2} max={9} step={0.01}
                value={rate} onChange={(e) => setRate(+e.target.value)} />
            </div>
          </div>

          <div className="calc-field">
            <label>Amortization · {term} years</label>
            <div className="calc-slider">
              <input type="range" min={5} max={30} step={1}
                value={term} onChange={(e) => setTerm(+e.target.value)} />
            </div>
          </div>
        </div>

        <div className="calc-results">
          <div className="kicker" style={{marginBottom: 16, textTransform:'uppercase', letterSpacing:'0.18em'}}>
            Estimated monthly payment
          </div>
          <div className="calc-big">{fmt(monthly)} <small>/ mo</small></div>

          <div className="calc-breakdown">
            <div className="row"><span className="lbl">Home price</span><span className="val">{fmt(price)}</span></div>
            <div className="row"><span className="lbl">Down payment</span><span className="val">{fmt(price * effDown/100)}</span></div>
            {cmhc > 0 && <div className="row"><span className="lbl">CMHC insurance</span><span className="val">{fmt(cmhc)}</span></div>}
            <div className="row"><span className="lbl">Principal{cmhc > 0 ? ' + ins.' : ''}</span><span className="val">{fmt(principal)}</span></div>
            <div className="row"><span className="lbl">Rate · Term</span><span className="val">{rate.toFixed(2)}% · {term}y</span></div>
            <div className="row"><span className="lbl">Property tax / mo</span><span className="val">{fmt(price * 0.005 / 12)}</span></div>
            <div className="row"><span className="lbl">Total monthly</span><span className="val">{fmt(monthly + price * 0.005 / 12)}</span></div>
          </div>

          <div className="kicker" style={{marginTop: 18, lineHeight: 1.6, color: 'var(--muted-2)'}}>
            Estimate only, for illustration, not a mortgage offer or financial advice.
            Actual rates, the stress-test qualifying rate, CMHC premiums, taxes and fees
            vary by lender and your situation. Confirm real numbers with a licensed mortgage professional.
          </div>

          <div style={{marginTop: 28, display:'flex', gap: 12, flexWrap:'wrap'}}>
            <button className="btn btn-gold btn-sm" onClick={() => { try { window.__sgContactIntent = 'financing'; } catch(e){} setPage && setPage('contact'); }}>Connect me with a mortgage broker →</button>
            <button className="btn btn-ghost btn-sm" onClick={() => window.openIdxSearch({})}>Search properties →</button>
            <button className="btn btn-ghost btn-sm" onClick={() => window.print()}>Print estimate</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeTestimonial() {
  const [featured, ...rest] = REVIEWS;
  return (
    <section className="section shell container" style={{paddingTop: 0}}>
      <div className="section-header">
        <div>
          <span className="eyebrow">,  What clients say</span>
          <h2 className="display" style={{marginTop: 18}}>
            Five stars,<br/>
            <em className="display-italic">again and again.</em>
          </h2>
        </div>
        <div className="meta">
          <div style={{display:'flex', gap:8, justifyContent:'flex-end', marginBottom:12}}>
            {[1,2,3,4,5].map(i => <span key={i} style={{color:'var(--gold)', fontSize:20}}>★</span>)}
          </div>
          <p>Real reviews from buyers and sellers across Calgary and area, many of them first-time buyers and families relocating from out of province or overseas.</p>
        </div>
      </div>

      {/* Featured review */}
      <div className="review-featured">
        <div className="testimonial-attrib">
          <div className="who">
            {featured.name}
            <small>★★★★★ · Verified client review</small>
          </div>
        </div>
        <div className="testimonial-quote">{featured.quote}</div>
      </div>

      {/* Remaining reviews */}
      <div className="reviews-grid">
        {rest.map((r, i) => (
          <div key={i} className="review-card">
            <div className="review-stars">{'★'.repeat(r.stars)}</div>
            <p className="review-text">{r.short}</p>
            <div className="review-name">{r.name}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function LeadCapture() {
  return (
    <section className="section shell container" style={{paddingTop: 0}}>
      <div style={{position:'relative', overflow:'hidden', border:'1px solid var(--hairline-strong)', background:'var(--ink-soft)', padding:'clamp(48px,7vw,96px)'}}>
        <div style={{position:'absolute', top:0, left:0, right:0, height:1, background:'linear-gradient(90deg, transparent, var(--gold), transparent)'}}></div>
        <div className="cta-split">
          <div>
            <span className="eyebrow">,  Private Client Access</span>
            <h2 className="display" style={{fontSize:'clamp(40px,5vw,72px)', fontWeight:300, margin:'20px 0 24px', lineHeight:1.05, maxWidth:'16ch'}}>
              Save searches &amp; see <em className="display-italic">new listings first.</em>
            </h2>
            <p className="body" style={{maxWidth:'46ch', margin:0}}>
              Create a complimentary account to save favourites, track price changes, and receive new Calgary-area listings by email the moment they hit the MLS®, including off-market opportunities shared with registered clients first.
            </p>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:16}}>
            <button className="btn btn-solid" style={{justifyContent:'space-between', width:'100%'}}
              onClick={() => window.openIdxRegister()}>
              Create a free account
              <span className="arrow">→</span>
            </button>
            <button className="btn btn-ghost" style={{justifyContent:'space-between', width:'100%'}}
              onClick={() => window.openIdxLink('allListings')}>
              Browse all listings first
              <span className="arrow">→</span>
            </button>
            <p className="kicker" style={{marginTop:8, lineHeight:1.6}}>
              Sign in with email, Google, or Facebook · No obligation · Unsubscribe anytime
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage({ setPage }) {
  return (
    <main>
      <Hero setPage={setPage} />
      <NeighborhoodsSection setPage={setPage} />
      <MeetSeenu setPage={setPage} />
      <FeaturedListings setPage={setPage} />
      <StatsStrip />
      <Calculator setPage={setPage} />
      <HomeTestimonial />
      <LeadCapture />
      <InstagramReel />
    </main>
  );
}

window.HomePage = HomePage;
window.Calculator = Calculator;

// Standalone calculator page (deep-linkable at #/calculator)
function CalculatorPage({ setPage }) {
  return (
    <main>
      <div className="page-header shell container">
        <div className="crumbs">Home · <span>Mortgage Calculator</span></div>
        <h1 className="display">Calgary mortgage<br/><em className="display-italic">calculator.</em></h1>
      </div>
      <Calculator setPage={setPage} />
    </main>
  );
}
window.CalculatorPage = CalculatorPage;