// FastFund website — About / Our Story
function About({ onApply }) {
  const { Button, Stat, Card } = window.CapFrontDesignSystem_019e08;
  const { mobile } = window.useBreakpoint();
  const values = [
    { icon: 'handshake', t: 'Relationship building', b: 'A dedicated manager who knows your business — not a call-center queue.' },
    { icon: 'graduation-cap', t: 'Client education', b: 'We explain every option so you can choose with confidence.' },
    { icon: 'trending-up', t: 'Product graduation', b: 'We move you toward lower-cost capital as your business grows.' },
    { icon: 'eye', t: 'Full transparency', b: 'Real terms, no bait-and-switch, no buried 3rd-party fees.' },
    { icon: 'sprout', t: 'Sustainable financing', b: 'Funding sized to help you grow — never to trap you.' },
  ];
  return (
    <div>
      {/* Hero */}
      <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--ink-900)' }}>
        <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&w=1600&q=70" alt="Small business team collaborating" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'var(--ink-900)', mixBlendMode: 'multiply', opacity: 0.4 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(125deg, var(--violet-700), var(--teal-500))', mixBlendMode: 'color', opacity: 0.55 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(11,10,18,0.88) 0%, rgba(11,10,18,0.6) 50%, rgba(11,10,18,0.25) 100%)' }} />
        <div style={{ position: 'absolute', top: -140, right: -100, width: 480, height: 480, borderRadius: '50%', background: 'var(--gradient-brand)', opacity: 0.22, filter: 'blur(20px)' }} />
        <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: mobile ? '64px var(--gutter) 56px' : '92px var(--gutter) 84px' }}>
          <div className="cf-overline" style={{ color: 'var(--teal-400)' }}>Our story</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: mobile ? 36 : 52, lineHeight: 1.04, letterSpacing: '-0.03em', color: '#fff', margin: '10px 0 var(--space-5)', maxWidth: 760 }}>
            We built FastFund to put entrepreneurs first
          </h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: mobile ? 17 : 19, lineHeight: 1.6, color: 'var(--neutral-300)', maxWidth: 620, margin: 0 }}>
            A small-business funding marketplace built on a simple idea: owners deserve honest options, clear terms, and a real partner — not a hard sell.
          </p>
        </div>
      </section>

      {/* Narrative */}
      <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: mobile ? '56px var(--gutter)' : '80px var(--gutter)', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: mobile ? 'var(--space-10)' : 'var(--space-16)', alignItems: 'start' }}>
        <div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: mobile ? 26 : 30, color: 'var(--text-strong)', margin: '0 0 var(--space-5)', letterSpacing: '-0.02em' }}>Why we exist</h2>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.7, color: 'var(--text-body)', display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            <p>Too many business owners get pushed into expensive funding they don't understand, by brokers who win only when the terms are stacked against them.</p>
            <p>We started FastFund to do it the opposite way: one application, competitive offers from a marketplace of lenders, and a dedicated manager whose job is to help you choose the most cost-effective option — not the one that pays the biggest commission.</p>
            <p>We treat every owner the way we'd want to be treated: with honesty, plain-language education, and a genuine stake in whether the funding actually helps the business grow.</p>
          </div>
        </div>
        <Card variant="brand" padding="var(--space-8)" style={{ borderRadius: 'var(--radius-2xl)' }}>
          <div className="cf-overline" style={{ color: 'var(--teal-300)', marginBottom: 'var(--space-6)' }}>By the numbers</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-8)' }}>
            <Stat value="$5" unit="M+" label="Max funding" inverse />
            <Stat value="10" unit="" label="Funding products" inverse />
            <Stat value="4" unit="hrs" label="Fastest approval" inverse />
            <Stat value="1" unit="app" label="Multiple offers" inverse />
          </div>
          <div style={{ marginTop: 'var(--space-8)', display: 'flex', gap: 16, flexWrap: 'wrap', fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600, color: 'var(--neutral-300)' }}>
            <span>Marketplace of vetted lenders</span><span>·</span><span>No credit impact to apply</span>
          </div>
        </Card>
      </section>

      {/* Values */}
      <section style={{ background: 'var(--surface-page)', borderTop: '1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: mobile ? '56px var(--gutter)' : '88px var(--gutter)' }}>
          <div className="cf-overline">What we stand for</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: mobile ? 28 : 36, color: 'var(--text-strong)', margin: '8px 0 var(--space-10)', letterSpacing: '-0.02em' }}>Five commitments, every deal</h2>
          <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
            {values.map((v) => (
              <Card key={v.t} padding="var(--space-6)">
                <div style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--surface-brand-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--violet-600)', marginBottom: 'var(--space-4)' }}>
                  <i data-lucide={v.icon} style={{ width: 22, height: 22 }}></i>
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--text-strong)', marginBottom: 6 }}>{v.t}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55, color: 'var(--text-body)' }}>{v.b}</div>
              </Card>
            ))}
            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start', padding: 'var(--space-6)', gap: 'var(--space-4)' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, color: 'var(--text-strong)', lineHeight: 1.2 }}>Ready to move forward?</div>
              <Button variant="accent" onClick={onApply} iconRight={<i data-lucide="arrow-right" style={{ width: 18, height: 18 }}></i>}>Apply now</Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.About = About;