// Loan products overview + drill-downs (tabbed within page, with deep-link via hash)
const { useState: useStateP, useEffect: useEffectP } = React;

const PRODUCTS = [
  { id: "conventional", name: "Conventional", tag: "Most popular",
    short: "Fannie Mae & Freddie Mac conforming. The default for buyers with 5–20% down and a 620+ credit score.",
    rate: 6.390, apr: 6.478, min_down: "3%", min_score: 620, max_loan: "$806,500", term: "10–30 yr",
    fits: ["Primary residences and second homes","Strong credit (620+)","5–20% down","Loan amounts within county limits"],
    pros: ["Lowest rates available for qualifying borrowers","PMI removable at 78% LTV","No upfront mortgage insurance"],
    cons: ["Stricter credit and DTI thresholds","Full income documentation required"],
    docs: ["W-2s (last 2 years)","Federal tax returns (last 2 years)","Pay stubs (last 30 days)","Bank statements (last 60 days)","Government-issued ID","Asset & liability schedule"],
  },
  { id: "fha", name: "FHA", tag: "First-time buyer",
    short: "Government-insured. Designed for first-time buyers and borrowers with credit scores from 580.",
    rate: 6.150, apr: 6.685, min_down: "3.5%", min_score: 580, max_loan: "$524,225", term: "15 / 30 yr",
    fits: ["First-time homebuyers","Credit scores 580–680","Lower down-payment availability","Single-family or 2–4 unit (owner-occupied)"],
    pros: ["3.5% down with 580+ FICO","Flexible DTI up to 56.9%","Gift funds permitted for entire down payment"],
    cons: ["Upfront MIP (1.75%) financed into loan","Annual MIP for the life of the loan in most cases","Property must meet FHA standards"],
    docs: ["W-2s (last 2 years)","Federal tax returns (last 2 years)","Pay stubs (last 30 days)","Bank statements (last 60 days)","Rental verification","Government-issued ID"],
  },
  { id: "va", name: "VA", tag: "$0 down",
    short: "For active-duty service members, veterans, and eligible surviving spouses. No down payment, no PMI.",
    rate: 6.020, apr: 6.082, min_down: "$0", min_score: 580, max_loan: "No FGC cap", term: "15 / 30 yr",
    fits: ["Active duty, veterans, National Guard, Reserves","Eligible surviving spouses","Primary residence only","Borrowers with limited down-payment savings"],
    pros: ["No down payment required","No private mortgage insurance","Competitive rates and fees","Funding fee waivable for service-disabled veterans"],
    cons: ["VA funding fee unless exempt","Property must meet VA appraisal standards","Primary residence only"],
    docs: ["Certificate of Eligibility (COE)","DD-214 or Statement of Service","W-2s and tax returns","Pay stubs and LES","Bank statements"],
  },
  { id: "usda", name: "USDA",
    short: "Zero-down loans for eligible rural and suburban properties. Income-qualified.",
    rate: 6.250, apr: 6.345, min_down: "$0", min_score: 640, max_loan: "Area-based", term: "30 yr",
    fits: ["Properties in USDA-eligible zones","Household income within 115% of area median","Primary residence only","Modest single-family homes"],
    pros: ["No down payment","Below-market interest rates","Reduced mortgage insurance vs. FHA"],
    cons: ["Geographic and income limits","Property eligibility verified pre-closing","Owner-occupied only"],
    docs: ["W-2s and tax returns","Pay stubs","Asset statements","Property eligibility verification"],
  },
  { id: "jumbo", name: "Jumbo", tag: "High-balance",
    short: "Loan amounts above conforming limits, up to $5M. Portfolio-priced for high-cost markets.",
    rate: 6.432, apr: 6.481, min_down: "10%", min_score: 700, max_loan: "$5,000,000", term: "15 / 30 yr",
    fits: ["Loan amounts above $806,500","High-cost MSAs (NY, SF, LA, Boston, DC, Miami)","Strong credit (700+)","Documented liquid reserves"],
    pros: ["Up to $5M with one note","Interest-only options available","Cross-collateralization permitted"],
    cons: ["Higher reserve requirements (12+ months PITI)","Full documentation required","Pricing varies by FICO and LTV"],
    docs: ["2 years tax returns (incl. K-1s, schedules)","CPA letter for self-employed","60 days of asset statements","Investment account verification","Schedule of real estate owned"],
  },
  { id: "non-qm", name: "Non-QM",
    short: "Bank-statement and asset-utilization loans for self-employed and high-net-worth borrowers.",
    rate: 7.500, apr: 7.860, min_down: "15%", min_score: 660, max_loan: "$3,500,000", term: "30 yr",
    fits: ["Self-employed (12 or 24 months bank statements)","Asset depletion qualifying","1099 contractors","Recently retired with significant assets"],
    pros: ["Income proven via bank deposits, not tax returns","Asset-based qualification available","Faster pre-qual than full-doc jumbo"],
    cons: ["Higher rates than agency products","Higher reserve requirements","Prepayment penalty in some scenarios"],
    docs: ["12 or 24 months business + personal bank statements","Profit & loss statement","Business license","Liquid asset verification"],
  },
  { id: "dscr", name: "DSCR Investor", tag: "No personal income",
    short: "Qualify on the property's cash flow — no personal income docs. Built for 1–4 unit rentals.",
    rate: 7.375, apr: 7.642, min_down: "20%", min_score: 680, max_loan: "$2,000,000", term: "30 yr",
    fits: ["Real estate investors","1–4 unit residential rentals","Short-term rental properties (STR)","Portfolio loans up to 10 properties"],
    pros: ["No tax returns or W-2s","No personal DTI calculation","Close in LLC name","Unlimited financed properties"],
    cons: ["Property must achieve 1.0+ DSCR","Higher down payment (20–25%)","Investment properties only"],
    docs: ["Lease agreements or market rent appraisal","60 days of asset statements","Entity documents (LLC operating agreement)","Property insurance binder"],
  },
  { id: "heloc", name: "HELOC & Home Equity",
    short: "Tap up to 90% CLTV without disturbing your first mortgage. Draw periods up to 10 years.",
    rate: 8.250, apr: 8.250, min_down: "—", min_score: 680, max_loan: "$500,000", term: "10/20 draw",
    fits: ["Homeowners with 20%+ equity","Renovation, education, or business funding","Borrowers wanting to preserve a low first-lien rate","Investment-property owners (select states)"],
    pros: ["Variable rate tied to Prime","Interest-only payments during draw","Funds available within 5 business days of close"],
    cons: ["Variable rate adjusts with Prime","Potential annual or inactivity fees","Closing costs may apply above $250K"],
    docs: ["Recent mortgage statement","W-2s and pay stubs","Homeowners insurance declaration page","Last 2 years of tax returns"],
  },
  { id: "construction", name: "Construction-to-Perm",
    short: "One closing, one set of fees, one loan that converts from build draws to permanent financing.",
    rate: 6.875, apr: 7.024, min_down: "20%", min_score: 700, max_loan: "$3,000,000", term: "12-mo build + 30 yr",
    fits: ["Custom home builds","Knock-down rebuilds on owned land","Major renovations exceeding 50% of value"],
    pros: ["Single closing — lock the perm rate up front","Interest-only during construction","Up to 12-month build period"],
    cons: ["Approved builder list required","Detailed budget and draw schedule","Inspection-based draws"],
    docs: ["Plans and specifications","Builder contract and budget","Land deed or purchase contract","Standard income & asset docs"],
  },
];

