// MnvHero.jsx — Opening hero + Who we are section.

const MnvHero = () => (
  <header style={{
    position: 'relative', padding: '80px 0 60px',
    borderBottom: `1px solid ${BRAND.line}`,
  }}>
    {/* Top meta */}
    <div className="figure-wide" style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: BRAND.mono, fontSize: 12, letterSpacing: 1.2,
      textTransform: 'uppercase', color: BRAND.fgMuted, marginBottom: 100,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <PlatterMark size={22} rounded={5}/>
        <span style={{ color: BRAND.fg, fontWeight: 500 }}>Platter</span>
        <span style={{ opacity: 0.5 }}>×</span>
        <span style={{ color: BRAND.fg, fontWeight: 500 }}>Maui Nui Venison</span>
      </div>
      <div style={{ display: 'flex', gap: 24 }}>
        <span>Prepared May 2026</span>
        <span>v2 · revised</span>
      </div>
    </div>

    {/* Eyebrow */}
    <div style={{
      fontFamily: BRAND.mono, fontSize: 13, letterSpacing: 1.6,
      textTransform: 'uppercase', color: BRAND.clay, marginBottom: 28,
      display: 'inline-flex', alignItems: 'center', gap: 10,
    }}>
      <span style={{
        width: 6, height: 6, borderRadius: 3, background: BRAND.clay,
        boxShadow: `0 0 0 4px ${BRAND.claySoft}`,
      }}/>
      Migration plan · revised
    </div>

    {/* Title */}
    <h1 style={{
      fontFamily: BRAND.serif, fontWeight: 400,
      fontSize: 96, lineHeight: 0.98, letterSpacing: -3,
      margin: '0 0 28px', textWrap: 'balance',
    }}>
      Maui Nui Venison — <em style={{ fontStyle: 'italic', fontWeight: 300, color: BRAND.fgSoft }}>headless to Liquid</em>, considered.
    </h1>

    {/* Dek */}
    <p style={{
      fontFamily: BRAND.sans, fontWeight: 300,
      fontSize: 24, lineHeight: 1.42, letterSpacing: -0.2,
      color: BRAND.fgSoft, margin: '0 0 64px', maxWidth: 760,
      textWrap: 'pretty',
    }}>
      Platter's response to the technical plan your team prepared in-house —
      same destination, a few different turns to get there. Here's what we'd
      change, and why.
    </p>

    {/* TOC strip */}
    <nav aria-label="Sections" className="figure-wide" style={{
      borderTop: `1px solid ${BRAND.line}`,
      borderBottom: `1px solid ${BRAND.line}`,
      padding: '18px 0',
      display: 'flex', gap: 28, flexWrap: 'wrap',
      fontFamily: BRAND.mono, fontSize: 11.5, letterSpacing: 1.2,
      textTransform: 'uppercase', color: BRAND.fgMuted,
    }}>
      {[
        ['01', 'Who we are', '#who'],
        ['02', 'What we changed', '#changes'],
        ['03', 'Architecture', '#architecture'],
        ['04', '150-day roadmap', '#roadmap'],
        ['05', 'After launch', '#post'],
      ].map(([n, label, href]) => (
        <a key={n} href={href} style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          color: 'inherit', textDecoration: 'none',
          transition: 'color .12s',
        }}
          onMouseEnter={(e) => e.currentTarget.style.color = BRAND.fg}
          onMouseLeave={(e) => e.currentTarget.style.color = BRAND.fgMuted}
        >
          <span style={{ color: BRAND.fgFaint }}>{n}</span>
          <span>{label}</span>
        </a>
      ))}
    </nav>
  </header>
);

// ============================================================
// Who we are — short, with stats pulled into a row.
// ============================================================

