const { Statement, Eyebrow, Rule, Button, ArrowLink } = window.VamshotDesignSystem_18ef2a;

/* SECTION 09 — the story */
function Story() {
  return (
    <Shell id="story" innerStyle={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-11)' }}>
      <div>
        <Eyebrow index="09" style={{ marginBottom: 'var(--space-8)' }}>Our story</Eyebrow>
        <div className="vs-grid" style={{ rowGap: 'var(--space-7)', alignItems: 'end' }}>
          <div style={{ gridColumn: 'span 7' }}>
            <Reveal><Statement as="h2" size="display" reveal={false} lines={['We watched', 'better products', { text: 'lose.', accent: true }]} /></Reveal>
          </div>
          <div style={{ gridColumn: '9 / span 4', display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
            <Reveal delay={160}>
              <p style={{ margin: 0, fontSize: 'var(--type-body)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-loose)', maxWidth: '38ch' }}>
                Not because they had worse products. Because their competitors had:
              </p>
            </Reveal>
            <Reveal delay={280}><Statement as="p" size="title" reveal={false} lines={['More content.']} /></Reveal>
          </div>
        </div>
      </div>

      <Reveal>
        <Line />
        <div style={{ paddingTop: 'var(--space-9)' }}>
          <Statement as="p" size="display" reveal={false} lines={['So we built', 'what we wished', 'existed.']} />
        </div>
      </Reveal>
    </Shell>
  );
}

/* SECTION 10 — final CTA */
function FinalCta() {
  const ref = useReveal();
  return (
    <section id="contact" ref={ref} style={{ borderTop: '1px solid var(--border-hairline)', position: 'relative', overflow: 'hidden' }}>
      <div className="vs-bleed vs-grid" style={{ minHeight: '92vh', alignItems: 'center', rowGap: 'var(--space-9)', paddingTop: 'var(--section-pad-y)', paddingBottom: 'var(--section-pad-y)' }}>
        <div style={{ gridColumn: 'span 8', display: 'flex', flexDirection: 'column', gap: 'var(--space-9)' }}>
          <Reveal><Marks>10 &mdash; Let&rsquo;s talk</Marks></Reveal>
          <Reveal delay={100}>
            <Statement as="h2" size="mega" reveal={false} lines={['Your brand', 'needs a face.', { text: 'Let\u2019s build it.', accent: true }]} />
          </Reveal>
          <Reveal delay={240} style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-8)', flexWrap: 'wrap' }}>
            <Button size="lg" data-cursor="button" href={window.NH_CAL} target="_blank" rel="noopener">Book a meeting</Button>
            <ArrowLink href={window.NH_MAIL} data-cursor="button">contact@nothuman.digital</ArrowLink>
          </Reveal>
        </div>
        <Reveal delay={200} style={{ gridColumn: '10 / span 3' }}>
          <Media src="assets/char-portrait.png" alt="NOTHUMAN digital character" ratio="3 / 4" tone="mono" position="center 14%"
            label={<React.Fragment><span>Owned character</span><span>NOTHUMAN</span></React.Fragment>} />
        </Reveal>
      </div>
    </section>
  );
}

/* FOOTER */
function SiteFooter() {
  return (
    <footer style={{ borderTop: '1px solid var(--border-hairline)' }}>
      <div className="vs-bleed" style={{ paddingTop: 'var(--space-9)', paddingBottom: 'var(--space-6)' }}>
        <div className="vs-grid" style={{ rowGap: 'var(--space-7)' }}>
          <div style={{ gridColumn: 'span 6', display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
            <NhWordmark size="md" tagline />
            <Rule />
            <div style={{ display: 'flex', gap: 'var(--space-7)', flexWrap: 'wrap' }}>
              <ArrowLink href="#what-we-do" glyph={null}>What we do</ArrowLink>
              <ArrowLink href="#character" glyph={null}>The character</ArrowLink>
              <ArrowLink href="#why" glyph={null}>Why NOTHUMAN</ArrowLink>
              <ArrowLink href={window.NH_MAIL} glyph={null}>contact@nothuman.digital</ArrowLink>
            </div>
          </div>
          <div style={{ gridColumn: '9 / span 4', display: 'flex', gap: 'var(--space-7)', flexWrap: 'wrap', justifyContent: 'flex-end', alignItems: 'flex-start' }}>
            <ArrowLink href="#">Instagram</ArrowLink>
            <ArrowLink href="#">LinkedIn</ArrowLink>
            <ArrowLink href="#">YouTube</ArrowLink>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 'var(--space-5)', marginTop: 'var(--space-9)', flexWrap: 'wrap' }}>
          <Marks>&copy; 2026 NOTHUMAN.</Marks>
          <Marks>India &rarr; Global</Marks>
        </div>
      </div>
      <div className="vs-wordmark-crop" aria-hidden="true">
        <span>NOTHUMAN<span style={{ color: 'var(--accent)' }}>.</span></span>
      </div>
    </footer>
  );
}

Object.assign(window, { Story, FinalCta, SiteFooter });