/* global React, Countdown, Reveal, useWindowWidth */
const { motion: _hfm } = window.Motion || {};
const _hReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

/* ── Sharp diagonal geometric shapes (Raycast-style) ──────────── */
const HeroShapes = () => {
  const SLASHES = [
    { left: '44%', width: 175, opacity: 0.35, delay: '0s' },
    { left: '52%', width: 155, opacity: 0.55, delay: '-24s' },
    { left: '61%', width: 195, opacity: 0.72, delay: '-48s' },
    { left: '71%', width: 140, opacity: 0.86, delay: '-72s' },
    { left: '80%', width: 420, opacity: 0.96, delay: '-96s' },
  ];

  return (
    <div aria-hidden style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
      {/* Deep coral radial glow behind the shapes */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 55% 70% at 78% 50%, rgba(255,107,107,0.18) 0%, transparent 70%)',
      }} />

      {/* Parallelogram slash shapes */}
      {SLASHES.map(({ left, width, opacity, delay }, i) => (
        <div key={i} style={{
          position: 'absolute',
          top: '-30%', bottom: '-30%',
          left, width,
          background: 'var(--accent-gradient)',
          transform: 'skewX(-12deg)',
          opacity,
          animation: _hReduced ? 'none' : 'geoSlash 120s ease-in-out infinite',
          animationDelay: delay,
        }} />
      ))}

      {/* Left blend — keeps text side dark, shapes fade in from left edge */}
      <div style={{
        position: 'absolute', top: 0, bottom: 0, left: 0, right: 0,
        background: 'linear-gradient(to right, var(--bg) 30%, rgba(8,8,8,0.82) 43%, rgba(8,8,8,0.28) 58%, transparent 68%)',
      }} />

      {/* Bottom fade into page */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, height: '40%',
        background: 'linear-gradient(to bottom, transparent, var(--bg))',
      }} />
    </div>
  );
};

/* ── Announce pill ──────────────────────────────────────────── */
const AnnouncePill = () => (
  <div style={{
    display: 'inline-flex', alignItems: 'center', gap: 8,
    padding: '5px 14px',
    background: 'rgba(255,107,107,0.08)',
    border: '1px solid rgba(255,107,107,0.35)',
    borderRadius: 999, color: 'rgba(255,255,255,0.7)',
    fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.04em',
  }}>
    <span style={{
      width: 6, height: 6, borderRadius: '50%',
      background: 'var(--accent)',
      boxShadow: '0 0 8px rgba(255,107,107,0.7)',
    }} />
    Early access · 1 July 2026
  </div>
);

/* ── Main stacked hero ──────────────────────────────────────── */
const HeroStacked = () => {
  const ww = useWindowWidth();
  const isMobile = ww < 768;

  const words = 'Flashcards. Finally done right.'.split(' ');
  const wordBase = 0.15;
  const wordStagger = 0.08;
  const numWords = words.length;
  const subtextDelay = wordBase + (numWords - 1) * wordStagger + 0.3;
  const ctaDelay = subtextDelay + 0.4;
  const metaDelay = ctaDelay + 0.18;

  const anim = (delay) => _hReduced ? { opacity: 1 } : {
    animation: `heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) ${delay}s both`,
  };

  return (
    <section className="hero-stacked" style={{
      position: 'relative',
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      overflow: 'hidden',
    }}>
      {!isMobile && <HeroShapes />}

      {/* Page-width wrapper */}
      <div style={{
        position: 'relative', zIndex: 1,
        maxWidth: 1200, width: '100%',
        margin: '0 auto',
        padding: isMobile ? '120px 24px 64px' : '120px 56px 80px',
        boxSizing: 'border-box',
      }}>
        {/* Content constrained to left side */}
        <div style={{
          display: 'flex', flexDirection: 'column',
          alignItems: isMobile ? 'center' : 'flex-start',
          gap: 28,
          textAlign: isMobile ? 'center' : 'left',
          maxWidth: isMobile ? '100%' : 560,
        }}>
          {/* Badge */}
          <div style={anim(0.05)}><AnnouncePill /></div>

          {/* Headline — word by word stagger */}
          <h1 style={{
            margin: 0,
            fontFamily: 'var(--font-display)',
            fontWeight: 600,
            fontSize: 'clamp(40px, 5.5vw, 58px)',
            lineHeight: 1.08,
            letterSpacing: '-0.03em',
            color: 'var(--fg)',
            textWrap: 'balance',
          }}>
            {words.map((word, i) => (
              <span key={i} style={{
                display: 'inline-block',
                marginRight: i < words.length - 1 ? '0.28em' : 0,
                ...(
                  _hReduced
                    ? { opacity: 1 }
                    : { animation: `heroWordIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) ${wordBase + i * wordStagger}s both` }
                ),
              }}>{word}</span>
            ))}
          </h1>

          {/* Subheadline */}
          <p style={{
            margin: 0, maxWidth: 420,
            fontSize: 17, lineHeight: 1.7,
            color: 'var(--fg-2)', letterSpacing: '-0.011em',
            textWrap: 'pretty',
            ...anim(subtextDelay),
          }}>
            A collection of powerful study tools within a single app. Fast, focused, and reliable.
          </p>

          {/* CTA row */}
          <div style={{
            display: 'flex', gap: 10, flexWrap: 'wrap',
            justifyContent: isMobile ? 'center' : 'flex-start',
            ...anim(ctaDelay),
          }}>
            <a href="waitlist.html"
              onMouseEnter={(e) => { e.currentTarget.style.boxShadow = '0 0 24px rgba(255,107,107,0.35)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.boxShadow = 'none'; }}
              style={{
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                height: 46, padding: '0 26px',
                background: 'var(--accent-gradient)',
                color: '#fff',
                borderRadius: 999,
                textDecoration: 'none',
                fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 600,
                letterSpacing: '-0.011em',
                border: 'none',
                transition: 'box-shadow 0.2s ease',
                whiteSpace: 'nowrap',
              }}
            >Join the Waitlist</a>
            <a href="#features"
              onMouseEnter={(e) => {
                e.currentTarget.style.color = 'var(--fg)';
                e.currentTarget.style.borderColor = 'transparent';
                e.currentTarget.style.backgroundImage = 'linear-gradient(var(--bg), var(--bg)), var(--accent-cool-gradient)';
                e.currentTarget.style.backgroundOrigin = 'padding-box, border-box';
                e.currentTarget.style.backgroundClip = 'padding-box, border-box';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.color = 'var(--fg-2)';
                e.currentTarget.style.backgroundImage = 'none';
                e.currentTarget.style.backgroundOrigin = '';
                e.currentTarget.style.backgroundClip = '';
                e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)';
              }}
              style={{
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                height: 46, padding: '0 26px',
                background: 'transparent',
                color: 'var(--fg-2)',
                borderRadius: 999,
                border: '1px solid rgba(255,255,255,0.1)',
                textDecoration: 'none',
                fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 500,
                letterSpacing: '-0.011em',
                transition: 'color 0.15s ease, border-color 0.15s ease',
                whiteSpace: 'nowrap',
              }}
            >See Features</a>
          </div>

          {/* Countdown */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap',
            justifyContent: isMobile ? 'center' : 'flex-start',
            ...anim(metaDelay),
          }}>
            <Countdown variant="inline" />
          </div>
        </div>
      </div>
    </section>
  );
};

