/* global React, ArrowRight, useReveal */
const { useState: useStateP, useEffect: useEffectP, useRef: useRefP } = React;

// ============================================================
// HOME
// ============================================================
function HomePage() {
  useReveal();
  return (
    <div className="page-fade">
      <Hero />
      <TrustBar />
      <SolutionsSection />
      <ProcessSection />
      <CompareSection />
      <IndustriesSection />
      <CtaStrip />
    </div>);

}

// ---------- Hero ----------
function Hero() {
  // Recent fundings shown in the hero ledger
  const recent = [
    { amt: '$250K', kind: 'Working Capital', who: 'Construction · Tampa, FL', t: '2 days ago' },
    { amt: '$1.2M', kind: 'Term Loan', who: 'Logistics · Newark, NJ', t: 'Last week' },
    { amt: '$80K', kind: 'Line of Credit', who: 'Restaurant Group · Austin, TX', t: 'This month' },
  ];

  return (
    <section className="hero" style={{ padding: 0 }}>
      <div className="hero-grid-bg" />
      <div className="container">
        <div className="hero-inner">
          <div>
            <span className="eyebrow hero-eyebrow">Capital, on your terms</span>
            <h1 style={{ marginTop: 22 }}>
              Funding that <em>moves</em><br />at the speed of<br />your business.
            </h1>
            <p className="hero-sub">
              KB Funding Group delivers $10K–$5M in working capital, term loans,
              and lines of credit — with same-day decisions and an advisor who
              actually picks up the phone.
            </p>
            <div className="hero-cta">
              <a href="#/apply" className="btn btn-primary btn-lg">Get Pre-Qualified <ArrowRight /></a>
              <a href="#/process" className="btn btn-ghost-light btn-lg">How it works</a>
            </div>
            <div className="hero-stats">
              <div className="hero-stat">
                <div className="num">$1.2B+</div>
                <div className="label">Funded since 2014</div>
              </div>
              <div className="hero-stat">
                <div className="num">14,800+</div>
                <div className="label">Businesses served</div>
              </div>
              <div className="hero-stat">
                <div className="num">24 hrs</div>
                <div className="label">Average decision time</div>
              </div>
            </div>
          </div>
          <div className="hero-card">
            <div className="ledger-head">
              <span className="ledger-live"><span className="ledger-dot" />Funding now</span>
              <span className="small">This quarter</span>
            </div>
            <div className="ledger-total">$18.4M</div>
            <div className="ledger-total-label">Deployed to 312 businesses this quarter</div>
            <div className="ledger-list">
              {recent.map((r, i) => (
                <div className="ledger-row" key={i}>
                  <div className="ledger-amt">{r.amt}</div>
                  <div className="ledger-meta">
                    <div className="ledger-kind">{r.kind}</div>
                    <div className="ledger-who">{r.who}</div>
                  </div>
                  <div className="ledger-time">{r.t}</div>
                </div>
              ))}
            </div>
            <a href="#/apply" className="btn btn-primary" style={{ marginTop: 4 }}>
              Get your offer <ArrowRight />
            </a>
          </div>
        </div>
      </div>
    </section>);

}

// ---------- Trust bar ----------
function TrustBar() {
  return (
    <div className="trust">
      <div className="container">
        <div className="trust-inner">
          <span className="trust-label">As recognized in</span>
          <div className="trust-items">
            <span className="trust-item">Inc. 5000</span>
            <span className="trust-item">Forbes Finance</span>
            <span className="trust-item">Bloomberg SMB</span>
            <span className="trust-item">BBB <span className="trust-star">A+</span></span>
            <span className="trust-item">Trustpilot <span className="trust-star" style={{ fontFamily: "\"Times New Roman\"" }}>★ 4.8</span></span>
          </div>
        </div>
      </div>
    </div>);

}

