/* ============================================================
   Work gallery · How we work
   ============================================================ */

/* ---- Selected work: honest gallery of real short-form content ----
   No fabricated clients or metrics — just drop-in phone mockups
   for the real TikToks / Reels we've produced. */
const WORK_SHOTS = [
  { id: 'work-1', src: 'https://www.instagram.com/reel/DZSH86vPSxN/?igsh=NzZoOThzN3ZqZGkz' }, // paste Instagram Reel URL here
  { id: 'work-2', src: 'https://www.instagram.com/reel/DZeorBwDRWH/?igsh=dzdqNjh0M3B6MDJu' }, // paste Instagram Reel URL here
  { id: 'work-3', src: 'https://www.instagram.com/reel/DZWT6a_TFVP/?igsh=MTA1Z3Z6ZG45Ynhycw==' }, // paste Instagram Reel URL here
];

const RECENT_WORK = [
  { id: 'logo-1', name: 'GAG Nepal',            logo: 'logo/gag nepal.png' },
  { id: 'logo-2', name: 'Billin (SaaS)',         logo: 'logo/billin logo.png' },
  { id: 'logo-3', name: 'JungleX',              logo: 'logo/jungle x.jpg' },
  { id: 'logo-4', name: 'Live concert coverage', logo: 'logo/concert.png' },
];

function Work() {
  const { Reveal, Container, SectionHead, PhoneShot } = window;
  return (
    <section id="work" data-screen-label="Work" style={{ padding: 'var(--space-section) 0' }}>
      <Container style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(40px,6vw,64px)' }}>
        <SectionHead
          eyebrow="Our work"
          title="Content we've produced."
          lede="Short-form built to be watched, not skipped made for brands selling real, physical products."
          max={620} />
        <div className="work-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 'clamp(20px,3vw,32px)', justifyItems: 'center',
        }}>
          {WORK_SHOTS.map((s, i) => (
            <Reveal key={s.id} delay={i * 100} y={24} style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
              <PhoneShot id={s.id} src={s.src} />
            </Reveal>
          ))}
        </div>
        <Reveal delay={120}>
          <div style={{
            borderRadius: 'var(--radius-xl)', overflow: 'hidden',
            border: '1px solid var(--hairline)',
            background: 'var(--surface-1)',
          }}>
            {/* header */}
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: 'var(--space-md) clamp(20px,2.4vw,32px)',
              borderBottom: '1px solid var(--hairline)',
              background: 'var(--canvas)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--accent)', flexShrink: 0 }} />
                <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-subtle)' }}>
                  Brands we've worked with
                </span>
              </div>
              <span className="t-body-sm" style={{ color: 'var(--ink-muted)' }}>Real clients. Real content.</span>
            </div>

            {/* logo grid */}
            <div className="logo-wall" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
              {RECENT_WORK.map((c, i) => (
                <div key={c.id} className="logo-cell" style={{
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
                  padding: 'clamp(28px,3.5vw,48px) clamp(16px,2vw,28px)',
                  borderLeft: i % 4 === 0 ? 'none' : '1px solid var(--hairline)',
                  transition: 'background 180ms ease',
                  cursor: 'default',
                }}>
                  <div style={{
                    width: '100%', maxWidth: 152, height: 80,
                    background: '#fff',
                    borderRadius: 14,
                    boxShadow: '0 2px 10px rgba(0,0,0,0.08)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    padding: 14, boxSizing: 'border-box', overflow: 'hidden',
                    transition: 'box-shadow 200ms ease, transform 200ms ease',
                  }}
                    onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 6px 24px rgba(0,0,0,0.13)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
                    onMouseLeave={e => { e.currentTarget.style.boxShadow = '0 2px 10px rgba(0,0,0,0.08)'; e.currentTarget.style.transform = 'none'; }}
                  >
                    <img
                      src={c.logo}
                      alt={c.name}
                      style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', display: 'block' }}
                    />
                  </div>
                  <span className="t-body-sm" style={{ color: 'var(--ink-muted)', textAlign: 'center', fontWeight: 500, textWrap: 'pretty' }}>
                    {c.name}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </Container>
    </section>
  );
}

/* ---- How we work: dark process band (replaces the fabricated metrics) ---- */
const HOW_STEPS = [
  { n: '01', t: 'Research', b: 'We study your product, audience, and competitors.' },
  { n: '02', t: 'Script', b: 'We write hooks built for your niche.' },
  { n: '03', t: 'Produce', b: 'Short-form content ready to post.' },
  { n: '04', t: 'Iterate', b: 'We adjust based on what the data shows.' },
];

function HowWeWork() {
  const { Reveal, Container } = window;
  const { Eyebrow } = window.EditorialCSDesignSystem_8c71a4;
  return (
    <section id="how-we-work" data-screen-label="How we work" style={{ background: 'var(--ink)', color: 'var(--inverse-ink)' }}>
      <Container style={{ padding: 'var(--space-section) clamp(20px,5vw,40px)', display: 'flex', flexDirection: 'column', gap: 'clamp(40px,6vw,64px)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)', maxWidth: 640 }}>
          <Reveal><Eyebrow dot tone="fin" style={{ color: 'var(--inverse-ink-muted)' }}>Process</Eyebrow></Reveal>
          <Reveal delay={70} as="h2" className="t-display-md" style={{ margin: 0, color: 'var(--inverse-ink)', textWrap: 'balance' }}>
            How we work.
          </Reveal>
          <Reveal delay={130} as="p" className="t-subhead" style={{ margin: 0, color: 'var(--inverse-ink-muted)', textWrap: 'pretty' }}>
            No fake numbers, no fluff. Here's exactly what you get.
          </Reveal>
        </div>
        <div className="results-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-xl)' }}>
          {HOW_STEPS.map((s, i) => (
            <Reveal key={s.n} delay={i * 90} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)', paddingTop: 'var(--space-md)', borderTop: '2px solid rgba(255,255,255,0.22)' }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: i === 0 ? 'var(--accent)' : 'var(--inverse-ink)' }} />
                <span className="t-mono" style={{ color: 'var(--inverse-ink-muted)' }}>{s.n}</span>
              </div>
              <h3 className="t-card-title" style={{ margin: 0, color: 'var(--inverse-ink)' }}>{s.t}</h3>
              <p className="t-body" style={{ margin: 0, color: 'var(--inverse-ink-muted)', textWrap: 'pretty' }}>{s.b}</p>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { Work, HowWeWork });