// StoriesPage.jsx — Full client stories page (editorial, minimalist)
// Card grid that matches the home Client Love section, plus the
// "real-time wins" inbox screenshots moved in from the home page.

const StoriesPage = ({ onNavigate }) => {
  // mediaType: 'photo' | 'video'
  const all = [
  {
    slug: 'charlotte',
    name: 'Charlotte Beaulat-Clément',
    company: 'Pallus Solutions',
    role: 'Marketing for health + wellness companies',
    photo: 'assets/people/charlotte.jpeg',
    result: 'Made 10× her investment',
    quote: "I was super skeptical about coaching before meeting Diara and Jan. I thought I could do everything myself. I've signed more than 10 contracts and it keeps growing.\n\nThey provided templates and tools to help me setup and organize my workload. They've been incredibly consistent with the support, guidance, and tips, both from a mindset and business perspective. I'm really grateful for this program.\n\nWorking with you was the best decision I made this year.",
    mediaType: 'photo'
  },
  {
    slug: 'ryan',
    name: 'Ryan Littrell',
    company: 'Onward Labs',
    role: 'Design Consultant for impact startups',
    photo: 'assets/people/ryan.jpeg',
    result: '“It felt like a master’s in how to do this part of the business.”',
    quote: "It was really nice to have partners to work with so I wasn't isolated in trying to solve some of these problems and accountability to make progress in areas I don't prefer to spend time.",
    mediaType: 'photo'
  },
  {
    slug: 'patrick',
    name: 'Patrick Fanning',
    company: 'Legacy Design & Development',
    role: 'Medical device engineering',
    photo: 'assets/people/patrick.jpeg',
    result: '$18K client + 6-figure in negotiation',
    quote: "You made it easy to work with me on my terms while still holding the boundary of \"we've got work to do.\" I feel more confident, I feel more comfortable with who I am, what my business stands for and where our direction is going.",
    mediaType: 'video',
    videoUrl: 'https://youtu.be/E3TMW0DPSbg'
  },
  {
    slug: 'nina',
    name: 'Nina Garcia',
    company: 'Empowered Human',
    role: 'Therapist + Emotional Fitness Coach',
    photo: 'assets/people/nina.jpeg',
    result: 'Selling $45K offer whenever she wants',
    quote: "I expected to get a client from the process, which I ended up doing. But if I really were honest with myself, what I think was most valuable was that I so clarified my offer that even if I hadn't got a client, I was confident I would.",
    mediaType: 'video',
    videoUrl: 'https://youtu.be/GBXx3AZcgGg'
  },
  {
    slug: 'c',
    name: 'C.',
    company: null,
    role: 'Fundraising + Strategic Partnerships',
    result: 'Onboarding new clients whenever he wants',
    quote: "I was hesitant to sign up at first, however, Diara and Jan welcomed my discomfort, and in addition to offering practical tools and principles, they created a safe space to navigate the fear at its source. They helped me build a strong consulting program and provided sales frameworks that allow me to sign up clients whenever I want!",
    mediaType: 'none'
  },
  {
    slug: 'theresa',
    name: 'Theresa Mathe',
    company: 'Independent',
    role: 'Operations + systems optimization',
    photo: 'assets/people/Theresa.jpeg',
    result: 'Closed 4 new clients while traveling the world',
    quote: null,
    mediaType: 'video',
    videoUrl: 'https://youtu.be/wROZsF2xltY'
  },
  {
    slug: 'komal',
    name: 'Komal Kaur',
    company: 'Independent',
    role: '1:1 coaching',
    photo: 'assets/people/komal.jpg',
    result: '2 clients in under 3 months',
    quote: "Working with Diara and Jan was exactly what I needed to keep me accountable, get into the right headspace and get it done! Things were well structured, meticulously organised, and easy to follow and implement. I closed two new clients and made my initial investment back before the program was even over! I'd highly recommend Diara + Jan.",
    mediaType: 'photo'
  },
  {
    slug: 'heni',
    name: 'Hen/i',
    company: null,
    role: 'Embodiment + Neural Manifestation Guide',
    result: 'From loose idea to closing new clients in under 3 months',
    quote: "Diara + Jan had a clear, concise, and simple framework that allowed me to birth this baby from a fantasy to a tangible existing program.",
    mediaType: 'none'
  },
  {
    slug: 'lindsey',
    name: 'Lindsey Vontz',
    company: 'Uncommon Growth',
    role: 'Growth Partner for Third Spaces',
    photo: 'assets/people/lindsey.jpeg',
    result: 'Signed 5-figure client, 2 more on the way',
    quote: "My business has become much more visible. People are coming out of the woodwork and I'm getting more organic leads. This has been life-changing.",
    mediaType: 'video',
    videoUrl: 'https://youtu.be/08-Wtj-k9oQ'
  },
  {
    slug: 'valentyna',
    name: 'Valentyna Kozlova',
    company: null,
    role: 'Outbound Lead Generation',
    photo: 'assets/people/valentyna.jpeg',
    result: 'Booked calls with prospective clients in less than 1 week',
    quote: null,
    mediaType: 'video',
    videoUrl: 'https://www.youtube.com/watch?v=Qx7O_lsjE8A'
  },
  {
    slug: 'nicole',
    name: 'Nicole Dewey',
    company: null,
    role: 'Brand + marketing',
    photo: 'assets/people/nicole.jpg',
    result: 'From battling scope creep to scaling through productization',
    quote: null,
    mediaType: 'video',
    videoUrl: 'https://youtu.be/T47MahGwml4'
  },
  {
    slug: 'alex',
    name: 'Alex Karim Howard',
    company: 'Regenerative Products',
    role: 'Responsible AI, AI consultant for the European Union',
    photo: 'assets/people/alex.jpeg',
    result: '$24K in 2 months',
    quote: "I was convinced that you guys would be the right people for me because you have structure, you're grounded, you've done it with other people, you're part of this new regenerative mindset, you're thorough, and you have a high excellency standard.\n\nTo anyone considering, there's no better way than working with you guys. You really were co-founders and walked the walk with me!",
    mediaType: 'photo'
  },
  {
    slug: 'jeff',
    name: 'Jeff Jewell',
    company: null,
    role: 'Executive coaching for financial leaders',
    photo: 'assets/people/jeff.jpeg',
    result: 'Signed 3 new clients, now has a waitlist',
    quote: "It feels like I can accomplish my dreams at this point.",
    mediaType: 'video',
    videoUrl: 'https://youtu.be/OrAKq-lFR54'
  }];


  const getYouTubeId = (url) => {
    if (!url) return null;
    const m = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([\w-]{11})/);
    return m ? m[1] : null;
  };

  const VideoSlot = ({ card }) => {
    const id = getYouTubeId(card.videoUrl);
    const [playing, setPlaying] = React.useState(false);

    if (id && playing) {
      return (
        <div style={{ width: '100%', aspectRatio: '16/9', borderRadius: 4, overflow: 'hidden', background: '#1a1a1a' }}>
          <iframe
            src={`https://www.youtube.com/embed/${id}?autoplay=1&rel=0`}
            title={card.name}
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowFullScreen
            referrerPolicy="strict-origin-when-cross-origin"
            style={{ width: '100%', height: '100%', border: 0, display: 'block' }} />
        </div>);
    }

    if (id && card.photo) {
      return (
        <button
          type="button"
          onClick={() => setPlaying(true)}
          aria-label={`Play video from ${card.name}`}
          style={{
            width: '100%', aspectRatio: '16/9', borderRadius: 4,
            background: '#1a1a1a',
            position: 'relative', overflow: 'hidden',
            border: 0, padding: 0, cursor: 'pointer', display: 'block'
          }}>
          <img src={card.photo} alt={card.name} style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover',
            display: 'block'
          }} />
          <span style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, rgba(0,0,0,0.0) 45%, rgba(0,0,0,0.35) 100%)'
          }} />
          <span style={{
            position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
            width: 72, height: 72, borderRadius: '50%',
            background: 'rgba(26,26,26,0.78)',
            border: '1.5px solid rgba(250,247,247,0.92)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            backdropFilter: 'blur(2px)'
          }}>
            <span style={{
              width: 0, height: 0,
              borderLeft: '18px solid #fafaf7',
              borderTop: '11px solid transparent',
              borderBottom: '11px solid transparent',
              marginLeft: 6
            }} />
          </span>
        </button>);
    }

    if (id) {
      return (
        <div style={{ width: '100%', aspectRatio: '16/9', borderRadius: 4, overflow: 'hidden', background: '#1a1a1a' }}>
          <iframe
            src={`https://www.youtube.com/embed/${id}?rel=0`}
            title={card.name}
            loading="lazy"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowFullScreen
            referrerPolicy="strict-origin-when-cross-origin"
            style={{ width: '100%', height: '100%', border: 0, display: 'block' }} />
        </div>);
    }

    return (
      <div style={{
        width: '100%', aspectRatio: '16/9', borderRadius: 4,
        background: '#1a1a1a',
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        gap: 12, position: 'relative', overflow: 'hidden'
      }}>
        <div style={{
          width: 56, height: 56, borderRadius: '50%',
          border: '1.5px solid rgba(250,247,247,0.65)',
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}>
          <div style={{
            width: 0, height: 0,
            borderLeft: '13px solid #fafaf7',
            borderTop: '9px solid transparent',
            borderBottom: '9px solid transparent',
            marginLeft: 4
          }} />
        </div>
        <div className="eyebrow" style={{
          color: 'rgba(250,247,247,0.65)',
          background: 'transparent'
        }}>Video — {card.name.split(' ')[0]}</div>
      </div>);

  };

  const PhotoSlot = ({ card }) => {
    if (card.photo) {
      return (
        <div style={{ width: '100%', aspectRatio: '4/3', borderRadius: 4, overflow: 'hidden', background: '#f0eee8' }}>
          <img src={card.photo} alt={card.name} style={{
            width: '100%', height: '100%', objectFit: 'cover', display: 'block'
          }} />
        </div>);
    }
    return (
      <image-slot
        id={`story-${card.slug}`}
        shape="rounded"
        radius="4"
        placeholder={`Drop ${card.name.split(' ')[0]}'s photo here`}
        style={{ display: 'block', width: '100%', aspectRatio: '4/3', background: '#f0eee8' }} />);
  };



  const inboxSlots = [
  { id: 'text-msg-1', placeholder: 'Drop screenshot #1' },
  { id: 'text-msg-2', placeholder: 'Drop screenshot #2' },
  { id: 'text-msg-3', placeholder: 'Drop screenshot #3' }];


  return (
    <section style={{
      background: '#fafaf7',
      minHeight: '100vh',
      paddingTop: 120,
      paddingBottom: 120
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
        {/* Back nav */}
        <button onClick={() => onNavigate('home')} className="btn-secondary" style={{
          padding: '8px 0 !important',
          marginBottom: 40
        }}>
          ← Back to home
        </button>

        {/* Header */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 80, alignItems: 'end', marginBottom: 96
        }} className="two-col">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div className="eyebrow tag">CASE STUDIES</div>
            <h1 style={{
              fontSize: 'clamp(48px, 6.4vw, 96px)',
              margin: 0, maxWidth: 600
            }}>More client testimonials. <em></em></h1>
          </div>
        </div>

        {/* Story cards — 2 col, top/bottom rules to match Client love grid */}
        <div className="stories-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 0,
          borderTop: '1px solid rgba(26,26,26,0.10)'
        }}>
          {all.map((c, i) => {
            const col = i % 3;
            return (
              <article key={c.slug} style={{
                display: 'flex', flexDirection: 'column',
                padding: '36px 28px',
                gap: 20,
                borderBottom: '1px solid rgba(26,26,26,0.10)',
                borderLeft: col === 0 ? 'none' : '1px solid rgba(26,26,26,0.10)'
              }} className="story-card">
                {/* Media */}
                {c.mediaType === 'video' ? <VideoSlot card={c} /> : c.mediaType === 'photo' ? <PhotoSlot card={c} /> : null}

                {/* Result tag */}
                {c.result &&
                <div className="eyebrow tag" style={{ alignSelf: 'flex-start' }}>{c.result}</div>
                }

                {/* Quote */}
                {c.quote &&
                <blockquote style={{
                  fontFamily: "'Fraunces', serif",
                  fontStyle: 'italic', fontWeight: 300,
                  fontSize: 'clamp(17px, 1.25vw, 19px)',
                  color: '#1a1a1a',
                  lineHeight: 1.4, letterSpacing: '-0.01em',
                  margin: 0, whiteSpace: 'pre-line'
                }}>"{c.quote}"</blockquote>
                }

                {/* Attribution */}
                <div style={{
                  marginTop: 'auto',
                  paddingTop: 20, borderTop: '1px solid rgba(26,26,26,0.10)'
                }}>
                  <div style={{
                    fontFamily: "'Fraunces', serif",
                    fontSize: 18, color: '#1a1a1a',
                    letterSpacing: '-0.015em', lineHeight: 1.15,
                    fontWeight: 500
                  }}>{c.name}</div>
                  {c.role &&
                  <div className="eyebrow" style={{ marginTop: 6 }}>
                      {c.role}
                    </div>
                  }
                </div>
              </article>);

          })}
        </div>

        {/* Closing CTA — editorial */}
        <div style={{
          marginTop: 140,
          padding: '72px 0',
          borderTop: '1px solid rgba(26,26,26,0.18)',
          borderBottom: '1px solid rgba(26,26,26,0.18)',
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 80, alignItems: 'center'
        }} className="two-col">
          <h2 style={{
            fontSize: 'clamp(36px, 4.4vw, 64px)',
            margin: 0, maxWidth: 480
          }}>Interested in <em>learning more?</em></h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'flex-start' }}>
            <p style={{
              fontFamily: "'Geist', sans-serif",
              fontSize: 17, color: '#3a3a36', lineHeight: 1.7,
              fontWeight: 300, maxWidth: 460
            }}>Let's book an intro call and see if we're a mutual fit.</p>
            <a href="https://call.coliberate.ventures/intro-call-with-diara"
            target="_blank" rel="noopener noreferrer" className="btn-primary">
              Book an intro call
            </a>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 1100px) {
          .stories-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .stories-grid .story-card:nth-child(odd) { border-left: none !important; }
          .stories-grid .story-card:nth-child(even) { border-left: 1px solid rgba(26,26,26,0.10) !important; }
        }
        @media (max-width: 700px) {
          .stories-grid { grid-template-columns: 1fr !important; }
          .stories-grid .story-card { border-left: none !important; }
          .textmsg-grid { grid-template-columns: 1fr !important; max-width: 320px !important; }
        }
      `}</style>
    </section>);

};

Object.assign(window, { StoriesPage });