// ---------- Solutions ----------
const SOLUTIONS = [
{ id: 'wc', num: 'I.', title: 'Working Capital', desc: 'Flexible cash flow funding for payroll, inventory, marketing — anything that keeps the lights on and the business growing.', amt: 'Up to $2M', term: '3–24 months' },
{ id: 'term', num: 'II.', title: 'Term Loans', desc: 'Predictable monthly payments and competitive rates for established businesses with two or more years of operating history.', amt: '$50K–$5M', term: '1–10 years' },
{ id: 'loc', num: 'III.', title: 'Line of Credit', desc: 'A revolving credit facility you draw from only when you need it. Pay interest on what you use, nothing more.', amt: 'Up to $750K', term: 'Revolving' },
{ id: 'equip', num: 'IV.', title: 'Equipment Financing', desc: 'Finance the trucks, machinery, kitchens, and tech your business runs on. The equipment itself acts as collateral.', amt: '$25K–$2M', term: '2–7 years' },
{ id: 'sba', num: 'V.', title: 'SBA Loans', desc: 'Government-backed financing with the longest terms and lowest rates. Ideal for acquisitions, real estate, and major expansions.', amt: '$100K–$5M', term: '5–25 years' },
{ id: 'invoice', num: 'VI.', title: 'Invoice Factoring', desc: 'Turn your outstanding receivables into immediate cash. Get paid within 24 hours instead of waiting 30, 60, or 90 days.', amt: 'Up to $5M', term: 'Per invoice' }];


function SolutionsSection() {
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow reveal">Funding Solutions</span>
          <h2 className="reveal" style={{ marginTop: 18 }}>Six ways we put capital to <em>work</em>.</h2>
          <p className="reveal">
            From a quick injection of working capital to a multi-year SBA loan, KB Funding
            Group structures financing around how your business actually operates — not
            the other way around.
          </p>
        </div>
        <div className="solutions">
          {SOLUTIONS.map((s, i) =>
          <a href="#/solutions" className="solution reveal" key={s.id} style={{ transitionDelay: `${i * 60}ms` }}
          onClick={(e) => {e.preventDefault();window.location.hash = '/solutions';}}>
              <span className="solution-num">{s.num} &nbsp;Solution</span>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <div className="solution-meta">
                <div><div className="l">Amount</div><div className="v">{s.amt}</div></div>
                <div><div className="l">Term</div><div className="v">{s.term}</div></div>
              </div>
              <span className="solution-link">Learn more <ArrowRight /></span>
            </a>
          )}
        </div>
      </div>
    </section>);

}

// ---------- Process ----------
const STEPS = [
{ n: '01', t: 'Apply in 4 min', d: 'A short online form — no stacks of paperwork, no soft-pull surprises. Just enough for us to know your business.' },
{ n: '02', t: 'We send it to underwriting', d: 'Our in-house underwriting team reviews your file directly. We are the funder — no middlemen, no shopping your file around to outside lenders.' },
{ n: '03', t: 'Review offers', d: 'Compare real, side-by-side offers from approved lenders. Your advisor walks you through every line, every fee.' },
{ n: '04', t: 'Funded same day', d: 'Sign electronically and the wire is on its way — most clients see funds in their account the same business day.' }];


