// Hero.jsx — premium, clean, inspired by seatconnect.com

// Small floating fan chip — one person with their team + verified mark
const FloatingFanChip = ({ name, role, initials, emoji, teamColor, style }) => (
  <div style={{
    background: 'white',
    border: '1px solid var(--line)',
    borderRadius: 16,
    padding: '10px 14px 10px 10px',
    display: 'flex', alignItems: 'center', gap: 10,
    boxShadow: '0 20px 40px -12px rgba(10, 8, 30, 0.18), 0 4px 10px -2px rgba(10, 8, 30, 0.06)',
    ...style,
  }}>
    <div style={{
      width: 40, height: 40, borderRadius: '50%',
      background: teamColor,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: 'white', fontWeight: 700, fontSize: 14,
      position: 'relative', flexShrink: 0,
    }}>
      {initials}
      <div style={{
        position: 'absolute', bottom: -2, right: -2,
        width: 16, height: 16, borderRadius: '50%',
        background: 'white',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <VerifiedBadge size={14} />
      </div>
    </div>
    <div style={{ minWidth: 0 }}>
      <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)', letterSpacing: '-0.01em', display: 'flex', alignItems: 'center', gap: 4 }}>
        {name} <span style={{ fontSize: 11 }}>{emoji}</span>
      </div>
      <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 1 }}>{role}</div>
    </div>
  </div>
);

// A little "direct ticket drop" chip (listing)
const FloatingListingChip = ({ style }) => (
  <div style={{
    background: 'var(--ink)', color: 'white',
    borderRadius: 16, padding: '14px 16px',
    display: 'flex', alignItems: 'center', gap: 14,
    boxShadow: '0 20px 40px -12px rgba(10, 8, 30, 0.28), 0 4px 10px -2px rgba(10, 8, 30, 0.1)',
    minWidth: 248,
    ...style,
  }}>
    <div style={{
      width: 38, height: 38, borderRadius: 10,
      background: 'rgba(255,255,255,0.08)',
      border: '1px solid rgba(255,255,255,0.12)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
      fontSize: 18,
    }}>🏟️</div>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 2 }}>
        Raiders vs Chiefs · Nov 23
      </div>
      <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '-0.01em' }}>
        2 seats · Sec 112 · Row 14
      </div>
      <div style={{ fontSize: 11, color: '#4ade80', marginTop: 3, fontWeight: 500 }}>● $0 buyer fees</div>
    </div>
    <div style={{ textAlign: 'right', flexShrink: 0 }}>
      <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: '-0.02em' }}>$184</div>
      <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.05em' }}>/ea</div>
    </div>
  </div>
);