/* ── Split hero (Tweaks panel variant) ──────────────────────── */
const HeroSplit = () => (
  <section style={{
    position: 'relative', overflow: 'hidden',
    padding: '100px 32px 60px',
    maxWidth: 1280, margin: '0 auto',
  }}>
    <HeroShapes />
    <div className="hero-split-grid" style={{
      position: 'relative', zIndex: 1,
      display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 40, alignItems: 'center',
    }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        <Reveal><AnnouncePill /></Reveal>
        <Reveal delay={60}>
          <h1 style={{
            margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 'clamp(36px, 5.5vw, 52px)', lineHeight: 1.1, letterSpacing: '-0.03em', color: 'var(--fg)',
          }}>Flashcards. Finally done right.</h1>
        </Reveal>
        <Reveal delay={120}>
          <p style={{ margin: 0, maxWidth: 480, fontSize: 17, lineHeight: 1.7, color: 'var(--fg-2)', letterSpacing: '-0.011em' }}>
            A collection of powerful study tools within a single app. Fast, focused, and reliable.
          </p>
        </Reveal>
        <Reveal delay={180}>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <a href="waitlist.html"
              onMouseEnter={(e) => { e.currentTarget.style.boxShadow = '0 0 24px rgba(255,107,107,0.35)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.boxShadow = 'none'; }}
              style={{
                display: 'inline-flex', alignItems: 'center', height: 44, padding: '0 22px',
                background: 'var(--accent-gradient)', color: '#fff', borderRadius: 999,
                textDecoration: 'none', fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 600,
                letterSpacing: '-0.011em', transition: 'box-shadow 0.2s ease',
              }}
            >Join the Waitlist</a>
            <a href="#features"
              onMouseEnter={(e) => {
                e.currentTarget.style.color = 'var(--fg)';
                e.currentTarget.style.borderColor = 'transparent';
                e.currentTarget.style.backgroundImage = 'linear-gradient(var(--bg), var(--bg)), var(--accent-cool-gradient)';
                e.currentTarget.style.backgroundOrigin = 'padding-box, border-box';
                e.currentTarget.style.backgroundClip = 'padding-box, border-box';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.color = 'var(--fg-2)';
                e.currentTarget.style.backgroundImage = 'none';
                e.currentTarget.style.backgroundOrigin = '';
                e.currentTarget.style.backgroundClip = '';
                e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)';
              }}
              style={{
                display: 'inline-flex', alignItems: 'center', height: 44, padding: '0 22px',
                background: 'transparent', color: 'var(--fg-2)', borderRadius: 999,
                border: '1px solid rgba(255,255,255,0.1)', textDecoration: 'none',
                fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 500,
                letterSpacing: '-0.011em', transition: 'color 0.15s ease, border-color 0.15s ease',
              }}
            >See Features</a>
          </div>
        </Reveal>
      </div>
      <Reveal delay={200}>
        <div style={{
          aspectRatio: '4/3', background: 'var(--surface)',
          border: '1px solid var(--border-strong)', borderRadius: 16, padding: 24,
          display: 'flex', flexDirection: 'column', gap: 14, transform: 'rotate(0.4deg)',
        }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Card · Front</div>
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--surface-2)', borderRadius: 12, padding: 20, border: '1px solid var(--border)' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(18px, 2.4vw, 28px)', letterSpacing: '-0.025em', color: 'var(--fg)', textAlign: 'center' }}>What is photosynthesis?</div>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

const Hero = ({ layout = 'stacked' }) => {
  if (layout === 'split') return <HeroSplit />;
  return <HeroStacked />;
};

const NumbersStrip = () => null;

Object.assign(window, { Hero, HeroStacked, HeroSplit, AnnouncePill, NumbersStrip });