function ProcessSection() {
  return (
    <section className="section-cream">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow reveal">Our Process</span>
          <h2 className="reveal" style={{ marginTop: 18 }}>Four steps. <em>Forty-eight hours.</em></h2>
          <p className="reveal">
            We replaced the bank's loan committee with a direct, advisor-led process
            built for the way small business owners actually work.
          </p>
        </div>
        <div className="steps">
          {STEPS.map((s, i) =>
          <div className="step reveal" key={s.n} style={{ transitionDelay: `${i * 80}ms` }}>
              <span className="step-num">{s.n}</span>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------- Compare ----------
function CompareSection() {
  const rows = [
  ['Time to decision', 'Same day — often within hours', '14–60 days'],
  ['Documents required', '3 months of bank statements', 'Tax returns, full financials, projections'],
  ['Minimum credit score', '550+', '680+'],
  ['Funding amount', '$10K to $5M', 'Often $250K minimum'],
  ['Advisor support', 'A named advisor, start to finish', 'Loan officer, then voicemail'],
  ['Prepayment penalty', 'None on most products', 'Common']];

  return (
    <section>
      <div className="container">
        <div className="section-head" style={{ marginBottom: 48 }}>
          <span className="eyebrow reveal">Why KB</span>
          <h2 className="reveal" style={{ marginTop: 18 }}>How we compare to a <em>traditional bank.</em></h2>
        </div>
        <div className="compare reveal">
          <div className="compare-row head">
            <div></div>
            <div className="col-kb">KB Funding Group</div>
            <div>Traditional Bank</div>
          </div>
          {rows.map((r, i) =>
          <div className="compare-row" key={i}>
              <div className="compare-feat">{r[0]}</div>
              <div className="compare-val col-kb"><span className="check">✓</span> &nbsp;{r[1]}</div>
              <div className="compare-val">{r[2]}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------- Industries ----------
const INDUSTRIES = [
{ name: 'Construction', meta: '2,400+ funded', icon: '①' },
{ name: 'Restaurants', meta: '1,950+ funded', icon: '②' },
{ name: 'Retail & E-comm', meta: '1,720+ funded', icon: '③' },
{ name: 'Trucking & Logistics', meta: '1,560+ funded', icon: '④' },
{ name: 'Healthcare', meta: '1,210+ funded', icon: '⑤' },
{ name: 'Manufacturing', meta: '980+ funded', icon: '⑥' },
{ name: 'Auto Repair', meta: '870+ funded', icon: '⑦' },
{ name: 'Professional Services', meta: '1,400+ funded', icon: '⑧' }];


function IndustriesSection() {
  return (
    <section className="section-navy">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow reveal" style={{ color: 'var(--gold)' }}>Industries</span>
          <h2 className="reveal" style={{ marginTop: 18 }}>We fund every kind of <em>main street</em>.</h2>
          <p className="reveal">
            From one-truck owner-operators to multi-location franchises, our team
            understands the cash-flow rhythms of dozens of industries.
          </p>
        </div>
        <div className="industries reveal">
          {INDUSTRIES.map((ind, i) =>
          <div className="industry" key={i}>
              <div className="industry-icon">{ind.icon}</div>
              <div className="industry-name">{ind.name}</div>
              <div className="industry-meta">{ind.meta}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------- Testimonials ----------
function TestimonialsSection() {
  const tests = [
  {
    dark: false,
    quote: 'I needed bridge capital to take on a federal contract that would have been impossible to fund through my bank. KB had wires moving in two days.',
    name: 'Marcus Hale',
    role: 'CEO, Hale Construction Group',
    initials: 'MH',
    stars: 5
  },
  {
    dark: true,
    quote: 'My advisor walked me through three offers and explained the math on each one. I have never felt that respected by a lender — and I have used quite a few.',
    name: 'Priya Shah',
    role: 'Owner, Shah & Sons Logistics',
    initials: 'PS',
    stars: 5
  }];

  return (
    <section className="section-cream">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow reveal">Client Stories</span>
          <h2 className="reveal" style={{ marginTop: 18 }}>What our clients <em>actually</em> say.</h2>
        </div>
        <div className="testimonial-wrap">
          {tests.map((t, i) =>
          <div className={`testimonial ${t.dark ? 'dark' : ''} reveal`} key={i} style={{ transitionDelay: `${i * 100}ms` }}>
              <span className="quote-mark">"</span>
              <blockquote>{t.quote}</blockquote>
              <div className="testimonial-cite">
                <div className="cite-avatar">{t.initials}</div>
                <div>
                  <div className="cite-name">{t.name}</div>
                  <div className="cite-role">{t.role}</div>
                </div>
                <div style={{ marginLeft: 'auto' }} className="cite-rating">{'★'.repeat(t.stars)}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------- CTA strip ----------
function CtaStrip() {
  return (
    <section className="cta-strip" style={{ padding: 0 }}>
      <div className="container">
        <div className="cta-strip-inner">
          <div>
            <h2>Ready to put <em>capital to work?</em></h2>
            <p>Apply in under four minutes. Pre-qualification is a soft inquiry and won't affect your credit score.</p>
          </div>
          <div className="cta-strip-actions">
            <a href="#/apply" className="btn btn-primary btn-lg">Get Pre-Qualified <ArrowRight /></a>
            <a href="tel:13478814260" className="btn btn-ghost-light btn-lg">(347) 881-4260</a>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, {
  HomePage, Hero, TrustBar, SolutionsSection, ProcessSection,
  CompareSection, IndustriesSection, TestimonialsSection, CtaStrip,
  SOLUTIONS, STEPS, INDUSTRIES
});