// Hero announcement bar — 5 stylistic takes on "Built for fans · Launching with the Las Vegas Raiders"
const HeroAnnounce = ({ styleKey = 'chip' }) => {
  if (styleKey === 'chip') {
    // Original — single pill, live-dot, one-line copy.
    // All fans can join the app/hubs today; the MARKETPLACE (buying tickets)
    // launches Raiders-first and unlocks as fans of other teams sign up.
    return (
      <div className="chip" style={{
        marginBottom: 30,
        background: 'white',
        border: '1px solid var(--line)',
        boxShadow: '0 2px 6px rgba(10, 8, 30, 0.04)',
        padding: '6px 14px 6px 10px',
      }}>
        <span className="live-dot" />
        <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-2)', letterSpacing: '0.02em' }}>
          <span style={{ color: 'var(--accent)', fontWeight: 700 }}>All fans welcome</span> · The social marketplace for sports fans
        </span>
      </div>
    );
  }

  if (styleKey === 'split-pill') {
    // Two-tone pill — left says "ALL FANS WELCOME" (the app/hubs are open to
    // every fan today), right says the Raiders-specific marketplace story.
    return (
      <div style={{
        display: 'inline-flex', alignItems: 'stretch', marginBottom: 30,
        borderRadius: 999, overflow: 'hidden',
        boxShadow: '0 2px 8px rgba(10,8,30,0.06)',
        fontFamily: 'var(--font-mono)',
      }}>
        <div style={{
          background: '#fff',
          border: '1px solid var(--line)',
          padding: '7px 12px', fontSize: 10.5, fontWeight: 800,
          letterSpacing: '0.16em', textTransform: 'uppercase',
          color: 'var(--accent)',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: '50%',
            background: 'var(--accent)',
          }}/>
          All fans welcome
        </div>
        <div style={{
          background: '#fff',
          border: '1px solid var(--line)', borderLeft: 'none',
          padding: '7px 14px',
          fontSize: 11, fontWeight: 700, color: 'var(--ink)',
          letterSpacing: '0.04em',
          display: 'inline-flex', alignItems: 'center', gap: 7,
        }}>
          <span>The social marketplace for sports fans</span>
        </div>
      </div>
    );
  }

  if (styleKey === 'underline') {
    // No chip at all — just a small mono line above the headline. Quiet, editorial.
    return (
      <div style={{
        marginBottom: 28,
        display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap',
        fontFamily: 'var(--font-mono)', fontSize: 11,
        letterSpacing: '0.18em', textTransform: 'uppercase',
        color: 'var(--ink-3)', fontWeight: 700,
      }}>
        <span style={{
          width: 28, height: 1, background: 'var(--accent)', display: 'inline-block',
        }}/>
        <span style={{ color: 'var(--accent)' }}>All fans welcome</span>
        <span style={{ color: 'var(--ink-5)' }}>·</span>
        <span style={{ color: 'var(--ink-2)' }}>The social marketplace for sports fans</span>
      </div>
    );
  }

  if (styleKey === 'badge-stack') {
    // Small "LIVE" tag + two-line announcement. Tightly composed, a lot of info.
    return (
      <div style={{ marginBottom: 30, display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 10,
          fontWeight: 800, letterSpacing: '0.18em',
          color: '#fff', background: 'var(--accent)',
          padding: '5px 9px', borderRadius: 6,
          textTransform: 'uppercase',
        }}>Live</div>
        <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.15 }}>
          <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)', letterSpacing: '-0.005em' }}>
            <span style={{ color: 'var(--accent)' }}>All fans welcome</span> — Raiders marketplace first
          </span>
          <span style={{ fontSize: 11, color: 'var(--ink-4)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 600, marginTop: 2 }}>
            Your team’s marketplace unlocks as fans join
          </span>
        </div>
      </div>
    );
  }

  if (styleKey === 'stamp') {
    // Editorial stamp — left pirate flag in a square, right headline in serif. Feels premium/curated.
    return (
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 30,
        padding: '8px 14px 8px 8px', borderRadius: 12,
        background: 'white', border: '1px solid var(--line)',
        boxShadow: '0 2px 6px rgba(10,8,30,0.04)',
      }}>
        <div style={{
          width: 28, height: 28, borderRadius: 7,
          background: 'var(--ink)', color: '#fff',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 15,
        }}>🏴‍☠️</div>
        <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1 }}>
          <span style={{
            fontSize: 9.5, fontFamily: 'var(--font-mono)', letterSpacing: '0.18em',
            textTransform: 'uppercase', color: 'var(--accent-ink)', fontWeight: 700,
          }}>First marketplace</span>
          <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)', letterSpacing: '-0.005em', marginTop: 3 }}>
            Raiders tickets live · <span style={{ color: 'var(--accent)', fontWeight: 600 }}>all fans welcome</span>
          </span>
        </div>
      </div>
    );
  }

  return null;
};