const WhoWeAre = () => (
  <section id="who">
    <SectionHeader num="01" eyebrow="Who we are" title="A team built for this."/>
    <P>
      Platter is a Platinum Shopify Partner specializing in custom theme
      builds. We have a team of 30 full-time employees across Strategy,
      Design, Development, and QA. We've completed more than 200 Shopify
      theme builds, many of them migrations from headless to Liquid, and
      are the fastest agency in Shopify history to achieve Platinum status.
    </P>

    <div className="figure-wide" style={{
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
      marginTop: 32, border: `1px solid ${BRAND.line}`,
      background: BRAND.paper,
    }}>
      {[
        { v: '30', k: 'Full-time team', sub: 'Strategy · Design · Dev · QA' },
        { v: '200+', k: 'Theme builds', sub: 'Many headless → Liquid' },
        { v: '#1', k: 'Fastest to Platinum', sub: 'In Shopify Partner history' },
        { v: 'Plat.', k: 'Shopify Partner tier', sub: 'Current — Platinum' },
      ].map((s, i) => (
        <div key={s.k} style={{
          padding: '32px 28px',
          borderLeft: i === 0 ? 'none' : `1px solid ${BRAND.line}`,
        }}>
          <div style={{
            fontFamily: BRAND.serif, fontSize: 56, fontWeight: 400,
            letterSpacing: -1.8, lineHeight: 1, color: BRAND.fg,
          }}>{s.v}</div>
          <div style={{
            fontFamily: BRAND.mono, fontSize: 11, letterSpacing: 1.4,
            textTransform: 'uppercase', color: BRAND.fgMuted,
            marginTop: 14,
          }}>{s.k}</div>
          <div style={{
            fontFamily: BRAND.sans, fontSize: 13, color: BRAND.fgSoft,
            marginTop: 4, lineHeight: 1.4,
          }}>{s.sub}</div>
        </div>
      ))}
    </div>
  </section>
);

// ============================================================
// Footer — quiet, professional close.
// ============================================================

const MnvFooter = () => (
  <footer style={{
    marginTop: 120,
    padding: '64px 0 48px',
    borderTop: `1px solid ${BRAND.line}`,
  }}>
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40,
      alignItems: 'end',
    }}>
      {/* Left: wordmark + closing line */}
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 32 }}>
          <PlatterMark size={28} rounded={6}/>
          <span style={{
            fontFamily: BRAND.serif, fontSize: 24, letterSpacing: -0.5, color: BRAND.fg,
          }}>Platter</span>
        </div>
        <p style={{
          fontFamily: BRAND.serif, fontSize: 36, fontStyle: 'italic',
          lineHeight: 1.15, letterSpacing: -0.8, fontWeight: 400,
          margin: 0, color: BRAND.fg, textWrap: 'balance',
        }}>
          Looking forward to the build.
        </p>
      </div>

      {/* Right: contact + meta */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20, alignItems: 'flex-end' }}>
        <div style={{
          fontFamily: BRAND.mono, fontSize: 11, letterSpacing: 1.4,
          textTransform: 'uppercase', color: BRAND.fgMuted,
        }}>Follow up</div>
        <a href="mailto:kieran@platter.com" style={{
          fontFamily: BRAND.serif, fontSize: 22, color: BRAND.fg,
          textDecoration: 'none', letterSpacing: -0.4,
          borderBottom: `1px solid ${BRAND.fg}`, paddingBottom: 2,
        }}>kieran@platter.com</a>
        <div style={{
          fontFamily: BRAND.sans, fontSize: 13, color: BRAND.fgSoft,
        }}>or reply directly to the thread this link came in</div>
      </div>
    </div>

    {/* Colophon strip */}
    <div style={{
      marginTop: 72, paddingTop: 20, borderTop: `1px solid ${BRAND.line}`,
      display: 'flex', justifyContent: 'space-between',
      fontFamily: BRAND.mono, fontSize: 11, letterSpacing: 1.2,
      textTransform: 'uppercase', color: BRAND.fgMuted,
    }}>
      <span>Maui Nui Venison · Migration plan · Revised</span>
      <span>Prepared May 14, 2026</span>
      <span>platter.com</span>
    </div>
  </footer>
);

Object.assign(window, { MnvHero, WhoWeAre, MnvFooter });