/* eslint-disable no-undef */
// HERO — wow screen. Inspired by lavender bubble-tea reference but
// strictly on-brand (rojo / seasalt / smoky black). Big 3D burger,
// flowing curve, kinetic typography, animated stats.

function HeroScreen() {
  const words = ['JUST.', 'WHAT YOU', 'NEED.'];
  return (
    <div style={{
      background: 'var(--rojo)', color: 'var(--black)',
      position: 'absolute', inset: 0,
      display: 'flex', flexDirection: 'column',
      overflow: 'hidden',
    }}>
      {/* subtle grain — repeating diagonal lines for texture */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.04, pointerEvents: 'none',
        backgroundImage: 'repeating-linear-gradient(135deg, #0A0505 0 1px, transparent 1px 9px)',
      }}/>

      {/* status pill at very top */}
      <div style={{ paddingTop: 4, position: 'relative' }}>
        <ConceptTopBar fg="#0A0505" />
      </div>

      {/* mono label */}
      <div style={{ padding: '14px 22px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'relative' }}>
        <div className="tb-mono" style={{ fontSize: 9, letterSpacing: '0.14em' }}>
          001 · CLASSIC · BESTSELLER
        </div>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '4px 8px', borderRadius: 99,
          background: 'rgba(10,5,5,0.10)',
        }}>
          <span style={{
            width: 5, height: 5, borderRadius: 99, background: 'var(--black)',
            animation: 'tb-pulse 1.8s ease-in-out infinite',
          }}/>
          <span className="tb-mono" style={{ fontSize: 8 }}>LIVE</span>
        </div>
      </div>

      {/* HEADLINE */}
      <div style={{ padding: '14px 22px 0', position: 'relative' }}>
        {words.map((w, i) => (
          <div key={i} className="tb-display" style={{
            fontSize: 42, lineHeight: 1.02, letterSpacing: '-0.02em',
          }}>{w}</div>
        ))}
      </div>

      {/* HERO STAGE — flex:1 so it fills remaining vertical space */}
      <div style={{ position: 'relative', flex: 1, minHeight: 0, margin: '-4px 0 0' }}>
        {/* big curvy white path */}
        <svg viewBox="0 0 400 360" preserveAspectRatio="none"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          <path
            d="M -20 250 C 90 320, 130 110, 220 170 S 380 280, 460 200"
            fill="none" stroke="#FAFAFA" strokeWidth="3" strokeLinecap="round"
            opacity="0.95"/>
          <path
            d="M -20 280 C 110 340, 150 150, 240 200 S 380 300, 460 230"
            fill="none" stroke="#FAFAFA" strokeWidth="1.2" strokeLinecap="round"
            opacity="0.35" strokeDasharray="4 6"/>
        </svg>

        {/* floating ingredient placeholders */}
        <div style={{
          position: 'absolute', top: 24, left: 28,
          animation: 'tb-float 5s ease-in-out infinite',
        }}>
          <div className="tb-placeholder" data-label="SAUCE"
            style={{ width: 48, height: 48, borderRadius: 99,
              boxShadow: '0 6px 14px rgba(10,5,5,0.18)' }}/>
        </div>
        <div style={{
          position: 'absolute', top: 56, right: 26,
          animation: 'tb-float 6s ease-in-out -1.5s infinite',
        }}>
          <div className="tb-placeholder" data-label="CHEESE"
            style={{ width: 38, height: 38, borderRadius: 99,
              boxShadow: '0 6px 14px rgba(10,5,5,0.18)' }}/>
        </div>
        <div style={{
          position: 'absolute', bottom: 26, left: 24,
          animation: 'tb-float 5.5s ease-in-out -2.8s infinite',
        }}>
          <div className="tb-placeholder" data-label="BUN"
            style={{ width: 32, height: 32, borderRadius: 99,
              boxShadow: '0 6px 14px rgba(10,5,5,0.18)' }}/>
        </div>

        {/* HERO BURGER — real product photo (bg removed), big & floating */}
        <div style={{
          position: 'absolute', left: '50%', top: '50%',
          transform: 'translate(-50%, -50%)',
        }}>
          <div style={{
            animation: 'tb-bun-bob 4.5s ease-in-out infinite',
            filter: 'drop-shadow(0 24px 30px rgba(0,0,0,0.4)) drop-shadow(0 8px 12px rgba(0,0,0,0.25))',
          }}>
            <img src="assets/photos/burger-classic-cut.png" alt="Classic smash burger"
              style={{
                width: 280, height: 280, objectFit: 'contain',
                display: 'block',
              }}/>
          </div>
        </div>

        {/* side carousel arrows */}
        <div style={{
          position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)',
        }}>
          <RoundArrow direction="left"/>
        </div>
        <div style={{
          position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)',
        }}>
          <RoundArrow direction="right"/>
        </div>

        {/* dots indicator */}
        <div style={{
          position: 'absolute', bottom: 8, left: '50%', transform: 'translateX(-50%)',
          display: 'flex', gap: 6,
        }}>
          {[0,1,2,3].map(i => (
            <div key={i} style={{
              width: i === 0 ? 20 : 6, height: 6, borderRadius: 99,
              background: i === 0 ? 'var(--black)' : 'rgba(10,5,5,0.25)',
              transition: 'width 0.3s',
            }}/>
          ))}
        </div>
      </div>

      {/* STATS row */}
      <div style={{
        padding: '14px 22px 0',
        display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0,
        position: 'relative', zIndex: 2,
      }}>
        <StatTile value="220" unit="G" label="BLACK ANGUS"/>
        <div style={{ borderLeft: '1px solid rgba(10,5,5,0.18)', borderRight: '1px solid rgba(10,5,5,0.18)', padding: '0 10px' }}>
          <StatTile value="3" unit="MIN" label="ON THE GRILL"/>
        </div>
        <StatTile value="100" unit="%" label="HALAL · UZB" align="right"/>
      </div>

      {/* CTA row */}
      <div style={{
        padding: '16px 14px 50px',
        display: 'flex', alignItems: 'center', gap: 10,
        position: 'relative', zIndex: 3,
      }}>
        <button style={{
          all: 'unset', cursor: 'pointer',
          width: 56, height: 56, borderRadius: 99,
          background: '#0A0505', color: '#FAFAFA',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none">
            <path d="M2 12 L12 2 M4 2 H12 V10"/>
          </svg>
        </button>
        <div style={{ flex: 1 }}>
          <CTAPill label="ЗАКАЗАТЬ" price="49 000 UZS"/>
        </div>
      </div>
    </div>
  );
}

window.HeroScreen = HeroScreen;