const Hero = ({ variant = 'split', chipReveal = 'cascade', announceStyle = 'chip' }) => {
  const [scrollY, setScrollY] = React.useState(0);
  const anchorRef = React.useRef(null);

  React.useEffect(() => {
    let raf;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        setScrollY(window.scrollY);
        raf = null;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => {
      window.removeEventListener('scroll', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  // Progressive reveal: each chip has its own scroll range.
  // As scrollY moves through [start, end], the chip creeps out from
  // behind the phone to its final position. Scroll back up and it
  // retreats — so the hero feels alive and responsive.
  const RevealChip = ({ children, from = 'left', scrollStart, scrollEnd, floatAnim, style }) => {
    const raw = (scrollY - scrollStart) / (scrollEnd - scrollStart);
    const progress = Math.max(0, Math.min(1, raw));
    // soft ease-out so it accelerates then settles
    const eased = 1 - Math.pow(1 - progress, 2.5);

    const tuckX = from === 'left' ? 100 : -100;
    const tx = tuckX * (1 - eased);
    const ty = 20 * (1 - eased);
    const scale = 0.7 + 0.3 * eased;
    const opacity = eased;

    // Ambient float only kicks in once the chip has fully emerged
    const fullyOut = progress >= 0.98;

    return (
      <div className="sc-hero-chip" style={{
        position: 'absolute',
        zIndex: progress > 0.3 ? 3 : 1,
        transform: `translate(${tx}px, ${ty}px) scale(${scale})`,
        opacity,
        pointerEvents: fullyOut ? 'auto' : 'none',
        willChange: 'transform, opacity',
        ...style,
      }}>
        <div style={{
          animation: fullyOut ? floatAnim : 'none',
          animationFillMode: 'both',
        }}>
          {children}
        </div>
      </div>
    );
  };

  // Build scroll ranges per variant. All ranges are in pixels of scrollY.
  // 'creep':    all chips share the same 0→400 range — they creep out together as you scroll
  // 'cascade':  chips stagger — first starts at 40, next at 120, etc. Feels like unveiling
  // 'pop':      everything appears between 40 and 100 — fast snap reveal
  const rangesByStyle = {
    creep:   { diego: [30, 380],  jesse: [30, 380],  ashley: [30, 380],  listing: [30, 380] },
    cascade: { diego: [30, 220],  jesse: [80, 280],  listing: [140, 340], ashley: [200, 400] },
    pop:     { diego: [40, 120],  jesse: [40, 120],  ashley: [40, 120],  listing: [40, 120] },
  };
  const ranges = rangesByStyle[chipReveal] || rangesByStyle.cascade;

  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      paddingTop: 64, paddingBottom: 110,
      background: 'linear-gradient(180deg, #F7F5FF 0%, #EEEAF5 55%, var(--bg) 100%)',
    }}>
      {/* decorative purple glow, top-right */}
      <div style={{
        position: 'absolute', top: -240, right: -180, width: 680, height: 680,
        borderRadius: '50%', zIndex: 0,
        background: 'radial-gradient(circle at center, rgba(107,61,232,0.22), rgba(107,61,232,0.05) 55%, transparent 70%)',
        filter: 'blur(12px)',
      }}/>
      {/* subtle grid/dot texture */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 0, opacity: 0.35,
        backgroundImage: 'radial-gradient(circle, rgba(10,8,30,0.08) 1px, transparent 1.2px)',
        backgroundSize: '28px 28px',
        maskImage: 'radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%)',
      }}/>

      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div className="sc-hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
          {/* LEFT — COPY */}
          <div className="sc-hero-copy">
            <HeroAnnounce styleKey={announceStyle} />

            <h1 className="display" style={{
              fontSize: 'clamp(52px, 7.2vw, 96px)',
              margin: 0, color: 'var(--ink)',
              lineHeight: 0.98, letterSpacing: '-0.035em',
            }}>
              Tickets, from<br/>
              fans you{' '}
              <em style={{ color: 'var(--accent)', fontStyle: 'italic', whiteSpace: 'nowrap' }}>trust</em>.
            </h1>

            <p style={{
              fontSize: 20, color: 'var(--ink-2)', marginTop: 28, maxWidth: 520,
              lineHeight: 1.45, fontWeight: 600, letterSpacing: '-0.01em',
            }}>
              Buy tickets from real fans.<br/>
              Talk with your fanbase.<br/>
              <span style={{ color: 'var(--accent)' }}>No middlemen. No buyer fees.</span>
            </p>

            <div style={{ display: 'flex', gap: 12, marginTop: 38, flexWrap: 'wrap' }}>
              <AppStoreBadge variant="apple" />
              <AppStoreBadge variant="play" />
            </div>

            {/* Stats row — purple impact numbers */}
            <div className="sc-hero-stats" style={{
              display: 'flex', gap: 36, marginTop: 48, alignItems: 'flex-start',
              paddingTop: 28, borderTop: '1px solid var(--line)',
            }}>
              <div>
                <div className="sc-stat-num" style={{ fontSize: 44, fontFamily: 'var(--font-impact)', fontWeight: 900, color: 'var(--ink)', lineHeight: 1, letterSpacing: '-0.03em' }}>$0</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 8, fontWeight: 500, letterSpacing: '0.01em' }}>Buyer fees. Ever.</div>
              </div>
              <div className="sc-stat-divider" style={{ width: 1, height: 48, background: 'var(--line)' }}/>
              <div>
                <div className="sc-stat-num" style={{ fontSize: 44, fontFamily: 'var(--font-impact)', fontWeight: 900, color: 'var(--ink)', lineHeight: 1, letterSpacing: '-0.03em' }}>100%</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 8, fontWeight: 500, letterSpacing: '0.01em' }}>Verified fans</div>
              </div>
              <div className="sc-stat-divider" style={{ width: 1, height: 48, background: 'var(--line)' }}/>
              <div>
                <div className="sc-stat-num" style={{ fontSize: 44, fontFamily: 'var(--font-impact)', fontWeight: 900, color: 'var(--ink)', lineHeight: 1, letterSpacing: '-0.03em' }}>365</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 8, fontWeight: 500, letterSpacing: '0.01em' }}>Days of fandom</div>
              </div>
            </div>
          </div>

          {/* RIGHT — PHONE ANCHOR */}
          <div ref={anchorRef} className="sc-hero-stage" style={{
            position: 'relative',
            height: 740,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            {/* Soft platform / shadow beneath phone */}
            <div style={{
              position: 'absolute',
              bottom: 40, left: '50%', transform: 'translateX(-50%)',
              width: 360, height: 60,
              background: 'radial-gradient(ellipse, rgba(74,37,184,0.28), transparent 70%)',
              filter: 'blur(14px)',
              zIndex: 0,
            }}/>

            {/* Phone, upright (no tilt — premium / editorial) */}
            <div style={{ position: 'relative', zIndex: 2 }}>
              <PhoneFrame width={320}>
                <HeroAppUI />
              </PhoneFrame>
            </div>

            {/* Floating chip — fan card, top-left */}
            <RevealChip from="left" scrollStart={ranges.diego[0]} scrollEnd={ranges.diego[1]} floatAnim="floaty 6s ease-in-out infinite"
              style={{ left: -40, top: 70 }}>
              <FloatingFanChip
                name="Diego"
                role="Season ticket holder"
                initials="DM"
                emoji="🏈"
                teamColor="#0A0A0A"
              />
            </RevealChip>

            {/* Floating chip — fan card, mid-left lower */}
            <RevealChip from="left" scrollStart={ranges.ashley[0]} scrollEnd={ranges.ashley[1]} floatAnim="floaty 7s ease-in-out infinite 1.5s"
              style={{ left: -20, bottom: 160 }}>
              <FloatingFanChip
                name="Ashley"
                role="Quick Seller"
                initials="AS"
                emoji="⚡"
                teamColor="#6B3DE8"
              />
            </RevealChip>

            {/* Floating listing chip, bottom-right */}
            <RevealChip from="right" scrollStart={ranges.listing[0]} scrollEnd={ranges.listing[1]} floatAnim="floaty2 7.5s ease-in-out infinite 0.5s"
              style={{ right: -50, bottom: 110 }}>
              <FloatingListingChip />
            </RevealChip>

            {/* Floating chip — Jesse top-right */}
            <RevealChip from="right" scrollStart={ranges.jesse[0]} scrollEnd={ranges.jesse[1]} floatAnim="floaty2 6.5s ease-in-out infinite 0.8s"
              style={{ right: -16, top: 60 }}>
              <FloatingFanChip
                name="Jesse"
                role="Raiders Suite Owner"
                initials="JR"
                emoji="👑"
                teamColor="#C0A24B"
              />
            </RevealChip>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes floaty {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-10px); }
        }
        @keyframes floaty2 {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-8px); }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { Hero });