/* OnSumn v2 — Glass Hero with Split-Flap Display */

/* ── Bay Area Pro Sports — 9 teams, official brand hex ── */
const BAY_TEAMS = [
  { name: 'OnSumn.',    bg: '#FF4F00', color: '#FFFFFF', glow: '0 0 6px rgba(255,255,255,0.3)' },
  { name: '49ers.',     bg: '#AA0000', color: '#B3995D', glow: '0 0 6px rgba(179,153,93,0.4)' },
  { name: 'Giants.',    bg: '#27251F', color: '#FD5A1E', glow: '0 0 8px rgba(253,90,30,0.4)' },
  { name: 'Athletics.', bg: '#003831', color: '#EFB21E', glow: '0 0 6px rgba(239,178,30,0.4)' },
  { name: 'Warriors.',  bg: '#1D428A', color: '#FFC72C', glow: '0 0 6px rgba(255,199,44,0.4)' },
  { name: 'Valkyries.', bg: '#4833B3', color: '#F3EEE3', glow: '0 0 8px rgba(72,51,179,0.5)' },
  { name: 'Sharks.',    bg: '#006D75', color: '#FFFFFF', glow: '0 0 6px rgba(255,255,255,0.3)' },
  { name: 'Quakes.',    bg: '#003DA6', color: '#FFFFFF', glow: '0 0 6px rgba(255,255,255,0.3)' },
  { name: 'Bay FC.',    bg: '#006FB9', color: '#FFFFFF', glow: '0 0 6px rgba(255,255,255,0.3)' },
  { name: 'Roots.',     bg: '#00573F', color: '#E3A82B', glow: '0 0 6px rgba(227,168,43,0.4)' },
];

const MAX_FLAP_LEN = Math.max(...BAY_TEAMS.map(t => t.name.length));

/* ── Single flap character cell ── */
function FlapChar({ char, position, color, glow, bg }) {
  const [display, setDisplay] = React.useState(char);
  const [displayColor, setDisplayColor] = React.useState(color);
  const [displayGlow, setDisplayGlow] = React.useState(glow);
  const [displayBg, setDisplayBg] = React.useState(bg);
  const [phase, setPhase] = React.useState('idle');
  const prev = React.useRef(char);

  React.useEffect(() => {
    if (char !== prev.current) {
      const d = position * 45;
      const t1 = setTimeout(() => setPhase('out'), d);
      const t2 = setTimeout(() => {
        setDisplay(char);
        setDisplayColor(color);
        setDisplayGlow(glow);
        setDisplayBg(bg);
        setPhase('in');
      }, d + 130);
      const t3 = setTimeout(() => { setPhase('idle'); prev.current = char; }, d + 300);
      return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); };
    } else {
      setDisplayColor(color);
      setDisplayGlow(glow);
      setDisplayBg(bg);
    }
  }, [char, position, color, glow, bg]);

  const isSpace = display.trim() === '';

  return React.createElement('span', {
    className: 'flap-cell',
    style: {
      display: 'inline-block',
      position: 'relative',
      width: isSpace ? '0.4em' : display === '.' ? '0.45em' : (display === 'W' || display === 'M') ? '1.08em' : '0.88em',
      height: '1.2em',
      lineHeight: '1.2em',
      textAlign: 'center',
      fontStyle: 'normal',
      fontWeight: display === 'W' || display === 'M' ? 600 : 800,
      background: isSpace ? 'transparent' : displayBg,
      color: displayColor,
      textShadow: isSpace ? 'none' : displayGlow,
      borderRadius: 4,
      margin: '0 3px',
      transform: phase === 'out' ? 'perspective(400px) rotateX(-90deg)'
               : phase === 'in'  ? 'perspective(400px) rotateX(0deg)'
               : 'none',
      transition: phase === 'idle' ? 'background 0.4s, color 0.4s, text-shadow 0.4s' : 'transform 0.13s ease-in-out',
      transformOrigin: '50% 50%',
      boxShadow: isSpace ? 'none' : '0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)',
      overflow: 'hidden',
    },
  },
    display,
    /* Split line — the signature Solari board look */
    !isSpace && React.createElement('span', {
      style: {
        position: 'absolute', left: 0, right: 0, top: '50%',
        height: 1,
        background: 'rgba(0,0,0,0.25)',
        pointerEvents: 'none',
      },
    })
  );
}

/* ── Split-flap display — cycles through team names with brand colors ── */
function SplitFlapDisplay({ darkMode }) {
  const [index, setIndex] = React.useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setIndex(i => (i + 1) % BAY_TEAMS.length);
    }, 2800);
    return () => clearInterval(timer);
  }, []);

  const team = BAY_TEAMS[index];
  const padded = team.name.padEnd(MAX_FLAP_LEN);

  return (
    <span style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: 1,
      padding: '6px 10px 8px',
      borderRadius: 8,
      background: darkMode ? 'rgba(0,0,0,0.35)' : 'rgba(0,0,0,0.06)',
      verticalAlign: 'baseline',
    }}>
      {padded.split('').map((c, i) => (
        <FlapChar
          key={i}
          char={c}
          position={i}
          color={team.color}
          glow={team.glow}
          bg={team.bg}
        />
      ))}
    </span>
  );
}

