// home.jsx — Hero + Capabilities + Scrollytelling process (embedded)

const HERO_VIDEO = "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_024928_1efd0b0d-6c02-45a8-8847-1030900c4f63.mp4";
const CAPS_VIDEO = "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260322_013248_a74099a8-be2b-4164-a823-eddd5e149fa1.mp4";

// ────────────────────── HERO ──────────────────────
function Hero() {
  const ref = React.useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ['start start', 'end start'] });
  const yBg = useTransform(scrollYProgress, [0, 1], ['0%', '25%']);
  const opacityContent = useTransform(scrollYProgress, [0, 0.6], [1, 0]);
  const yContent = useTransform(scrollYProgress, [0, 1], ['0px', '-80px']);

  return (
    <section ref={ref} className="section section--full" data-screen-label="Hero">
      <motion.div style={{ position: 'absolute', inset: 0, y: yBg }}>
        <BgVideo sources={[HERO_VIDEO]} vignette />
      </motion.div>

      <motion.div className="container" style={{ opacity: opacityContent, y: yContent, position: 'relative', zIndex: 4, paddingTop: 120 }}>
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
          style={{ display: 'flex', alignItems: 'center', gap: 14 }}
        >
          <span className="tag"><span className="dot" /> Available — 2 slots · Summer 2026</span>
        </motion.div>

        <h1
          className="display"
          style={{
            fontSize: 'var(--fs-display)',
            marginTop: 40,
            marginBottom: 40,
            color: 'var(--ink-950)',
            textWrap: 'balance',
          }}
        >
          <div><SplitWords text="Websites with" delay={0.35} /></div>
          <div><SplitWords text="a quiet kind" delay={0.55} /></div>
          <div><SplitWords text="of gravity." delay={0.75} em={[2]} /></div>
        </h1>

        <motion.div
          style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'end', maxWidth: 1100 }}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1, delay: 1.1, ease: [0.16, 1, 0.3, 1] }}
        >
          <p className="lead" style={{ fontSize: 'clamp(17px, 1.3vw, 21px)' }}>
            Excelsior is a small studio making considered, hand-crafted sites — from
            honest marketing pages to deeply interactive experiences. Built to load
            fast, read well, and feel inevitable.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="contact.html" className="btn btn--primary">Start a project <span className="arrow">→</span></a>
            <a href="work.html" className="btn btn--ghost">See work</a>
          </div>
        </motion.div>

        {/* meta strip */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 1.2, delay: 1.6 }}
          style={{
            marginTop: 80,
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 0,
            borderTop: '1px solid var(--glass-border)',
            borderBottom: '1px solid var(--glass-border)',
            padding: '18px 0',
          }}
        >
          {[
            ['01 / Discovery', 'Alignment, audience, intent'],
            ['02 / Design', 'Type, motion, voice'],
            ['03 / Build', 'Hand-coded, fast, accessible'],
            ['04 / Launch', 'Handover + care plan'],
          ].map(([k, v], i) => (
            <div key={i} style={{ padding: '0 24px', borderRight: i < 3 ? '1px solid var(--glass-border)' : 'none' }}>
              <div className="mono" style={{ marginBottom: 6 }}>{k}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-900)' }}>{v}</div>
            </div>
          ))}
        </motion.div>
      </motion.div>

      <div className="scroll-cue">
        <span>Scroll</span>
        <span className="line" />
      </div>
    </section>
  );
}

// ────────────────────── CAPABILITIES ──────────────────────
const CAPS = [
  {
    num: '01',
    title: 'Marketing sites',
    sub: 'Static & essential',
    desc: 'Fast, honest sites for brands, restaurants, studios, and small businesses — hand-coded, hand-typeset, and built to last.',
    range: '$799 — $1,500',
    meta: ['Up to 6 pages', 'Custom type', 'CMS optional', 'Launch in 2–3 wks'],
  },
  {
    num: '02',
    title: 'Interactive sites',
    sub: 'Motion & intent',
    desc: 'Scroll-driven narratives, bespoke components, and the kind of interactions people forward to friends. For brands ready to be remembered.',
    range: '$2,500 — $5,000',
    meta: ['Custom motion', 'WebGL optional', 'Scrollytelling', 'Launch in 4–6 wks'],
  },
  {
    num: '03',
    title: 'Brand + design',
    sub: 'Identity systems',
    desc: 'Logotypes, type systems, and visual grammar that pair with the site — so the web presence feels inseparable from the brand it represents.',
    range: 'From $900',
    meta: ['Logo + wordmark', 'Type system', 'Color & motion', 'Brand guide'],
  },
  {
    num: '04',
    title: 'Care + evolution',
    sub: 'Ongoing partnership',
    desc: 'Monthly retainers for performance, updates, analytics, and gentle iteration. Websites stay alive when someone is watching.',
    range: 'From $150/mo',
    meta: ['Hosting + SSL', 'Analytics', 'Monthly edits', 'Quarterly review'],
  },
];