function Drilldown() {
  const [active, setActive] = useStateP(() => {
    const h = window.location.hash.slice(1);
    return PRODUCTS.find(p => p.id === h)?.id || "conventional";
  });
  useEffectP(() => {
    const onHash = () => {
      const h = window.location.hash.slice(1);
      if (PRODUCTS.find(p => p.id === h)) setActive(h);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const p = PRODUCTS.find(x => x.id === active);

  return (
    <>
      <UtilityBar />
      <Header active="products" />

      <Crumb items={[
        { label: "Home", href: "index.html" },
        { label: "Loan Products" },
      ]} />

      <section className="page-hero">
        <div className="container">
          <div className="section-num">Loan Products</div>
          <h1>The full menu, underwritten in-house.</h1>
          <p className="lede">Nine product lines covering primary residences, second homes, and investment property — all priced, underwritten, and serviced by FGC. Compare the table below or drill into any product for eligibility, documentation, and current pricing.</p>
        </div>
      </section>

      {/* Comparison table */}
      <section className="section">
        <div className="container">
          <div className="section-num" style={{marginBottom:16}}>At a glance</div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Product</th>
                <th>Best for</th>
                <th className="num">Min. down</th>
                <th className="num">Min. FICO</th>
                <th className="num">Sample rate</th>
                <th className="num">APR</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {PRODUCTS.map(pr => (
                <tr key={pr.id}>
                  <td><strong>{pr.name}</strong>{pr.tag && <span style={{marginLeft:8}} className="tag">{pr.tag}</span>}</td>
                  <td style={{color:"var(--ink-3)",maxWidth:"32ch"}}>{pr.short.split(".")[0]}.</td>
                  <td className="num">{pr.min_down}</td>
                  <td className="num">{pr.min_score}</td>
                  <td className="num">{pr.rate.toFixed(3)}%</td>
                  <td className="num">{pr.apr.toFixed(3)}%</td>
                  <td className="num"><a href={"#" + pr.id} onClick={() => setActive(pr.id)} style={{color:"var(--navy)",fontWeight:500}}>Drill in →</a></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      {/* Drill-down panel */}
      <section className="section alt">
        <div className="container">
          <div className="section-num" style={{marginBottom:16}}>Product detail</div>

          <div className="tabs" style={{overflowX:"auto",flexWrap:"nowrap"}}>
            {PRODUCTS.map(pr => (
              <button
                key={pr.id}
                className={active === pr.id ? "active" : ""}
                onClick={() => { setActive(pr.id); history.replaceState(null,"","#"+pr.id); }}
              >{pr.name}</button>
            ))}
          </div>

          <div style={{display:"grid",gridTemplateColumns:"1.4fr 1fr",gap:48,alignItems:"start"}}>
            <div>
              <h2 style={{fontFamily:"var(--serif)",fontWeight:400,fontSize:48,letterSpacing:"-0.02em",margin:"0 0 16px",lineHeight:1}}>{p.name}</h2>
              <p style={{fontSize:18,color:"var(--ink-2)",lineHeight:1.5,maxWidth:"58ch",marginBottom:32}}>{p.short}</p>

              <div style={{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:0,border:"1px solid var(--rule)",background:"var(--bg)",marginBottom:40}}>
                {[
                  { k: "Sample rate", v: p.rate.toFixed(3) + "%", s: "30-day lock · 740 FICO" },
                  { k: "APR",         v: p.apr.toFixed(3) + "%",  s: "Includes points & fees" },
                  { k: "Min. down",   v: p.min_down,              s: "Lower with grants" },
                  { k: "Min. FICO",   v: p.min_score,             s: "Best pricing 740+" },
                  { k: "Max. loan",   v: p.max_loan,              s: "Subject to county limits" },
                  { k: "Term",        v: p.term,                  s: "Fixed and ARM available" },
                ].map((c, i) => (
                  <div key={c.k} style={{padding:24,borderRight:(i % 3 === 2 ? 0 : "1px solid var(--rule)"),borderBottom:(i < 3 ? "1px solid var(--rule)" : 0)}}>
                    <div style={{fontFamily:"var(--mono)",fontSize:11,letterSpacing:"0.08em",textTransform:"uppercase",color:"var(--ink-3)",marginBottom:8}}>{c.k}</div>
                    <div style={{fontFamily:"var(--serif)",fontSize:26,letterSpacing:"-0.015em",lineHeight:1,color:"var(--ink)"}}>{c.v}</div>
                    <div style={{fontSize:11.5,color:"var(--ink-4)",marginTop:8,fontFamily:"var(--mono)"}}>{c.s}</div>
                  </div>
                ))}
              </div>

              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:32,marginBottom:40}}>
                <div>
                  <div className="section-num" style={{marginBottom:12}}>Strengths</div>
                  <ul style={{listStyle:"none",padding:0,margin:0,display:"grid",gap:10}}>
                    {p.pros.map(x => <li key={x} style={{paddingLeft:18,position:"relative",fontSize:14.5,color:"var(--ink-2)",lineHeight:1.5}}>
                      <span style={{position:"absolute",left:0,top:9,width:10,height:1,background:"var(--navy)"}} />{x}</li>)}
                  </ul>
                </div>
                <div>
                  <div className="section-num" style={{marginBottom:12}}>Considerations</div>
                  <ul style={{listStyle:"none",padding:0,margin:0,display:"grid",gap:10}}>
                    {p.cons.map(x => <li key={x} style={{paddingLeft:18,position:"relative",fontSize:14.5,color:"var(--ink-2)",lineHeight:1.5}}>
                      <span style={{position:"absolute",left:0,top:9,width:10,height:1,background:"var(--bronze)"}} />{x}</li>)}
                  </ul>
                </div>
              </div>

              <div>
                <div className="section-num" style={{marginBottom:12}}>Best fit</div>
                <ul style={{listStyle:"none",padding:0,margin:0,display:"grid",gridTemplateColumns:"1fr 1fr",gap:10}}>
                  {p.fits.map(x => <li key={x} style={{paddingLeft:18,position:"relative",fontSize:14.5,color:"var(--ink-2)",lineHeight:1.5}}>
                    <span style={{position:"absolute",left:0,top:9,width:10,height:1,background:"var(--ink-3)"}} />{x}</li>)}
                </ul>
              </div>
            </div>

            <aside>
              <div style={{background:"var(--bg)",border:"1px solid var(--rule)",padding:28,marginBottom:24}}>
                <div className="section-num" style={{marginBottom:12}}>Documents to prepare</div>
                <ul style={{listStyle:"none",padding:0,margin:0}}>
                  {p.docs.map((d, i) => (
                    <li key={d} style={{padding:"12px 0",borderBottom:(i === p.docs.length-1 ? 0 : "1px solid var(--rule-2)"),fontSize:14,display:"flex",gap:12,alignItems:"baseline"}}>
                      <span style={{fontFamily:"var(--mono)",color:"var(--ink-4)",fontSize:11,minWidth:24}}>{String(i+1).padStart(2,"0")}</span>
                      <span style={{color:"var(--ink-2)"}}>{d}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <div style={{background:"var(--navy)",color:"#fafaf7",padding:28}}>
                <div className="section-num" style={{color:"#a8896b",marginBottom:12}}>Next step</div>
                <div style={{fontFamily:"var(--serif)",fontSize:24,lineHeight:1.15,letterSpacing:"-0.01em",marginBottom:20}}>Get a verified pre-qualification for a {p.name} loan in 7 minutes.</div>
                <div style={{display:"grid",gap:10}}>
                  <a className="btn btn-primary" href="apply.html" style={{background:"#fafaf7",color:"#0b1f3a",borderColor:"#fafaf7",justifyContent:"center"}}>Start application <span className="arr">→</span></a>
                  <a className="btn btn-ghost" href="contact.html" style={{borderColor:"#2d4a73",color:"#fafaf7",background:"transparent",justifyContent:"center"}}>Talk to an advisor</a>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

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