const storiesV2Styles = {
  wrap: { padding: '120px 0', background: 'var(--ink)', color: 'var(--paper)' },
  head: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'flex-end', marginBottom: 56, paddingBottom: 24, borderBottom: '1px solid rgba(255,255,255,.2)', flexWrap: 'wrap' },
  chapterLabel: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--yellow)', marginBottom: 14 },
  chapter: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(60px, 8vw, 120px)', lineHeight: 0.92, color: 'var(--paper)', letterSpacing: '-0.045em' },
  accent: { color: 'var(--yellow)' },
  dek: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 'clamp(18px, 2vw, 22px)', lineHeight: 1.5, color: 'rgba(255,255,255,.72)' },

  grid: { display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24 },
  story: { position: 'relative', overflow: 'hidden', minHeight: 520, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: 28, color: 'var(--paper)' },
  storyImg: { position: 'absolute', inset: 0, zIndex: 0 },
  img: { width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(0.1) contrast(1.05)' },
  scrim: { position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.8) 100%)' },
  storyContent: { position: 'relative', zIndex: 1 },
  storyKicker: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--yellow)' },
  storyTitle: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 3.6vw, 48px)', lineHeight: 1.02, color: 'var(--paper)', letterSpacing: '-0.035em', marginBottom: 12 },
  storyDesc: { fontFamily: 'Inter, sans-serif', fontSize: 14.5, lineHeight: 1.55, color: 'rgba(255,255,255,.85)', maxWidth: 460 },
  storyLink: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 12, fontWeight: 600, color: 'var(--yellow)', textDecoration: 'none', letterSpacing: '0.06em', marginTop: 16, display: 'inline-block' },
  views: { display: 'inline-block', background: 'var(--yellow)', color: 'var(--ink)', padding: '6px 12px', fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', marginTop: 16 },

  moneyBand: { marginBottom: 56, padding: '48px 32px', borderRadius: 24, background: 'rgba(255,214,10,.08)', border: '1px solid rgba(255,214,10,.28)', textAlign: 'center' },
  moneyKicker: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--yellow)', marginBottom: 16 },
  moneyNum: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(40px, 9vw, 132px)', lineHeight: 0.92, color: 'var(--yellow)', letterSpacing: '-0.045em', whiteSpace: 'nowrap' },
  moneySub: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 'clamp(16px, 2vw, 21px)', lineHeight: 1.5, color: 'rgba(255,255,255,.82)', maxWidth: 560, margin: '20px auto 0' },

  pull: { marginTop: 64, paddingTop: 32, borderTop: '1px solid rgba(255,255,255,.18)', textAlign: 'center' },
  pullText: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 4vw, 56px)', lineHeight: 1.15, color: 'var(--paper)', letterSpacing: '-0.035em', maxWidth: 1000, margin: '0 auto' },
  pullAttrib: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 600, color: 'rgba(255,255,255,.6)', marginTop: 20 },
};

const STORIES_V2 = [
  { col: 7, label: 'Maka Twins · UK', href: 'https://www.instagram.com/themakatwins/', img: 'assets/john-james.jpg', title: 'John & James, home after seventeen years.', desc: 'They were living in a one-bedroom flat with five family members and hadn\'t seen their dad in 17 years. Their cleaning business dream earned them the plane tickets home, and a global moment.' },
  { col: 5, label: 'Caitlin · London → Bali', href: 'https://www.instagram.com/rox_queens/', img: 'assets/rox-queens.jpg', title: 'Rox Queens.', desc: 'From a chance meeting on London Bridge to a Nike partnership in 15 months. A fitness community across three countries.' },
  { col: 5, label: 'I Am Denim · London', href: 'https://www.iamdenim.co.uk/', img: 'assets/iamdenim.svg', title: 'Tummy-friendly jeans, fit for a Princess.', desc: 'Sophie came to us with a dream: jeans that hug, not dig. We helped turn I Am Denim, the world\'s first inclusive tummy-friendly jeans, into a brand now worn by the Princess of Wales.' },
  { col: 7, label: 'The FTD Brothers · UK & Ireland', href: 'https://www.instagram.com/theftdbrothers/', img: 'assets/ftd-brothers.jpg', title: 'A mission, made visible.', desc: 'Jordan and Cian went on TV and asked us for help. We helped turn their dementia-awareness mission into social-media stardom, so they could go full-time and pull off feats like a marathon a day across all 32 counties of Ireland, raising £1.8M+ to make dementia visible.' },
];

function StoriesV2() {
  return (
    <section id="stories" style={storiesV2Styles.wrap}>
      <div className="container">
        <div style={storiesV2Styles.head} className="stv2-head">
          <div>
            <div style={storiesV2Styles.chapterLabel}>● Stories from the community</div>
            <h2 style={storiesV2Styles.chapter}>Dreams<br/><span style={storiesV2Styles.accent}>realised.</span></h2>
          </div>
          <p style={storiesV2Styles.dek}>
            What it looks like when the system works. Real founders, real businesses, real moments.
          </p>
        </div>

        <div style={storiesV2Styles.moneyBand} className="stv2-money">
          <div style={storiesV2Styles.moneyKicker}>● Money given away</div>
          <div style={storiesV2Styles.moneyNum}>£528,473</div>
          <p style={storiesV2Styles.moneySub}>Given away to help people chase their dreams, and counting.</p>
        </div>

        <div style={storiesV2Styles.grid} className="stv2-grid">
          {STORIES_V2.map((s, i) => (
            <a key={i} href={s.href} target="_blank" rel="noopener noreferrer" style={{ ...storiesV2Styles.story, gridColumn: `span ${s.col}`, background: '#111', textDecoration: 'none', cursor: 'pointer' }} className="stv2-card">
              <div style={storiesV2Styles.storyImg}>
                <img src={s.img} alt={s.title} style={storiesV2Styles.img} />
                <div style={storiesV2Styles.scrim} />
              </div>
              <div style={storiesV2Styles.storyContent}>
                <h3 style={storiesV2Styles.storyTitle}>{s.title}</h3>
                <p style={storiesV2Styles.storyDesc}>{s.desc}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 16, alignItems: 'center' }}>
                  {s.stat ? <span style={{ ...storiesV2Styles.views, marginTop: 0 }}>{s.stat}</span> : null}
                  <span style={{ ...storiesV2Styles.views, marginTop: 0 }}>{s.label}</span>
                  <span style={{ ...storiesV2Styles.storyLink, marginTop: 0 }}>Visit →</span>
                </div>
              </div>
            </a>
          ))}
        </div>

        <div style={storiesV2Styles.pull}>
          <p style={storiesV2Styles.pullText}>
            "You don't need permission to start. You just need someone to believe, <span style={{ color: 'var(--yellow)' }}>once</span>, that you can."
          </p>
          <div style={storiesV2Styles.pullAttrib}>- The Dream thesis</div>
        </div>
      </div>

      <style>{`@media (max-width: 980px) {
        .stv2-head { grid-template-columns: 1fr !important; }
        .stv2-grid > * { grid-column: span 12 !important; }
      }
      @media (max-width: 520px) {
        .stv2-money { padding: 36px 20px !important; }
      }`}</style>
    </section>
  );
}