// site-clay-q.jsx — Clay 1:1, Clay Club, LinkedIn tape (quirky skin)

const {
  QPAGE, QReveal, qUseMotionEl,
  QSectionLabel, QSquiggle, QUnderline, QSticker, QChip,
  QPolaroid, QGallery, QBigNum, QBrandLogo, QDivider,
} = window;

const cp = QPAGE.palette;
const cf = QPAGE.fonts;

// Brand avatar — Clearbit → Google favicon → letter
function QBrandAvatar({ t }) {
  const [stage, setStage] = React.useState(0);
  const box = {
    width: 40, height: 40, borderRadius: 8,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    overflow: 'hidden', flexShrink: 0,
    border: `1.5px solid ${cp.ink}`,
    background: cp.paper,
  };
  if (stage < 2 && t.domain) {
    const src = stage === 0
      ? `https://logo.clearbit.com/${t.domain}`
      : `https://www.google.com/s2/favicons?domain=${t.domain}&sz=128`;
    return (
      <div style={box}>
        <img
          key={stage}
          src={src}
          alt={`${t.brand} logo`}
          width={32} height={32}
          style={{ width: 32, height: 32, objectFit: 'contain' }}
          onError={() => setStage(s => s + 1)}
        />
      </div>
    );
  }
  return (
    <div style={{
      ...box,
      background: t.color, color: cp.paper,
      fontFamily: cf.display, fontSize: 20, fontWeight: 400, fontStyle: 'italic',
    }}>{t.mark}</div>
  );
}

