// FastFund website — Resources / blog index
const CF_POSTS = [
  { id: 'compare-offers', cat: 'Funding 101', title: 'How to compare business funding offers without getting burned', excerpt: 'APR, factor rates, fees, and term length rarely line up apples-to-apples. Here is the framework our managers use to find the true lowest cost of capital.', read: '6 min', author: 'FastFund Team', date: 'Jun 2, 2026', img: '1573164713988-8665fc963095', featured: true },
  { id: 'loc-vs-term', cat: 'Funding 101', title: 'When a line of credit beats a term loan', excerpt: 'For uneven cash flow, a revolving line can cost far less than a lump-sum loan. Here is how to tell which one fits.', read: '4 min', author: 'FastFund Team', date: 'May 28, 2026', img: '1604719312566-8912e9227c6a' },
  { id: 'restaurant-buildout', cat: 'Industry', title: 'Financing a restaurant build-out: a playbook', excerpt: 'From equipment leases to working capital, how food-service owners stack the right products to open on time and on budget.', read: '7 min', author: 'FastFund Team', date: 'May 21, 2026', img: '1414235077428-338989a2e8c0' },
  { id: 'equipment-101', cat: 'Funding 101', title: 'Equipment financing 101 for contractors', excerpt: 'Why the equipment itself is your best collateral — and how to keep 100% of your cash for the jobs that earn.', read: '5 min', author: 'FastFund Team', date: 'May 14, 2026', img: '1504917595217-d4dc5ebe6122' },
  { id: 'ready-to-scale', cat: 'Growth', title: '5 signs your small business is ready to scale', excerpt: 'Demand outpacing capacity? Consistent margins? Here are the signals that it is time to fund your next chapter.', read: '4 min', author: 'FastFund Team', date: 'May 7, 2026', img: '1466692476868-aef1dfb1e735' },
  { id: 'rbf-vs-advance', cat: 'Funding 101', title: 'Revenue-based financing vs. a merchant advance', excerpt: 'They look similar on the surface. The differences in cost and structure can be worth tens of thousands.', read: '6 min', author: 'FastFund Team', date: 'Apr 30, 2026', img: '1581092918056-0c4c3acd3789' },
  { id: 'barbershop-story', cat: 'Owner stories', title: 'How one 3-chair barbershop became three locations', excerpt: 'A dual-product plan — equipment financing plus a line of credit — turned a neighborhood shop into a small chain.', read: '5 min', author: 'FastFund Team', date: 'Apr 23, 2026', img: '1503951914875-452162b0f3f1' },
];
const CF_IMG = (id, w) => `https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=${w || 800}&q=70`;

function Resources() {
  const { Button, Badge } = window.CapFrontDesignSystem_019e08;
  const { mobile, tablet } = window.useBreakpoint();
  const cats = ['All', 'Funding 101', 'Growth', 'Industry', 'Owner stories'];
  const [cat, setCat] = React.useState('All');
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); }, [cat]);

  const featured = CF_POSTS.find((p) => p.featured);
  const rest = CF_POSTS.filter((p) => !p.featured && (cat === 'All' || p.cat === cat));

  return (
    <div>
      {/* Heading */}
      <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '56px var(--gutter) 8px' }}>
        <div className="cf-overline">Resources</div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: mobile ? 34 : 42, letterSpacing: '-0.03em', color: 'var(--text-strong)', margin: '8px 0 10px' }}>
          The FastFund capital playbook
        </h1>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: 'var(--text-muted)', maxWidth: 640, margin: 0 }}>
          Plain-spoken guides, comparisons, and owner stories to help you fund your business the smart way.
        </p>
      </section>

      {/* Featured */}
      <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '32px var(--gutter)' }}>
        <a href={'resources-article.html'} style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.15fr 1fr', gap: mobile ? 0 : 'var(--space-10)', alignItems: 'center', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-2xl)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)', textDecoration: 'none' }}>
          <div style={{ position: 'relative', aspectRatio: '16 / 11', overflow: 'hidden' }}>
            <img src={CF_IMG(featured.img, 1100)} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.94) contrast(1.02)' }} />
            <span style={{ position: 'absolute', left: 0, bottom: 0, height: 4, width: '100%', background: 'var(--gradient-spark)' }} />
          </div>
          <div style={{ padding: mobile ? 'var(--space-6)' : 'var(--space-8) var(--space-8) var(--space-8) 0' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 'var(--space-4)' }}>
              <Badge tone="brand">{featured.cat}</Badge>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-subtle)' }}>Featured · {featured.read} read</span>
            </div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: mobile ? 24 : 30, lineHeight: 1.15, letterSpacing: '-0.02em', color: 'var(--text-strong)', margin: '0 0 12px' }}>{featured.title}</h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.6, color: 'var(--text-body)', margin: '0 0 var(--space-6)' }}>{featured.excerpt}</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 34, height: 34, borderRadius: '50%', background: 'var(--gradient-brand)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12 }}>{featured.author.split(' ').map((s) => s[0]).join('')}</span>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)' }}>{featured.author} · {featured.date}</span>
            </div>
          </div>
        </a>
      </section>

      {/* Filters */}
      <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '8px var(--gutter)' }}>
        <div style={{ display: 'flex', gap: 'var(--space-2)', flexWrap: 'wrap' }}>
          {cats.map((c) => {
            const on = cat === c;
            return (
              <button key={c} onClick={() => setCat(c)} style={{
                border: on ? '1px solid var(--violet-500)' : '1px solid var(--border-default)',
                background: on ? 'var(--violet-600)' : 'var(--surface-card)',
                color: on ? '#fff' : 'var(--text-body)', cursor: 'pointer',
                fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13.5,
                padding: '9px 18px', borderRadius: 'var(--radius-pill)',
              }}>{c}</button>
            );
          })}
        </div>
      </section>

      {/* Grid */}
      <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '24px var(--gutter) 16px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : (tablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)'), gap: 'var(--space-6)' }}>
          {rest.map((p) => <ArticleCard key={p.id} post={p} />)}
        </div>
      </section>

      {/* Newsletter capture */}
      <section style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '40px var(--gutter) 96px' }}>
        <Newsletter />
      </section>
    </div>
  );
}