function CapabilityCard({ cap, i }) {
  const [hover, setHover] = React.useState(false);
  return (
    <motion.div
      className="glass"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      initial={{ opacity: 0, y: 40 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-10% 0px' }}
      transition={{ duration: 1, delay: i * 0.12, ease: [0.16, 1, 0.3, 1] }}
      style={{
        padding: 32,
        minHeight: 420,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        borderRadius: 3,
        position: 'relative',
        cursor: 'default',
      }}
    >
      <motion.div
        animate={{ opacity: hover ? 1 : 0.35 }}
        transition={{ duration: 0.6 }}
        style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%)',
          pointerEvents: 'none',
        }}
      />
      <div style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <span className="mono">{cap.num}</span>
          <motion.span
            className="mono"
            animate={{ x: hover ? 4 : 0 }}
            transition={{ duration: 0.4 }}
          >{cap.sub}</motion.span>
        </div>
        <h3 className="h3" style={{ marginTop: 30, marginBottom: 16, fontSize: 34 }}>{cap.title}</h3>
        <p style={{ color: 'var(--ink-800)', fontSize: 15, lineHeight: 1.55, marginBottom: 24, maxWidth: '38ch' }}>
          {cap.desc}
        </p>
      </div>
      <div style={{ position: 'relative', zIndex: 2 }}>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 24 }}>
          {cap.meta.map((m, k) => (
            <li key={k} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'var(--ink-800)' }}>
              <span style={{ width: 16, height: 1, background: 'var(--ink-600)' }} /> {m}
            </li>
          ))}
        </ul>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingTop: 18, borderTop: '1px solid var(--glass-border)' }}>
          <span className="display" style={{ fontSize: 24, color: 'var(--ink-950)' }}>{cap.range}</span>
          <a href="contact.html" className="mono" style={{ textDecoration: 'underline', textUnderlineOffset: 4 }}>
            Inquire →
          </a>
        </div>
      </div>
    </motion.div>
  );
}

function Capabilities() {
  const ref = React.useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] });
  const yBg = useTransform(scrollYProgress, [0, 1], ['-10%', '10%']);

  return (
    <section ref={ref} className="section" style={{ padding: '160px 0 180px', position: 'relative' }} data-screen-label="Capabilities">
      <motion.div style={{ position: 'absolute', inset: 0, y: yBg }}>
        <BgVideo sources={[CAPS_VIDEO]} vignette />
      </motion.div>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(6,6,7,.55) 0%, rgba(6,6,7,.8) 100%)', zIndex: 2 }} />

      <div className="container" style={{ position: 'relative', zIndex: 4 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'end', marginBottom: 80 }}>
          <div>
            <FadeUp>
              <div className="eyebrow" style={{ marginBottom: 24 }}>— Capabilities</div>
            </FadeUp>
            <h2 className="h2" style={{ fontSize: 'clamp(44px, 6vw, 88px)', textWrap: 'balance' }}>
              <div><SplitWords text="Four things," /></div>
              <div><SplitWords text="done deliberately." delay={0.1} em={[1]} /></div>
            </h2>
          </div>
          <FadeUp delay={0.3}>
            <p className="lead">
              We keep the practice intentionally narrow — so every project receives
              the attention it deserves. Pricing is transparent; scope is honest.
            </p>
          </FadeUp>
        </div>

        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
            gap: 20,
          }}
        >
          {CAPS.map((c, i) => <CapabilityCard key={c.num} cap={c} i={i} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Capabilities, HERO_VIDEO, CAPS_VIDEO });