// Single row in the Clay 1:1 team list
function QTeamRow({ t, i }) {
  const MotionA = qUseMotionEl('a');
  return (
    <MotionA
      href={t.url} target="_blank" rel="noopener"
      style={{
        display: 'grid', gridTemplateColumns: '44px 1fr auto', gap: 16,
        alignItems: 'center',
        padding: '14px 18px',
        background: cp.paper, border: `1.5px solid ${cp.ink}`, borderRadius: 4,
        textDecoration: 'none', color: 'inherit',
        boxShadow: `3px 3px 0 ${t.color}`,
      }}
      whileHover={{ x: -2, y: -2, boxShadow: `5px 5px 0 ${t.color}` }}
      whileTap={{ x: 0, y: 0, boxShadow: `1px 1px 0 ${t.color}` }}
      transition={{ type: 'spring', stiffness: 280, damping: 22 }}
    >
      <QBrandAvatar t={t} />
      <div style={{ minWidth: 0 }}>
        <div style={{ fontFamily: cf.body, fontSize: 16, color: cp.ink, fontWeight: 600, letterSpacing: '-0.01em' }}>
          {t.brand}
        </div>
        <div style={{ fontFamily: cf.mono, fontSize: 11, color: cp.muted, marginTop: 2, letterSpacing: '0.04em' }}>
          {t.person}{t.role ? ' · ' + t.role : ''}
        </div>
      </div>
      <div title="Open LinkedIn profile" style={{
        width: 28, height: 28, borderRadius: 4,
        background: '#0A66C2', color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-label="LinkedIn">
          <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3v9zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/>
        </svg>
      </div>
    </MotionA>
  );
}

// ── Clay 1:1 ─────────────────────────────────────────────────
function QClaySmall() {
  const teams = [
    { mark: 'L', brand: 'linkutm',   domain: 'linkutm.com',  person: 'Bhargav Dhameliya', role: 'Founder',          url: 'https://www.linkedin.com/in/bhargav-dhameliya/', color: cp.accent },
    { mark: 'A', brand: 'autovrse',  domain: 'autovrse.com', person: 'Hardik Sojitra',    role: 'Growth',           url: 'https://www.linkedin.com/in/hardiksojitra/',    color: cp.accent2 },
    { mark: 'W', brand: 'wizcoder',  domain: 'wizcoder.com', person: 'Veeral Luvani',     role: 'Managing Partner', url: 'https://www.linkedin.com/in/veeral710/',        color: cp.pop },
    { mark: 'A', brand: 'aicamp.so', domain: 'aicamp.so',    person: 'Nishchit Dhanani',  role: 'Founder & CEO',    url: 'https://www.linkedin.com/in/nishchit-dhanani/',  color: cp.accent },
  ];
  return (
    <section style={{
      padding: '120px 40px', background: cp.bg, color: cp.ink,
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <QReveal>
          <div style={{
            display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 60,
            alignItems: 'start',
          }} className="clay-small-grid">
            <div>
              <QSectionLabel n={3} text="1:1, free of charge" color={cp.accent2} />
              <h3 style={{
                fontFamily: cf.displaySans, fontWeight: 600,
                fontSize: 'clamp(30px, 3.8vw, 48px)', lineHeight: 1.1,
                letterSpacing: '-0.025em', color: cp.ink, margin: '20px 0 20px', textWrap: 'pretty',
              }}>
                Taught Clay into{' '}
                <QUnderline color={cp.pop} variant="wave">
                  <span style={{ fontFamily: cf.display, fontStyle: 'italic', color: cp.accent }}>4 GTM teams</span>
                </QUnderline>
                . Just because I enjoyed it.
              </h3>
              <p style={{
                fontFamily: cf.body, fontSize: 15, color: cp.inkSoft, lineHeight: 1.65,
                margin: '0 0 20px', maxWidth: 540,
              }}>
                Mostly founders and SDR leads I happened to meet. We'd sit with what they were trying to get done, then build the Clay workflow together. Some from scratch. Some just tweaks on what they had. The work stayed in their workspace.
              </p>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, position: 'relative' }}>
              {teams.map((t, i) => <QTeamRow key={i} t={t} i={i} />)}
            </div>
          </div>
        </QReveal>
      </div>
    </section>
  );
}

// ── Clay Club Surat ──────────────────────────────────────────
function QClayClub({ onOpenImage }) {
  const photos = [
    { src: 'images/clay-club-group.png', meta: 'EVENT 04', caption: 'The full room, Clay Club Surat', rotate: -1.2 },
    { src: 'images/hands-raised.jpg', meta: 'EVENT 03', caption: 'Who has tried signal-based outbound?', rotate: 1.2 },
    { src: 'images/clay-writing.jpg', meta: 'EVENT 04', caption: 'First exercise of the day', rotate: -0.8 },
    { src: 'images/clay-audience.jpg', meta: 'EVENT 02', caption: 'Cracking GTM, live', rotate: 1.5 },
    { src: 'images/clay-laptops.jpg', meta: 'EVENT 04', caption: 'Workshop pod', rotate: -1.4 },
    { src: 'images/akash-talking.jpg', meta: 'BETWEEN SESSIONS', caption: 'Always a conversation', rotate: -1.8 },
  ];

  return (
    <section id="clay-club" style={{
      background: cp.bgSoft, color: cp.ink,
      padding: '140px 40px 140px', position: 'relative', overflow: 'hidden',
      borderTop: `1.5px dashed ${cp.hair}`,
      borderBottom: `1.5px dashed ${cp.hair}`,
    }}>
      {/* Orange ambient glow — signature backdrop carried across image sections */}
      <div style={{
        position: 'absolute', top: '30%', right: '-10%',
        width: 680, height: 680, borderRadius: '50%',
        background: `radial-gradient(circle, ${cp.accent}1E 0%, transparent 65%)`,
        filter: 'blur(50px)', pointerEvents: 'none', zIndex: 0,
      }} />
      <div style={{
        position: 'absolute', bottom: '5%', left: '-8%',
        width: 520, height: 520, borderRadius: '50%',
        background: `radial-gradient(circle, ${cp.pop}20 0%, transparent 65%)`,
        filter: 'blur(50px)', pointerEvents: 'none', zIndex: 0,
      }} />
      <div style={{ maxWidth: 1240, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <QReveal>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22, flexWrap: 'wrap' }}>
            <QSectionLabel n={4} text="clay club surat" />
            <span style={{ fontFamily: cf.mono, fontSize: 11, color: cp.muted, letterSpacing: '0.1em' }}>
              india's first tier-2 clay club · featured on clay's blog, dec 2025
            </span>
          </div>
        </QReveal>
        <QReveal>
          {/* Quirky treatment: three stamped verbs as ticket chips. */}
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 22 }}>
            {[
              { v: 'organized.', c: cp.accent, bg: cp.paper, rot: -2 },
              { v: 'hosted.', c: cp.accent2, bg: cp.paper, rot: 1.5 },
              { v: 'taught.', c: cp.ink, bg: cp.pop, rot: -1 },
            ].map((t, i) => (
              <span key={i} style={{
                display: 'inline-block',
                padding: '8px 18px',
                background: t.bg,
                border: `1.5px solid ${cp.ink}`,
                borderRadius: 3,
                fontFamily: cf.display, fontStyle: 'italic', fontWeight: 400,
                fontSize: 'clamp(26px, 3vw, 40px)', color: t.c, lineHeight: 1,
                letterSpacing: '-0.02em',
                transform: `rotate(${t.rot}deg)`,
                boxShadow: `3px 3px 0 ${cp.ink}`,
              }}>{t.v}</span>
            ))}
          </div>
          <h2 style={{
            fontFamily: cf.displaySans, fontWeight: 600,
            fontSize: 'clamp(36px, 5vw, 66px)', lineHeight: 1.04,
            letterSpacing: '-0.03em', color: cp.ink,
            margin: '0 0 48px', maxWidth: 1060, textWrap: 'pretty',
          }}>
            A GTM community in Surat{' '}
            <span style={{
              fontFamily: cf.display, fontStyle: 'italic', color: cp.accent, fontWeight: 400,
              position: 'relative', display: 'inline-block',
            }}>
              didn't exist
              <svg aria-hidden="true" viewBox="0 0 240 14" preserveAspectRatio="none" style={{
                position: 'absolute', left: 0, right: 0, bottom: '-0.02em',
                width: '100%', height: '0.32em', overflow: 'visible', pointerEvents: 'none',
              }}>
                <path d="M 4 9 C 60 2, 120 14, 236 7" stroke={cp.pop} strokeWidth="4" strokeLinecap="round" fill="none" vectorEffect="non-scaling-stroke" />
              </svg>
            </span>
            . Not in a state of 60M.<br />
            So I started one. Four events in, 252 people later,{' '}
            <span style={{ fontFamily: cf.display, fontStyle: 'italic', color: cp.accent2, fontWeight: 400 }}>it's a community now.</span>
          </h2>
        </QReveal>

        {/* Stats row */}
        <QReveal>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 32, padding: '32px 0', marginBottom: 72,
            borderTop: `1px dashed ${cp.hairStrong}`, borderBottom: `1px dashed ${cp.hairStrong}`,
            position: 'relative',
          }} className="stats-row">
            <QBigNum n="4" label="events so far" color={cp.accent} />
            <QBigNum n="252" label="attendees total" color={cp.ink} />
            <QBigNum n="63" label="avg per event" color={cp.accent2} />
            <QBigNum n="200" unit="+" label="whatsapp community" color={cp.accent} />
          </div>
        </QReveal>

        {/* Gallery */}
        <QReveal>
          <div style={{ position: 'relative' }}>
            <QGallery photos={photos} onOpen={onOpenImage} auto={true} aspect="16/9" variant="window" />
            <QSticker rotate={-4} bottom={-36} left={20} maxWidth={220} color={cp.pop}>
              <span style={{ fontFamily: cf.display, fontStyle: 'italic', fontSize: 16 }}>
                photos from the four.
              </span>
            </QSticker>
          </div>
        </QReveal>

        {/* Featured callout */}
        <QReveal>
          <div style={{
            marginTop: 100,
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40,
            padding: '44px 48px',
            background: cp.paper, borderRadius: 4,
            border: `1.5px solid ${cp.ink}`,
            boxShadow: `6px 6px 0 ${cp.accent}`,
            position: 'relative',
          }} className="feat-grid">
            <div>
              <QChip color={cp.accent}>featured</QChip>
              <h3 style={{
                fontFamily: cf.displaySans, fontWeight: 600, fontSize: 32, lineHeight: 1.15,
                margin: '16px 0 12px', color: cp.ink, letterSpacing: '-0.02em',
              }}>
                On{' '}
                <a href="https://www.clay.com/blog/clay-certifications" target="_blank" rel="noopener" style={{ fontFamily: cf.display, fontStyle: 'italic', color: cp.accent, textDecoration: 'none', fontWeight: 400 }}>
                  Clay's blog
                </a>
                , December 2025.
              </h3>
              <p style={{ fontFamily: cf.body, fontSize: 14, color: cp.inkSoft, lineHeight: 1.65, margin: '0 0 18px' }}>
                As a certified community leader, for the Clay Club work in Surat. The first Clay Club outside Bangalore, Mumbai, Pune, Delhi.
              </p>
              <div style={{ position: 'relative', display: 'inline-block' }}>
                <span style={{
                  display: 'inline-block', fontFamily: cf.body, fontSize: 15,
                  fontWeight: 600, color: cp.ink, lineHeight: 1.3,
                }}>
                  Mentoring the Ahmedabad launch next, May 2026.
                </span>
                {/* Hand-drawn underline beneath it */}
                <svg aria-hidden="true" viewBox="0 0 380 14" preserveAspectRatio="none" style={{
                  position: 'absolute', left: -2, right: -2, bottom: -10,
                  width: 'calc(100% + 4px)', height: 12,
                  overflow: 'visible', pointerEvents: 'none',
                }}>
                  <path d="M 4 8 C 60 2, 140 12, 220 6 T 376 8"
                    stroke={cp.accent} strokeWidth="3" strokeLinecap="round" fill="none"
                    vectorEffect="non-scaling-stroke" />
                </svg>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontFamily: cf.body, fontSize: 14 }}>
              {[
                ['Clay Certified', 'Outbound Automation · Aug 2025'],
                ['YC startup offer', 'GTM Engineer · declined on visa timing'],
                ['Better India feature', 'Funstein Rangness · 300 students painted walls'],
              ].map(([k, v], i) => (
                <div key={i} style={{
                  display: 'flex', justifyContent: 'space-between', gap: 14,
                  padding: '10px 0',
                  borderBottom: i < 2 ? `1px dashed ${cp.hair}` : 'none',
                }}>
                  <span style={{ fontWeight: 600, color: cp.ink }}>{k}</span>
                  <span style={{ color: cp.inkSoft, textAlign: 'right' }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </QReveal>
      </div>
    </section>
  );
}

// ── LinkedIn tape — Gamma-style quirky pastel cards ──────────
function QLinkedInTape() {
  const themes = [
    { g1: '#FFE0D0', g2: '#FFB894', chip: '#FFD0A8', ink: '#3A1F10', accent: '#E04318' },
    { g1: '#E0F0E8', g2: '#A7D4C0', chip: '#C6E5D6', ink: '#0E2A1E', accent: '#2F6F4F' },
    { g1: '#FFF3BE', g2: '#FFDD4A', chip: '#FFE68A', ink: '#2A200A', accent: '#B89B4C' },
    { g1: '#FFE0EC', g2: '#FF9FC3', chip: '#FFC3D8', ink: '#3D0E2A', accent: '#D94078' },
    { g1: '#E5E8FE', g2: '#B3B9F0', chip: '#C8CCEE', ink: '#0A1E3A', accent: '#3A4FC7' },
    { g1: '#F0E0FA', g2: '#D4A9F0', chip: '#E3C6F0', ink: '#2A103D', accent: '#7B3FA8' },
    { g1: '#DEEFE0', g2: '#A0D18F', chip: '#C0E3B5', ink: '#0E2A0E', accent: '#4A7A2E' },
    { g1: '#FFE0D0', g2: '#FF8A6A', chip: '#FFC0A8', ink: '#3A0F0A', accent: '#FF5B3A' },
  ];
  const posts = [
    { name: 'Bhavya Patel', role: 'Unizoy', teaser: 'Surat is no longer just a city of diamonds…', url: 'https://www.linkedin.com/posts/bhavya-patel-unizoy_surat-is-no-longer-just-a-city-of-diamond-ugcPost-7368584936636792833-zUX2' },
    { name: 'Kashyap Polara', role: 'Attendee', teaser: 'Yesterday I had the chance to attend…', url: 'https://www.linkedin.com/posts/kashyap-polara-806035224_yesterday-i-had-the-chance-to-attend-the-ugcPost-7367965856217100288-ZYDa' },
    { name: 'Neel Vithlani', role: 'Marketing', teaser: 'Connected with some amazing Clay people…', url: 'https://www.linkedin.com/posts/neel-vithlani-marketing_connected-with-some-amazing-clay-people-at-ugcPost-7376506665455718401-TeTQ' },
    { name: 'Zubair Patel', role: 'GTM', teaser: '#claygtm #gotomarket #marketingstrategy…', url: 'https://www.linkedin.com/posts/zubairpateljiwala_claygtm-gotomarket-marketingstrategy-ugcPost-7368240222901272580-Jr6w' },
    { name: 'Smit Vanani', role: 'Attendee', teaser: "Last Saturday didn't just feel like another meetup…", url: 'https://www.linkedin.com/posts/smit-vanani_last-saturday-didnt-just-feel-like-another-ugcPost-7368639143469371392-4XU4' },
    { name: 'Yash Vardhan', role: 'GTM', teaser: '#clayclub #gtm #dataenrichment…', url: 'https://www.linkedin.com/posts/yash-vardhan-500b97221_clayclub-gtm-dataenrichment-share-7367820268347473921-5yET' },
    { name: 'Suraj Vishalpara', role: 'Attendee', teaser: '#clay #clayclubsurat #gtm…', url: 'https://www.linkedin.com/posts/suraj-vishalpara_clay-clayclubsurat-gtm-ugcPost-7411639045354770432-J5Hq' },
    { name: 'Smit Vanani', role: 'Attendee', teaser: 'Sometimes the best way to learn a new tool…', url: 'https://www.linkedin.com/posts/smit-vanani_sometimes-the-best-way-to-learn-a-new-tool-ugcPost-7375748942505951232-gEIS' },
  ];
  const ref = React.useRef(null);
  const scroll = (dir) => ref.current?.scrollBy({ left: dir * 380, behavior: 'smooth' });
  const MotionButton = qUseMotionEl('button');

  return (
    <section style={{
      background: cp.bg, color: cp.ink,
      padding: '110px 0 120px', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto 48px', padding: '0 40px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', position: 'relative', gap: 32, flexWrap: 'wrap' }}>
        <div>
          <QSectionLabel n={5} text="what they said" color={cp.accent2} />
          <h3 style={{
            fontFamily: cf.displaySans, fontWeight: 600, fontSize: 'clamp(30px, 4vw, 50px)',
            margin: '18px 0 0', letterSpacing: '-0.025em', color: cp.ink, lineHeight: 1.1, textWrap: 'pretty', maxWidth: 720,
          }}>
            <QUnderline color={cp.pop} variant="wave">
              <span style={{ fontFamily: cf.display, fontStyle: 'italic', color: cp.accent2 }}>50+ attendees</span>
            </QUnderline>
            {' '}posted about Clay Club Surat on LinkedIn.
            <br />
            <span style={{ fontFamily: cf.display, fontStyle: 'italic', color: cp.accent, fontWeight: 400 }}>
              These are the 8 I keep reopening.
            </span>
          </h3>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          {[-1, 1].map(d => (
            <MotionButton
              key={d} onClick={() => scroll(d)} aria-label={d < 0 ? 'previous' : 'next'}
              whileHover={{ y: -2 }}
              whileTap={{ y: 0, scale: 0.96 }}
              transition={{ type: 'spring', stiffness: 300, damping: 22 }}
              style={{
                width: 48, height: 48, borderRadius: 4,
                background: cp.paper, border: `1.5px solid ${cp.ink}`,
                color: cp.ink, cursor: 'pointer', fontSize: 22, fontFamily: cf.display,
                boxShadow: `3px 3px 0 ${cp.accent}`,
              }}
            >{d < 0 ? '‹' : '›'}</MotionButton>
          ))}
        </div>
      </div>
      <div ref={ref} className="quirky-scroller" style={{
        display: 'flex', gap: 22, overflowX: 'auto', padding: '10px 40px 30px',
        scrollSnapType: 'x mandatory', position: 'relative',
      }}>
        {posts.map((post, i) => (
          <QLinkedInCard key={i} post={post} theme={themes[i % themes.length]} index={i} />
        ))}
      </div>
    </section>
  );
}

function QLinkedInCard({ post, theme: t, index }) {
  const [hover, setHover] = React.useState(false);
  const MotionA = qUseMotionEl('a');
  const initials = post.name.split(' ').map(s => s[0]).slice(0, 2).join('');
  const rot = [(index * 13) % 5 - 2, (index * 7) % 4 - 1.5][index % 2];
  return (
    <MotionA href={post.url} target="_blank" rel="noopener"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      whileHover={{ y: -6, rotate: 0 }}
      whileTap={{ y: -2, scale: 0.985 }}
      transition={{ type: 'spring', stiffness: 260, damping: 22 }}
      style={{
        flex: '0 0 340px',
        background: `linear-gradient(155deg, ${t.g1} 0%, ${t.g2} 100%)`,
        borderRadius: 6, position: 'relative', overflow: 'hidden',
        padding: '26px 24px 22px',
        border: `1.5px solid ${cp.ink}`,
        scrollSnapAlign: 'start', textDecoration: 'none',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        minHeight: 260,
        boxShadow: `4px 4px 0 ${cp.ink}`,
        transform: `rotate(${rot}deg)`,
      }}>
      <div style={{
        position: 'absolute', top: -60, right: -60, width: 220, height: 220,
        borderRadius: '50%',
        background: `radial-gradient(circle, ${t.accent}3A 0%, transparent 70%)`,
        filter: 'blur(14px)', pointerEvents: 'none',
      }} />

      <div style={{ position: 'relative', zIndex: 2 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '4px 10px', borderRadius: 3,
          background: cp.ink, color: t.g1,
          fontFamily: cf.mono, fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase',
          marginBottom: 18, fontWeight: 500,
        }}>
          <svg width="10" height="10" viewBox="0 0 24 24" fill={t.g1}>
            <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3v9zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/>
          </svg>
          post · {String(index + 1).padStart(2, '0')}
        </div>
        <div style={{
          fontFamily: cf.display, fontSize: 60, lineHeight: 0.4,
          color: t.accent, fontStyle: 'italic', opacity: 0.6,
          marginBottom: 10, marginTop: -6,
        }}>"</div>
        <div style={{ fontFamily: cf.display, fontSize: 19, fontStyle: 'italic', color: t.ink, lineHeight: 1.35, fontWeight: 400, textWrap: 'pretty' }}>
          {post.teaser}
        </div>
      </div>
      <div style={{ marginTop: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 34, height: 34, borderRadius: 4,
            background: t.accent, color: '#fff',
            fontFamily: cf.body, fontSize: 12, fontWeight: 700,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: `1.5px solid ${cp.ink}`,
            letterSpacing: 0,
          }}>{initials}</div>
          <div>
            <div style={{ fontFamily: cf.body, fontSize: 13, fontWeight: 700, color: t.ink, letterSpacing: 0 }}>{post.name}</div>
            <div style={{ fontFamily: cf.mono, fontSize: 10, color: t.ink, opacity: 0.64, marginTop: 1, letterSpacing: '0.04em' }}>{post.role}</div>
          </div>
        </div>
        <span style={{
          fontFamily: cf.mono, fontSize: 10, color: cp.paper, letterSpacing: '0.1em',
          padding: '6px 12px', background: cp.ink, borderRadius: 3,
          transform: hover ? 'translateX(4px)' : 'translateX(0)',
          transition: 'transform 240ms',
          textTransform: 'uppercase', fontWeight: 600,
        }}>read →</span>
      </div>
    </MotionA>
  );
}

Object.assign(window, { QClaySmall, QClayClub, QLinkedInTape });