function ArticleCard({ post }) {
  const { Badge } = window.CapFrontDesignSystem_019e08;
  const [hover, setHover] = React.useState(false);
  return (
    <a href={post.cat === 'Owner stories' ? 'story.html' : 'resources-article.html'} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: 'flex', flexDirection: 'column', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', textDecoration: 'none', transform: hover ? 'translateY(-4px)' : 'none', boxShadow: hover ? 'var(--shadow-lg)' : 'var(--shadow-xs)', transition: 'transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out)' }}>
      <div style={{ position: 'relative', aspectRatio: '16 / 10', overflow: 'hidden' }}>
        <img src={CF_IMG(post.img, 700)} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.94) contrast(1.02)', transform: hover ? 'scale(1.04)' : 'none', transition: 'transform var(--duration-slow) var(--ease-out)' }} />
        <span style={{ position: 'absolute', top: 12, left: 12 }}><Badge tone="brand">{post.cat}</Badge></span>
      </div>
      <div style={{ padding: 'var(--space-5)', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, lineHeight: 1.22, letterSpacing: '-0.01em', color: 'var(--text-strong)', margin: '0 0 8px' }}>{post.title}</h3>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55, color: 'var(--text-muted)', margin: '0 0 var(--space-5)' }}>{post.excerpt}</p>
        <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-subtle)' }}>
          <span>{post.author}</span>
          <span>{post.read} read</span>
        </div>
      </div>
    </a>
  );
}

function Newsletter() {
  const { Button } = window.CapFrontDesignSystem_019e08;
  const { mobile } = window.useBreakpoint();
  const [sent, setSent] = React.useState(false);
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  return (
    <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--radius-2xl)', background: 'var(--gradient-brand)', padding: mobile ? '40px var(--space-6)' : '52px var(--space-12)' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 85% 15%, rgba(255,255,255,0.18), transparent 55%)', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: mobile ? 'var(--space-6)' : 'var(--space-12)', alignItems: 'center' }}>
        <div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: mobile ? 26 : 32, letterSpacing: '-0.02em', color: '#fff', margin: '0 0 8px' }}>Capital tips, every other week</h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'rgba(255,255,255,0.9)', margin: 0 }}>Join 12,000+ owners getting FastFund's plain-spoken funding guides. No spam, unsubscribe anytime.</p>
        </div>
        {!sent ? (
          <div style={{ display: 'flex', gap: 'var(--space-3)' }}>
            <input type="email" placeholder="you@business.com" aria-label="Email address"
              style={{ flex: 1, height: 'var(--control-lg)', border: 'none', borderRadius: 'var(--radius-md)', padding: '0 18px', fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-strong)', outline: 'none' }} />
            <Button variant="accent" size="lg" onClick={() => setSent(true)}>Subscribe</Button>
          </div>
        ) : (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: '#fff', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16 }}>
            <span style={{ width: 40, height: 40, borderRadius: '50%', background: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <i data-lucide="check" style={{ width: 22, height: 22, color: '#fff' }}></i>
            </span>
            You're subscribed — watch your inbox.
          </div>
        )}
      </div>
    </div>
  );
}
window.Resources = Resources;