/* global React, ArrowRight, useReveal, SOLUTIONS, STEPS, INDUSTRIES, CtaStrip */
const { useState: useStateS, useEffect: useEffectS } = React;

// ============================================================
// SOLUTIONS PAGE
// ============================================================
function SolutionsPage() {
  useReveal();
  return (
    <div className="page-fade">
      <PageBanner
        crumb="Funding Solutions"
        title={<>Capital structured around <em>your business</em>.</>}
        lead="Six core products, dozens of variations, one advisor to help you find the right fit. Browse what we fund and how — then apply when you're ready."
      />
      <section>
        <div className="container">
          <div style={{ display: 'grid', gap: 24 }}>
            {SOLUTIONS.map((s, i) => (
              <div key={s.id} className="reveal" style={{
                display: 'grid',
                gridTemplateColumns: '0.6fr 1.4fr 1fr',
                gap: 32,
                background: 'var(--white)',
                border: '1px solid var(--line)',
                padding: 40,
                alignItems: 'center',
                transitionDelay: `${i * 60}ms`,
              }}>
                <div>
                  <span className="solution-num">{s.num}</span>
                  <h3 style={{ marginTop: 14 }}>{s.title}</h3>
                </div>
                <div>
                  <p style={{ color: 'var(--slate)', fontSize: 16 }}>{s.desc}</p>
                  <div style={{ display: 'flex', gap: 28, marginTop: 14, flexWrap: 'wrap' }}>
                    <div><div style={{ fontSize: 11, color: 'var(--slate)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Amount</div><div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 22, color: 'var(--navy)' }}>{s.amt}</div></div>
                    <div><div style={{ fontSize: 11, color: 'var(--slate)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Term</div><div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 22, color: 'var(--navy)' }}>{s.term}</div></div>
                  </div>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'flex-end' }}>
                  <a href="#/apply" className="btn btn-primary"
                     onClick={(e) => { e.preventDefault(); window.location.hash = '/apply'; }}>
                    Apply for {s.title.split(' ')[0]} <ArrowRight />
                  </a>
                  <a href="#/process" className="btn btn-outline"
                     onClick={(e) => { e.preventDefault(); window.location.hash = '/process'; }}>How it works</a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <CtaStrip />
    </div>
  );
}

// ============================================================
// PROCESS PAGE
// ============================================================
function ProcessPage() {
  useReveal();
  const detail = [
    { n: '01', t: 'Apply in 4 minutes', d: 'Tell us about your business — name, time in operation, monthly revenue, and how much capital you need. No tax returns, no business plans, no collateral docs at this stage.', side: ['Soft credit pull only', 'Mobile-friendly form', 'Save & resume any time'] },
    { n: '02', t: 'We send it to underwriting', d: 'Your file goes directly to our in-house underwriting team. We are the funder — not a broker — so decisions are made under our own roof, on our own capital.', side: ['In-house underwriting', 'No file shopping', 'Direct decisions'] },
    { n: '03', t: 'Review offers', d: 'You will receive side-by-side offers showing amount, term, payment, and total cost — written in plain English. Your advisor explains every line and helps you negotiate.', side: ['Itemized fee disclosure', 'Apples-to-apples math', 'Negotiate on your behalf'] },
    { 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 they accept an offer.', side: ['Electronic signing', 'ACH or wire delivery', 'Same-day funding'] },
  ];
  return (
    <div className="page-fade">
      <PageBanner
        crumb="How It Works"
        title={<>From application to <em>funded</em> in 48 hours.</>}
        lead="No loan committees. No vague status updates. Just a clear, four-step process built for the way small business owners actually work."
      />
      <section>
        <div className="container">
          <div style={{ display: 'grid', gap: 60 }}>
            {detail.map((s, i) => (
              <div key={s.n} className="reveal" style={{
                display: 'grid',
                gridTemplateColumns: '160px 1fr 1fr',
                gap: 60,
                paddingBottom: 60,
                borderBottom: i < detail.length - 1 ? '1px solid var(--line-strong)' : 'none',
              }}>
                <div className="step-num" style={{ fontSize: 96, color: 'var(--gold)', fontFamily: 'Cormorant Garamond, serif', lineHeight: 1 }}>{s.n}</div>
                <div>
                  <h3 style={{ marginBottom: 16 }}>{s.t}</h3>
                  <p style={{ fontSize: 17, color: 'var(--slate)' }}>{s.d}</p>
                </div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                  {s.side.map(x => (
                    <li key={x} style={{
                      padding: '14px 0', borderBottom: '1px solid var(--line)',
                      display: 'flex', gap: 12, alignItems: 'center',
                    }}>
                      <span style={{ color: 'var(--gold-deep)', fontWeight: 700 }}>✓</span>
                      <span style={{ color: 'var(--navy)', fontSize: 15 }}>{x}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>
      <CtaStrip />
    </div>
  );
}

// ============================================================
// INDUSTRIES PAGE
// ============================================================
function IndustriesPage() {
  useReveal();
  const [filter, setFilter] = useStateS('all');
  const all = [
    { name: 'Construction', cat: 'trades', meta: '2,400+ funded', desc: 'Bond financing, equipment, payroll bridge for federal & state contracts.' },
    { name: 'Restaurants & Hospitality', cat: 'service', meta: '1,950+ funded', desc: 'Build-outs, equipment, seasonal cash-flow gaps, multi-unit expansion.' },
    { name: 'Retail & E-commerce', cat: 'service', meta: '1,720+ funded', desc: 'Inventory, ad spend, holiday surges, marketplace receivables.' },
    { name: 'Trucking & Logistics', cat: 'trades', meta: '1,560+ funded', desc: 'Tractors, trailers, fuel cards, factoring against open loads.' },
    { name: 'Healthcare', cat: 'pro', meta: '1,210+ funded', desc: 'Practice acquisitions, equipment, insurance receivables financing.' },
    { name: 'Manufacturing', cat: 'trades', meta: '980+ funded', desc: 'Plant upgrades, raw materials, large purchase order funding.' },
    { name: 'Auto Repair & Body', cat: 'trades', meta: '870+ funded', desc: 'Lifts, alignment racks, paint booths, multi-bay expansions.' },
    { name: 'Professional Services', cat: 'pro', meta: '1,400+ funded', desc: 'Law, accounting, agencies — bridge invoicing and growth hires.' },
    { name: 'Beauty & Wellness', cat: 'service', meta: '720+ funded', desc: 'Salons, med-spas, gyms — equipment and new-location capital.' },
    { name: 'Childcare & Education', cat: 'service', meta: '410+ funded', desc: 'Facility upgrades, payroll smoothing, curriculum technology.' },
    { name: 'Real Estate Services', cat: 'pro', meta: '650+ funded', desc: 'Brokerages, property management, short-term ops capital.' },
    { name: 'Specialty & Other', cat: 'pro', meta: '1,100+ funded', desc: "Don't see your industry? We have probably funded it. Let's talk." },
  ];
  const filtered = filter === 'all' ? all : all.filter(x => x.cat === filter);
  const filters = [
    { id: 'all', label: 'All Industries' },
    { id: 'trades', label: 'Trades & Industrial' },
    { id: 'service', label: 'Consumer & Service' },
    { id: 'pro', label: 'Professional & Specialty' },
  ];

  return (
    <div className="page-fade">
      <PageBanner
        crumb="Industries"
        title={<>We've funded every kind of <em>main street</em>.</>}
        lead="Our team has industry specialists who understand your cash-flow rhythms — and lenders who appreciate them, too."
      />
      <section>
        <div className="container">
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 48, paddingBottom: 24, borderBottom: '1px solid var(--line-strong)' }}>
            {filters.map(f => (
              <button
                key={f.id}
                onClick={() => setFilter(f.id)}
                className={`btn ${filter === f.id ? 'btn-secondary' : 'btn-outline'}`}
                style={{ padding: '10px 20px' }}
              >{f.label}</button>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 1, background: 'var(--line)', border: '1px solid var(--line)' }}>
            {filtered.map((ind, i) => (
              <div key={ind.name} className="reveal" style={{
                background: 'var(--white)',
                padding: 36,
                display: 'flex', flexDirection: 'column', gap: 14,
                minHeight: 220,
                transitionDelay: `${i * 40}ms`,
              }}>
                <div style={{
                  width: 40, height: 40, border: '1px solid var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'Cormorant Garamond, serif', color: 'var(--gold-deep)', fontSize: 18, fontWeight: 600,
                }}>{ind.name[0]}</div>
                <h3 style={{ fontSize: 24 }}>{ind.name}</h3>
                <p style={{ color: 'var(--slate)', fontSize: 14.5, margin: 0 }}>{ind.desc}</p>
                <div style={{ marginTop: 'auto', paddingTop: 16, fontSize: 11.5, color: 'var(--gold-deep)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600 }}>
                  {ind.meta}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <CtaStrip />
    </div>
  );
}

// ============================================================
// ABOUT PAGE
// ============================================================
function AboutPage() {
  useReveal();
  return (
    <div className="page-fade">
      <PageBanner
        crumb="About Us"
        title={<>Built by operators, for <em>operators</em>.</>}
        lead="KB Funding Group was founded in 2014 by two small business owners who got tired of being told 'no' by their banks. Today we are the funding partner we wish we had then."
      />

      <section>
        <div className="container">
          <div className="about-grid">
            <div className="reveal">
              <span className="eyebrow">Our Story</span>
              <h2 style={{ marginTop: 18, marginBottom: 24 }}>A handshake business in a <em>spreadsheet world.</em></h2>
              <p style={{ fontSize: 16.5, color: 'var(--slate)' }}>
                After a decade in commercial banking, our founders watched too many good
                businesses get rejected by inflexible underwriting. They started KB Funding
                Group with a simple thesis: every business has a story that doesn't fit
                neatly inside a credit box, and the best lenders are the ones who actually
                read past page one.
              </p>
              <p style={{ fontSize: 16.5, color: 'var(--slate)' }}>
                Today our team of advisors works directly with owners across all 50 states,
                deploying over $1.2 billion in capital to date. We are an independent broker —
                which means we work for you, not for a single bank's product shelf.
              </p>
              <a href="#/apply" className="btn btn-primary" style={{ marginTop: 16 }}
                 onClick={(e) => { e.preventDefault(); window.location.hash = '/apply'; }}>
                Get pre-qualified <ArrowRight />
              </a>
            </div>
            <div className="reveal" style={{ minHeight: 460, borderRadius: 4, overflow: 'hidden', border: '1px solid var(--line)' }}>
              <img src="assets/founder-portrait.png" alt="KB Funding Group founder"
                   style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            </div>
          </div>
        </div>
      </section>

      <section className="section-cream">
        <div className="container">
          <div className="section-head center">
            <span className="eyebrow reveal">Our Values</span>
            <h2 className="reveal" style={{ marginTop: 18 }}>Three principles, no <em>asterisks.</em></h2>
          </div>
          <div className="values reveal">
            <div className="value">
              <span className="value-num">I.</span>
              <h3>Transparent terms</h3>
              <p>Every fee, factor, and clause explained in plain English before you sign. No surprise origination charges, no hidden penalties.</p>
            </div>
            <div className="value">
              <span className="value-num">II.</span>
              <h3>An advisor in your corner</h3>
              <p>You'll have one named point of contact from application to wire — and for every renewal after that. Not a call center. Not a chatbot.</p>
            </div>
            <div className="value">
              <span className="value-num">III.</span>
              <h3>Long-term relationships</h3>
              <p>72% of our clients return for a second round of funding. We grow when you grow, and we make decisions accordingly.</p>
            </div>
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="section-head center">
            <span className="eyebrow reveal">Leadership</span>
            <h2 className="reveal" style={{ marginTop: 18 }}>The people you'll <em>actually talk to</em>.</h2>
          </div>
          <div className="team">
            {[
              { i: 'SB', n: 'Schneur Berkowitz', r: 'CEO & Founder', b: 'Founded KB Funding Group to build the funding partner small business owners actually deserve.' },
              { i: 'JH', n: 'Joey Harris', r: 'Underwriter & Senior Funding Advisor', b: 'Reviews files in-house and walks every client through their offers, line by line.' },
              { i: 'MD', n: 'Mike Davis', r: 'ISO Relations', b: 'Your direct line into KB — manages broker partnerships from first submission to funded.' },
            ].map((m, i) => (
              <div key={m.i} className="member reveal" style={{ transitionDelay: `${i * 80}ms` }}>
                <div className="member-photo">{m.i}</div>
                <h4>{m.n}</h4>
                <div className="role">{m.r}</div>
                <p className="bio">{m.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CtaStrip />
    </div>
  );
}

// ============================================================
// FAQ PAGE
// ============================================================
function FaqPage() {
  useReveal();
  const [open, setOpen] = useStateS(0);
  const items = [
    { q: 'How much can my business qualify for?', a: 'Most KB clients are approved for between 80% and 150% of their average monthly revenue. So a business doing $80K/month in deposits can typically qualify for $65K–$120K in working capital. Larger amounts (up to $5M) are available for established businesses through term loans, SBA, or equipment financing.' },
    { q: 'How fast can I actually be funded?', a: 'Working capital products are usually funded within 24–48 hours of a signed agreement. Equipment financing takes 2–5 business days. SBA loans, because they involve government underwriting, take 30–60 days. Your advisor gives you a realistic timeline before you apply.' },
    { q: 'Will applying hurt my credit?', a: 'No. Pre-qualification is a soft inquiry that does not affect your credit score. We only run a hard pull after you have reviewed and accepted a specific offer — and you have full disclosure before that happens.' },
    { q: 'What documents do I need to apply?', a: 'For most working capital products: three months of business bank statements and a one-page application. For larger or longer-term products: add tax returns and basic financials. We never ask for full business plans or projections.' },
    { q: 'What credit score do I need?', a: 'Many of our products approve down to a 550 personal credit score, with a clean recent business banking history weighing more than the FICO. Term loans and SBA products require 650+ and 680+ respectively.' },
    { q: 'Are there prepayment penalties?', a: 'On most working capital products, no — and several offer early-payoff discounts. Some longer-term products do carry prepayment fees; your advisor will flag any product that does so before you sign.' },
    { q: 'Do you work with newer businesses?', a: 'We can fund businesses with as little as 4 months of operating history, though terms improve dramatically at the 12 and 24-month marks. If you have under 4 months, we will be honest about it and tell you to come back when you cross that threshold.' },
    { q: 'How does KB get paid?', a: 'We are paid a commission by the lender when a deal funds — never by you. That commission is disclosed up front in your offer paperwork. We are an independent broker, so we have no incentive to push one product over another.' },
  ];
  return (
    <div className="page-fade">
      <PageBanner
        crumb="FAQ"
        title={<>Straight answers to the questions <em>owners ask.</em></>}
        lead="Eight things we get asked every day. Don't see your question? Call (347) 881-4260 or apply and your advisor will walk you through it."
      />
      <section>
        <div className="container-narrow">
          <div className="faq">
            {items.map((it, i) => (
              <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{it.q}</span>
                  <span className="faq-toggle">+</span>
                </button>
                <div className="faq-a"><p>{it.a}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <CtaStrip />
    </div>
  );
}

// ============================================================
// PAGE BANNER (shared)
// ============================================================
function PageBanner({ crumb, title, lead }) {
  return (
    <section className="page-banner" style={{ padding: 0 }}>
      <div className="container">
        <div className="page-banner-inner" style={{ padding: '80px 0 90px' }}>
          <div className="crumbs">
            <a href="#/" onClick={(e) => { e.preventDefault(); window.location.hash = '/'; }}>Home</a>
            <span>/</span>
            {crumb}
          </div>
          <h1>{title}</h1>
          <p className="lead">{lead}</p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  SolutionsPage, ProcessPage, IndustriesPage, AboutPage, FaqPage, PageBanner,
});
