/* ============================================================
   Hero — four interchangeable layouts (Tweak: heroLayout).
   editorial · centered · index · statement
   ============================================================ */
const HERO = {
  eyebrow: 'Digital marketing agency',
  title: "Your ads aren't failing. Your content is.",
  lede: "We make short-form that earns the watch then put paid spend behind what's already working.",
  primary: 'Start a project',
  secondary: 'See our work',
};

/* Deliverable-based facts — what you actually get, not invented results. */
const HERO_STATS = [
  { v: '48hr', label: 'First-draft turnaround' },
  { v: '8–12', label: 'Short-form scripts per month' },
  { v: 'TikTok + Reels', label: 'Where we focus' },
  { v: 'Same-day', label: 'Founder reply time' },
];

const HERO_DISCIPLINES = [
  { n: '01', t: 'Performance marketing', m: 'Paid acquisition that pays back' },
  { n: '02', t: 'Brand & content', m: 'A voice people remember' },
  { n: '03', t: 'SEO & organic', m: 'Compounding inbound demand' },
  { n: '04', t: 'Web & conversion', m: 'Pages that turn clicks into pipeline' },
];

function HeroCTAs({ onContact, onWork, align = 'flex-start' }) {
  const { Button } = window.EditorialCSDesignSystem_8c71a4;
  const { ArrowIcon } = window;
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-md)', alignItems: 'center', justifyContent: align }}>
      <Button size="lg" onClick={onContact}>{HERO.primary}</Button>
      <Button variant="secondary" size="lg" onClick={onWork} iconRight={<span style={{ color: 'var(--accent)', display: 'inline-flex' }}><ArrowIcon /></span>}>
        {HERO.secondary}
      </Button>
    </div>
  );
}

/* Risk-reversal line — replaces fabricated social proof. Given extra
   prominence: an accent rule + ink-weight text so it reads as a promise. */
function TrustRow({ align = 'flex-start' }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 'var(--space-md)',
      maxWidth: 480, justifyContent: align,
    }}>
      <span aria-hidden style={{ flex: '0 0 auto', width: 3, alignSelf: 'stretch', minHeight: 38, borderRadius: 999, background: 'var(--accent)' }} />
      <p className="t-body" style={{
        margin: 0, color: 'var(--ink)', fontWeight: 500,
        textAlign: align === 'center' ? 'center' : 'left', textWrap: 'pretty',
      }}>
        Month-to-month. No long contracts. Direct line to the founder.
      </p>
    </div>
  );
}

function StatStrip({ cols = 4 }) {
  const { Reveal } = window;
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 'var(--space-xl)',
      borderTop: '1px solid var(--hairline)', paddingTop: 'var(--space-xl)',
    }} className="stat-strip">
      {HERO_STATS.map((s, i) => (
        <Reveal key={s.label} delay={i * 80} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <span className="t-display-md" style={{
            color: 'var(--ink)', fontSize: 'clamp(24px, 2.6vw, 38px)', letterSpacing: '-1px', lineHeight: 1.05,
          }}>{s.v}</span>
          <span className="t-body-sm" style={{ color: 'var(--ink-muted)' }}>{s.label}</span>
        </Reveal>
      ))}
    </div>
  );
}

const HERO_REEL = 'https://www.instagram.com/reel/DY7B9OzImaI/?igsh=MTBjYXZ4c3hqMzBrYQ=='; // paste your Instagram Reel URL here

/* The phone mockup that anchors the hero — Instagram Reel embed. */
function HeroMockup({ id = 'hero-shot' }) {
  const { PhoneShot } = window;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--space-md)' }}>
      <PhoneShot id={id} src={HERO_REEL} maxWidth={300} />
      <span className="t-body-sm" style={{ color: 'var(--ink-muted)' }}>Real content we produced.</span>
    </div>
  );
}