/* ── Hero Section ── */
function HeroSection({ darkMode, radius }) {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (email.includes('@')) {
      setSubmitted(true);
      setTimeout(() => setSubmitted(false), 3000);
      setEmail('');
    }
  };

  const textColor = darkMode ? '#fff' : '#0A0A0A';

  return (
    <section style={{
      position: 'relative', minHeight: '94vh',
      display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
      padding: '120px 32px 80px', textAlign: 'center',
      background: darkMode
        ? 'radial-gradient(ellipse at 30% 20%, rgba(213,120,0,0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(255,79,0,0.05) 0%, transparent 50%), #0A0A0A'
        : 'radial-gradient(ellipse at 30% 20%, rgba(213,120,0,0.06) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(255,79,0,0.04) 0%, transparent 50%), #F5F5F5',
      overflow: 'hidden',
    }}>
      {/* Ambient glow orbs */}
      <div style={{
        position: 'absolute', top: '-10%', left: '-5%',
        width: 400, height: 400, borderRadius: '50%',
        background: darkMode ? 'rgba(206,128,73,0.12)' : 'rgba(206,128,73,0.08)',
        filter: 'blur(100px)',
        mixBlendMode: darkMode ? 'color-dodge' : 'multiply',
      }} />
      <div style={{
        position: 'absolute', bottom: '5%', right: '-5%',
        width: 350, height: 350, borderRadius: '50%',
        background: darkMode ? 'rgba(255,79,0,0.08)' : 'rgba(255,79,0,0.05)',
        filter: 'blur(120px)',
        mixBlendMode: darkMode ? 'color-dodge' : 'multiply',
      }} />

      <div style={{ position: 'relative', zIndex: 2, maxWidth: 780 }}>
        {/* Ticker in glass pill */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          ...glassStyle(darkMode, 'btn'),
          border: darkMode ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(0,0,0,0.06)',
          borderRadius: 100,
          padding: '8px 20px', marginBottom: 32,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: '50%',
            background: 'var(--international-orange)',
            boxShadow: '0 0 8px var(--international-orange)',
          }} />
          <span style={{
            fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700,
            letterSpacing: '0.1em', textTransform: 'uppercase',
            color: darkMode ? 'var(--amber-gold-light)' : 'var(--amber-gold)',
          }}>LIVE EVENTS · CULTURE · BAY AREA</span>
        </div>

        {/* Headline with split-flap */}
        <h1 style={{
          fontFamily: 'var(--font-display)', fontSize: 'clamp(42px, 6.5vw, 80px)',
          fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.03em',
          color: textColor, marginBottom: 28,
        }}>
          The Bay Stay{' '}
          <SplitFlapDisplay darkMode={darkMode} />
        </h1>

        {/* Sub — increased contrast in light mode */}
        <p style={{
          fontFamily: 'var(--font-body)', fontSize: 18, fontWeight: 400,
          lineHeight: '28px',
          color: darkMode ? 'rgba(255,255,255,0.55)' : 'rgba(0,0,0,0.72)',
          maxWidth: 520, margin: '0 auto 40px',
        }}>
          Live music, pop-ups, art, farmers markets, food, nightlife, and card shows — everything worth pulling up to across the Bay.
        </p>

        {/* Glass email form */}
        <form onSubmit={handleSubmit} style={{
          display: 'flex', maxWidth: 460, margin: '0 auto',
          ...glassStyle(darkMode, 'panel'),
          borderRadius: radius,
          border: darkMode ? '1px solid rgba(255,255,255,0.1)' : '1px solid rgba(0,0,0,0.06)',
          padding: 4, overflow: 'hidden',
        }}>
          <input
            type="email" value={email} onChange={e => setEmail(e.target.value)}
            placeholder="Enter your email"
            style={{
              flex: 1, padding: '14px 20px',
              border: 'none', background: 'transparent',
              color: textColor,
              fontFamily: 'var(--font-body)', fontSize: 14, outline: 'none',
            }}
          />
          <button type="submit" style={{
            padding: '14px 28px', borderRadius: Math.max(radius - 4, 0),
            background: submitted ? 'var(--eucalyptus-green)' : 'var(--international-orange)',
            color: '#fff', border: 'none',
            fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 700,
            letterSpacing: '0.03em', cursor: 'pointer',
            transition: 'background 0.3s, box-shadow 0.3s',
            whiteSpace: 'nowrap',
          }}
          onMouseEnter={e => { if(!submitted) e.target.style.boxShadow='0 4px 16px rgba(255,79,0,0.35)'; }}
          onMouseLeave={e => e.target.style.boxShadow='none'}
          >
            {submitted ? '✓ You\'re On' : 'Put Me On'}
          </button>
        </form>

        {/* Stats in glass pills */}
        <div style={{
          display: 'flex', justifyContent: 'center', gap: 16, marginTop: 48, flexWrap: 'wrap',
        }}>
          {[
            ['2,400+', 'Events listed'],
            ['15K+', 'Bay locals'],
            ['6', 'Cities covered'],
          ].map(([num, label]) => (
            <div key={label} style={{
              ...glassStyle(darkMode, 'btn'),
              border: darkMode ? '1px solid rgba(255,255,255,0.06)' : '1px solid rgba(0,0,0,0.05)',
              borderRadius: radius, padding: '12px 24px',
              textAlign: 'center', minWidth: 120,
            }}>
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 800,
                color: textColor, letterSpacing: '-0.02em',
              }}>{num}</div>
              <div style={{
                fontFamily: 'var(--font-body)', fontSize: 10, fontWeight: 500,
                color: darkMode ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.35)',
                textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 2,
              }}>{label}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Scroll hint */}
      <div style={{
        position: 'absolute', bottom: 32, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
        animation: 'heroFloat 2.5s ease-in-out infinite',
      }}>
        <div style={{
          fontFamily: 'var(--font-body)', fontSize: 10, fontWeight: 600,
          letterSpacing: '0.1em', textTransform: 'uppercase',
          color: darkMode ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.2)',
        }}>WHAT'S GOOD</div>
        <div style={{
          width: 1, height: 20,
          background: darkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
        }} />
      </div>
    </section>
  );
}
window.HeroSection = HeroSection;