// FastFund website — hero (2026 rebrand)
function Hero({ onApply }) {
  const { Button, Stat } = window.CapFrontDesignSystem_019e08;
  const { mobile, narrow } = window.useBreakpoint();
  const [amount, setAmount] = React.useState('150,000');
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--surface-card)' }}>
      {/* signature violet→teal glow, top-right */}
      <div style={{
        position: 'absolute', top: -160, right: -140, width: 560, height: 560, borderRadius: '50%',
        background: 'var(--gradient-brand)', opacity: 0.12, filter: 'blur(12px)', pointerEvents: 'none',
      }} />
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto', padding: mobile ? '48px var(--gutter) 56px' : '84px var(--gutter) 76px',
        display: 'grid', gridTemplateColumns: narrow ? '1fr' : '1.12fr 0.88fr', gap: mobile ? 'var(--space-10)' : 'var(--space-16)', alignItems: 'center',
      }}>
        <div>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px',
            background: 'var(--surface-accent-soft)', borderRadius: 'var(--radius-pill)',
            fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 700, color: 'var(--teal-700)',
            letterSpacing: '0.01em', marginBottom: 'var(--space-6)',
          }}>
            <i data-lucide="shield-check" style={{ width: 15, height: 15 }}></i>
            Checking your offers won't affect your credit score
          </span>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: mobile ? 40 : 58, lineHeight: 1.03,
            letterSpacing: '-0.03em', color: 'var(--text-strong)', margin: '0 0 var(--space-5)',
          }}>
            Small business funding,<br /><span style={{ color: 'var(--violet-500)' }}>fast&#8209;forward.</span>
          </h1>
          <p style={{
            fontFamily: 'var(--font-body)', fontSize: 19, lineHeight: 1.55, color: 'var(--text-body)',
            maxWidth: 496, margin: '0 0 var(--space-7)',
          }}>
            One application unlocks competitive offers from our marketplace of lenders — plus deals we
            fund ourselves for better rates. Approvals in as little as <strong style={{ color: 'var(--text-strong)' }}>4 hours</strong>.
          </p>

          {/* Inline lead-capture qualifier */}
          <div style={{
            display: 'flex', alignItems: 'stretch', gap: 'var(--space-3)', maxWidth: 520, marginBottom: 'var(--space-5)', flexWrap: mobile ? 'wrap' : 'nowrap',
          }}>
            <div style={{
              flex: 1, display: 'flex', alignItems: 'center', height: 'var(--control-lg)',
              background: 'var(--surface-card)', border: '1.5px solid var(--border-default)',
              borderRadius: 'var(--radius-md)', overflow: 'hidden',
            }}>
              <span style={{ paddingLeft: 16, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)', fontSize: 17 }}>$</span>
              <input value={amount} onChange={(e) => setAmount(e.target.value)} aria-label="How much do you need?"
                style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', padding: '0 12px',
                  fontFamily: 'var(--font-body)', fontSize: 17, color: 'var(--text-strong)' }} />
            </div>
            <Button variant="accent" size="lg" onClick={onApply}
              iconRight={<i data-lucide="arrow-right" style={{ width: 18, height: 18 }}></i>}>
              See my offers
            </Button>
          </div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)' }}>
            Free to apply · No obligation · Funding from $5K to $5M+
          </div>

          <div style={{ display: 'flex', gap: mobile ? 'var(--space-8)' : 'var(--space-12)', marginTop: 'var(--space-10)', flexWrap: 'wrap' }}>
            <Stat value="$5" unit="M+" label="Max funding" />
            <Stat value="4" unit="hrs" label="Fastest approval" />
            <Stat value="1" unit="%" label="Rates from / mo" />
          </div>
        </div>
        {!narrow && <HeroPanel />}
        {narrow && <div style={{ maxWidth: 460 }}><HeroPanel /></div>}
      </div>
    </section>
  );
}

// Hero panel — real photography with a floating offers chip overlaid.
function HeroPanel() {
  const { Badge } = window.CapFrontDesignSystem_019e08;
  return (
    <div style={{ position: 'relative' }}>
      {/* Photo */}
      <div style={{ position: 'relative', borderRadius: 'var(--radius-2xl)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', aspectRatio: '4 / 5' }}>
        <img
          src={(window.__resources && window.__resources.heroImg) || "https://images.unsplash.com/photo-1556745757-8d76bdb6984b?auto=format&fit=crop&w=900&q=70"}
          alt="Small business owner at the counter of her shop"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', filter: 'saturate(0.94) contrast(1.02)' }}
        />
        {/* teal accent edge */}
        <span style={{ position: 'absolute', left: 0, bottom: 0, height: 4, width: '100%', background: 'var(--gradient-spark)' }} />
      </div>
      {/* Floating offers chip */}
      <div style={{
        position: 'absolute', left: -24, bottom: 28, width: 268,
        background: 'var(--surface-card)', borderRadius: 'var(--radius-xl)',
        boxShadow: 'var(--shadow-xl)', border: '1px solid var(--border-subtle)', padding: 'var(--space-5)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--space-4)' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: 'var(--text-strong)' }}>Funding options ready</div>
          <Badge tone="success" dot>2 hrs</Badge>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', padding: 'var(--space-3)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)' }}>
          <div style={{ width: 34, height: 34, borderRadius: 'var(--radius-sm)', background: 'var(--surface-brand-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--violet-600)', flexShrink: 0 }}>
            <i data-lucide="trending-up" style={{ width: 18, height: 18 }}></i>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 13, color: 'var(--text-strong)' }}>Term Loan</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--text-muted)' }}>24 mo · 8.9% APR</div>
          </div>
          <div className="cf-figure" style={{ fontWeight: 700, fontSize: 13.5, color: 'var(--text-strong)' }}>$250K</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 'var(--space-3)' }}>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)' }}>+ 2 more offers</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 12.5, color: 'var(--text-link)' }}>
            Compare <i data-lucide="arrow-right" style={{ width: 13, height: 13 }}></i>
          </span>
        </div>
      </div>
    </div>
  );
}
window.Hero = Hero;