function Hero({ layout, onContact, onWork }) {
  const { Eyebrow } = window.EditorialCSDesignSystem_8c71a4;
  const { Reveal, Container } = window;

  /* ---- shared text block ---- */
  const TextBlock = ({ align = 'left', titleClass = 't-display-lg' }) => (
    <div style={{
      display: 'flex', flexDirection: 'column', gap: 'var(--space-lg)',
      alignItems: align === 'center' ? 'center' : 'flex-start',
      textAlign: align === 'center' ? 'center' : 'left',
    }}>
      <Reveal><Eyebrow dot tone="muted">{HERO.eyebrow}</Eyebrow></Reveal>
      <Reveal delay={70} as="h1" className={titleClass} style={{ margin: 0, color: 'var(--ink)', maxWidth: align === 'center' ? 820 : 14 + 'ch', textWrap: 'balance' }}>
        {HERO.title}
      </Reveal>
      <Reveal delay={140} as="p" className="t-subhead" style={{ margin: 0, color: 'var(--ink-muted)', maxWidth: 520, textWrap: 'pretty' }}>
        {HERO.lede}
      </Reveal>
      <Reveal delay={210}><HeroCTAs onContact={onContact} onWork={onWork} align={align === 'center' ? 'center' : 'flex-start'} /></Reveal>
      <Reveal delay={280} style={{ marginTop: 4 }}><TrustRow align={align === 'center' ? 'center' : 'flex-start'} /></Reveal>
    </div>
  );

  const wrap = (children, extra = {}) => (
    <Section id="top" label="Hero" pad="clamp(48px, 8vw, 104px)" style={extra}>
      {children}
    </Section>
  );

  /* ---- editorial: split text / mockup ---- */
  if (layout === 'editorial') {
    return wrap(
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(48px, 7vw, 88px)' }}>
        <div className="hero-split" style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'clamp(32px, 5vw, 72px)', alignItems: 'center' }}>
          <TextBlock />
          <Reveal delay={180} y={26}><HeroMockup /></Reveal>
        </div>
        <Reveal delay={120}><StatStrip /></Reveal>
      </div>
    );
  }

  /* ---- centered: statement + wide shot ---- */
  if (layout === 'centered') {
    return wrap(
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(40px, 6vw, 72px)', alignItems: 'center' }}>
        <TextBlock align="center" titleClass="t-display-xl" />
        <Reveal delay={220} y={28} style={{ width: '100%' }}><HeroMockup ratio="16 / 8" label="Drop a hero screenshot or showreel still" /></Reveal>
        <Reveal delay={120} style={{ width: '100%' }}><StatStrip /></Reveal>
      </div>
    );
  }

  /* ---- index: text + numbered discipline list ---- */
  if (layout === 'index') {
    return wrap(
      <div className="hero-split" style={{ display: 'grid', gridTemplateColumns: '1fr 0.85fr', gap: 'clamp(32px, 5vw, 80px)', alignItems: 'center' }}>
        <TextBlock />
        <Reveal delay={180} y={24}>
          <div style={{ borderTop: '1px solid var(--hairline)' }}>
            {HERO_DISCIPLINES.map((d) => (
              <a key={d.n} href="#services" onClick={(e) => { e.preventDefault(); onWork(); }}
                className="hero-index-row" style={{
                  display: 'flex', alignItems: 'baseline', gap: 'var(--space-lg)', textDecoration: 'none',
                  padding: 'var(--space-lg) 0', borderBottom: '1px solid var(--hairline)',
                }}>
                <span className="t-mono" style={{ color: 'var(--accent)', flex: '0 0 auto' }}>{d.n}</span>
                <span style={{ display: 'flex', flexDirection: 'column', gap: 2, flex: 1 }}>
                  <span className="t-card-title" style={{ color: 'var(--ink)' }}>{d.t}</span>
                  <span className="t-body-sm" style={{ color: 'var(--ink-muted)' }}>{d.m}</span>
                </span>
                <span className="hero-index-arrow" style={{ color: 'var(--ink-muted)', display: 'inline-flex' }}><window.ArrowIcon /></span>
              </a>
            ))}
          </div>
        </Reveal>
      </div>
    );
  }

  /* ---- statement: oversized type, minimal ---- */
  return wrap(
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(40px, 6vw, 80px)' }}>
      <Reveal><Eyebrow dot tone="muted">{HERO.eyebrow}</Eyebrow></Reveal>
      <Reveal delay={70} as="h1" className="hero-statement" style={{ margin: 0, color: 'var(--ink)', textWrap: 'balance' }}>
        Your ads aren't failing. Your <span style={{ color: 'var(--accent)' }}>content</span> is.
      </Reveal>
      <div className="hero-statement-foot" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 'clamp(24px,4vw,64px)', alignItems: 'end' }}>
        <Reveal delay={140} as="p" className="t-subhead" style={{ margin: 0, color: 'var(--ink-muted)', maxWidth: 560, textWrap: 'pretty' }}>
          {HERO.lede}
        </Reveal>
        <Reveal delay={210} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-lg)', alignItems: 'flex-start' }}>
          <HeroCTAs onContact={onContact} onWork={onWork} />
          <TrustRow />
        </Reveal>
      </div>
      <Reveal delay={120}><StatStrip /></Reveal>
    </div>
  );
}

window.Hero = Hero;