// Shared layout pieces: utility bar, header, footer, ticker, formatting helpers
const { useState, useEffect, useMemo, useRef } = React;

const fmtUSD = (n, d = 0) => n.toLocaleString("en-US", { style: "currency", currency: "USD", minimumFractionDigits: d, maximumFractionDigits: d });
const fmtPct = (n, d = 3) => n.toFixed(d) + "%";

function UtilityBar() {
  return (
    <div className="utility">
      <div className="container">
        <div className="u-left">
          <span><span className="u-dot"></span>Equal Housing Lender</span>
          <span className="u-extra">Locally owned · Licensed in FL, GA, AL, SC, NC</span>
        </div>
        <div className="u-right">
          <a href="#">Client Login</a>
          <a href="#">Realtor Partners</a>
          <a href="#">Careers</a>
        </div>
      </div>
    </div>
  );
}

function Brand({ to = "index.html" }) {
  return (
    <a className="brand" href={to}>
      <svg className="brand-mark-svg" width="40" height="40" viewBox="0 0 40 40" aria-hidden="true">
        <rect width="40" height="40" fill="var(--navy)"/>
        {/* F crossbar — horizontal accent */}
        <rect x="8" y="9" width="24" height="2.2" fill="#fafaf7"/>
        <rect x="8" y="9" width="2.2" height="22" fill="#fafaf7"/>
        <rect x="8" y="18.5" width="14" height="2.2" fill="#fafaf7"/>
        {/* Bronze keystone — represents "the home" */}
        <rect x="24" y="22" width="8" height="9" fill="#a8896b"/>
        <polygon points="24,22 28,18 32,22" fill="#a8896b"/>
      </svg>
      <div className="brand-text">
        <div>FGC Mortgage</div>
      </div>
    </a>
  );
}

function Header({ active = "home" }) {
  const items = [
    { id: "products", label: "Loan Products", href: "products.html", menu: true },
    { id: "purchase", label: "Buy a Home", href: "purchase.html" },
    { id: "refinance", label: "Refinance", href: "refinance.html" },
    { id: "rates", label: "Rates & Tools", href: "rates.html", menu: true },
    { id: "about", label: "About", href: "about.html" },
  ];
  return (
    <header className="header">
      <div className="container">
        <Brand />
        <nav className="nav">
          {items.map(i => (
            <a key={i.id} href={i.href} className={i.menu ? "has-menu" : ""}
               style={active === i.id ? { color: "var(--ink)", fontWeight: 600 } : {}}>
              {i.label}
            </a>
          ))}
        </nav>
        <div className="header-cta">
          <a className="btn btn-ghost" href="contact.html">Find a Loan Officer</a>
          <a className="btn btn-primary" href="apply.html">Apply Now <span className="arr">→</span></a>
        </div>
      </div>
    </header>
  );
}

function Ticker() {
  const rows = [
    { name: "30-Yr Fixed",     rate: 6.390, delta: -0.03 },
    { name: "20-Yr Fixed",     rate: 6.125, delta: -0.02 },
    { name: "15-Yr Fixed",     rate: 5.730, delta: -0.04 },
    { name: "10-Yr Fixed",     rate: 5.500, delta:  0.00 },
    { name: "7/6 ARM",         rate: 5.875, delta:  0.02 },
    { name: "5/6 ARM",         rate: 5.750, delta:  0.02 },
    { name: "FHA 30-Yr",       rate: 6.150, delta: -0.04 },
    { name: "VA 30-Yr",        rate: 6.020, delta: -0.03 },
    { name: "Jumbo 30-Yr",     rate: 6.432, delta: -0.02 },
    { name: "USDA 30-Yr",      rate: 6.250, delta: -0.04 },
    { name: "HELOC Prime+0",   rate: 8.250, delta:  0.00 },
    { name: "DSCR Investor",   rate: 7.375, delta:  0.03 },
  ];
  const Row = () => (
    <div className="ticker-row">
      {rows.concat(rows).map((r, i) => (
        <span key={i} className="ticker-item">
          <span className="t-name">{r.name}</span>
          <span className="t-rate">{r.rate.toFixed(3)}%</span>
          <span className={"t-delta " + (r.delta < 0 ? "dn" : r.delta > 0 ? "up" : "")}>
            {r.delta === 0 ? "—" : (r.delta > 0 ? "▲" : "▼") + " " + Math.abs(r.delta).toFixed(2)}
          </span>
        </span>
      ))}
    </div>
  );
  return (
    <div className="ticker">
      <div className="container">
        <div className="ticker-label">Live Rates</div>
        <div className="ticker-track"><Row /></div>
        <div className="ticker-stamp">As of {new Date().toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"})} · APR varies</div>
      </div>
    </div>
  );
}

function Footer() {
  const cols = [
    { h: "Loan Products", links: ["Conventional","FHA","VA","USDA","Jumbo","Non-QM","HELOC","Construction","DSCR Investor"] },
    { h: "Tools", links: ["Mortgage Calculator","Affordability","Refi Savings","Rate Watch","Document Checklist","Compare Loans"] },
    { h: "Company", links: ["About","Our Team","Community Giving","Careers","Press"] },
    { h: "Support", links: ["Contact","Find a Loan Officer","Locations","Disclosures","Licensing","Accessibility"] },
  ];
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-brand">
          <Brand />
          <p>FGC Mortgage is a locally owned mortgage lender headquartered in Tampa, serving families across Florida and the Southeast since 2008. One team. One process. Closings that actually happen on time.</p>
        </div>
        {cols.map(c => (
          <div key={c.h}>
            <h5>{c.h}</h5>
            <ul>{c.links.map(l => <li key={l}><a href="#">{l}</a></li>)}</ul>
          </div>
        ))}
      </div>
      <div className="container">
        <div className="footer-legal">
          FGC Mortgage, LLC · Headquartered at 401 East Jackson Street, Suite 2400, Tampa, FL 33602 · Licensed by the Florida Office of Financial Regulation and other state regulators where applicable. Loans subject to credit approval. Rates and terms are illustrative and may change without notice. Equal Housing Lender. © {new Date().getFullYear()} FGC Mortgage, LLC. All rights reserved.
        </div>
        <div className="footer-bottom">
          <span>Privacy · Terms · Cookies · CA Privacy Notice · Accessibility · Do Not Sell My Information</span>
          <span>v2026.5</span>
        </div>
      </div>
    </footer>
  );
}

function Crumb({ items }) {
  return (
    <div className="container">
      <div className="crumb">
        {items.map((it, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep">/</span>}
            {it.href ? <a href={it.href}>{it.label}</a> : <span>{it.label}</span>}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function Placeholder({ label, className = "", style = {} }) {
  return <div className={"placeholder " + className} style={style}>{label}</div>;
}

Object.assign(window, { UtilityBar, Header, Footer, Ticker, Brand, Crumb, Placeholder, fmtUSD, fmtPct });