// Hero — Marriott Bonvoy aesthetic (white + black + Bonvoy orange)

function ScreenHero({ onEnter, tweaks = {} }) {
  const [pressed, setPressed] = React.useState(false);
  const [showHow, setShowHow] = React.useState(false);
  const ctaCopy = tweaks.ctaCopy || 'Tap To Win';
  const variant = tweaks.headlineVariant || 'primary';
  const handleEnter = () => {
    setShowHow(true);
  };
  const closeAndStart = () => {
    setShowHow(false);
    onEnter?.();
  };

  const headlines = {
    primary: (<>
      <span style={{ display: 'block' }}>WIN A <span style={{ color: LUX.gold }}>VACATION.</span></span>
      <span style={{ display: 'block' }}>DRINK <span style={{ color: LUX.gold }}>WATER.</span></span>
    </>),
    can: (<>
      <span style={{ display: 'block' }}>FROM <span style={{ color: LUX.gold }}>CAN</span></span>
      <span style={{ display: 'block' }}>TO <span style={{ color: LUX.gold }}>SUITE.</span></span>
    </>),
    primal: (<>
      <span style={{ display: 'block' }}>STAY</span>
      <span style={{ display: 'block', color: LUX.gold }}>HYDRATED.</span>
    </>),
  };

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: LUX.cream,
      overflow: 'hidden', color: LUX.navy,
      display: 'flex', flexDirection: 'column',
    }}>
      {/* Soft warm wash */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at 75% 30%, rgba(246,133,34,0.07), transparent 60%)`,
        pointerEvents: 'none',
      }}/>

      {/* Context strip */}
      <div style={{ position: 'relative', zIndex: 2, padding: '54px 22px 0 22px' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          fontFamily: 'Inter, sans-serif', fontSize: 10,
          letterSpacing: 2.4, textTransform: 'uppercase',
          color: LUX.gold, fontWeight: 700,
        }}>
          <span style={{ width: 5, height: 5, borderRadius: '50%', background: LUX.gold }}/>
          <span>APE WATER</span>
          <span style={{ opacity: 0.5 }}>×</span>
          <BonvoyMark color={LUX.gold} size={11} style={{ letterSpacing: 0.4 }}/>
        </div>
      </div>

      {/* Headline */}
      <div style={{ position: 'relative', zIndex: 2, padding: '14px 22px 0 22px' }}>
        <h1 style={{
          margin: 0,
          fontFamily: 'Inter, sans-serif',
          fontWeight: 900,
          fontSize: 44,
          lineHeight: 0.95, letterSpacing: -1.6,
          textTransform: 'uppercase', color: LUX.navy,
        }}>{headlines[variant]}</h1>
        <div style={{
          marginTop: 10, fontFamily: 'Inter, sans-serif', fontSize: 13.5,
          lineHeight: 1.45, color: 'rgba(10,10,10,0.65)', maxWidth: 290,
        }}>
          Scan the can. Answer 10 quick questions. Win a <b style={{ color: LUX.navy }}>$10,000 Marriott Bonvoy vacation.</b>
        </div>
      </div>

      {/* Center: ape water can — hero focal point.
         Sizing approach: give the floating wrapper an explicit height:100%
         of the flex slot, then the img uses height:100% width:auto so it
         scales to fit while keeping aspect. 14px vertical padding on the
         flex slot gives the canFloat animation (translateY -10px peak)
         breathing room without clipping the silver cap. */}
      <div style={{
        position: 'relative', zIndex: 2, flex: 1,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        minHeight: 0, overflow: 'hidden',
        padding: '14px 0',
      }}>
        {/* Soft orange halo */}
        <div style={{
          position: 'absolute', width: '60%', maxWidth: 320, aspectRatio: '1 / 1',
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(246,133,34,0.20) 0%, transparent 65%)',
          filter: 'blur(16px)',
          animation: 'haloPulse 4s ease-in-out infinite',
        }}/>

        {/* Floor shadow */}
        <div style={{
          position: 'absolute', bottom: 16,
          width: '50%', maxWidth: 220, height: 18, borderRadius: '50%',
          background: 'rgba(10,10,10,0.22)',
          filter: 'blur(14px)',
          animation: 'shadowBob 4.2s ease-in-out infinite',
        }}/>

        {/* Floating can — IMG box fills slot fully, objectFit:contain
           scales the can to the max size that preserves aspect.
           No maxWidth cap (cream bg hides any horizontal letterboxing). */}
        <div style={{
          position: 'relative', zIndex: 3,
          width: '100%', height: '100%',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          animation: 'canFloat 4.2s ease-in-out infinite',
          transformOrigin: 'center bottom',
          willChange: 'transform',
        }}>
          <img
            src="assets/ape-water-can.png"
            alt="Ape Water × Marriott Bonvoy"
            style={{
              width: '100%', height: '100%',
              objectFit: 'contain', objectPosition: 'center',
              display: 'block',
              filter: 'drop-shadow(0 30px 36px rgba(10,10,10,0.22))',
              userSelect: 'none', pointerEvents: 'none',
            }}
            draggable={false}
          />
        </div>
      </div>

      {/* CTA */}
      <div style={{ position: 'relative', zIndex: 2, padding: '0 22px 30px 22px' }}>
        <button
          onClick={handleEnter}
          onMouseDown={() => setPressed(true)} onMouseUp={() => setPressed(false)}
          onMouseLeave={() => setPressed(false)}
          onTouchStart={() => setPressed(true)} onTouchEnd={() => setPressed(false)}
          style={{
            width: '100%', border: 'none',
            background: LUX.gold, color: '#FFFFFF',
            padding: '19px 22px',
            fontFamily: 'Inter, sans-serif', fontSize: 14,
            fontWeight: 700, letterSpacing: 2.4,
            borderRadius: 12, textTransform: 'uppercase', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            boxShadow: pressed
              ? '0 1px 0 rgba(10,10,10,0.4)'
              : '0 3px 0 rgba(10,10,10,0.85), 0 10px 22px rgba(246,133,34,0.35)',
            transform: pressed ? 'translateY(2px)' : 'translateY(0)',
            transition: 'all 80ms ease',
          }}>
          <span>{ctaCopy}</span>
          <svg width="22" height="22" viewBox="0 0 28 28">
            <circle cx="14" cy="14" r="13" fill={LUX.navy}/>
            <path d="M10 14 h9 m-4 -4 l4 4 -4 4" stroke={LUX.gold} strokeWidth="2" fill="none"
              strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
        <div style={{
          marginTop: 11, textAlign: 'center',
          fontFamily: 'Inter, sans-serif', fontSize: 10, letterSpacing: 1.6,
          color: 'rgba(10,10,10,0.45)', textTransform: 'uppercase', fontWeight: 600,
        }}>
          10 Questions · ~2 min · Instant entry
        </div>
      </div>

      {/* Animation keyframes */}
      <style>{`
        @keyframes canFloat {
          0%, 100% { transform: translateY(0) rotate(-2deg); }
          25%      { transform: translateY(-6px) rotate(-1deg); }
          50%      { transform: translateY(-10px) rotate(1.5deg); }
          75%      { transform: translateY(-4px) rotate(0.5deg); }
        }
        @keyframes shadowBob {
          0%, 100% { transform: scale(1); opacity: 0.18; }
          50%      { transform: scale(0.8); opacity: 0.10; }
        }
        @keyframes haloPulse {
          0%, 100% { opacity: 0.85; transform: scale(1); }
          50%      { opacity: 1; transform: scale(1.05); }
        }
        @keyframes howModalIn {
          from { opacity: 0; transform: translateY(40px) scale(0.96); }
          to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes scrimIn {
          from { opacity: 0; }
          to   { opacity: 1; }
        }
      `}</style>

      {/* How It Works modal */}
      {showHow && (
        <div style={{
          position: 'absolute', inset: 0, zIndex: 50,
          background: 'rgba(10,10,10,0.55)',
          backdropFilter: 'blur(6px)',
          display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
          animation: 'scrimIn 240ms ease-out',
        }} onClick={() => setShowHow(false)}>
          <div onClick={e => e.stopPropagation()} style={{
            width: '100%',
            background: LUX.cream,
            borderTopLeftRadius: 24, borderTopRightRadius: 24,
            padding: '24px 22px 28px',
            animation: 'howModalIn 380ms cubic-bezier(.34,1.56,.64,1)',
            boxShadow: '0 -20px 60px rgba(10,10,10,0.4)',
          }}>
            <div style={{
              width: 40, height: 4, background: 'rgba(10,10,10,0.18)', borderRadius: 100,
              margin: '0 auto 18px',
            }}/>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: 2.2,
              color: LUX.gold, fontWeight: 700, marginBottom: 6,
            }}>HOW IT WORKS</div>
            <h2 style={{
              margin: 0,
              fontFamily: 'Inter, sans-serif', fontWeight: 900,
              fontSize: 28, lineHeight: 1, letterSpacing: -1,
              color: LUX.navy, textTransform: 'uppercase',
            }}>3 STEPS · 2 MINUTES.</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 18 }}>
              {[
                ['01', 'Answer 10 quick rounds', 'Each one banks more entries.'],
                ['02', 'Reveal your dream trip', 'Bonvoy will pre-build it for you.'],
                ['03', 'Winner drawn live at the event', 'Could be you. Probably will be.'],
              ].map(([n, t, s]) => (
                <div key={n} style={{
                  display: 'flex', gap: 14, alignItems: 'flex-start',
                }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: '50%',
                    background: LUX.gold, color: '#FFF',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 700,
                    letterSpacing: 0.5, flexShrink: 0,
                  }}>{n}</div>
                  <div style={{ paddingTop: 2 }}>
                    <div style={{
                      fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 700,
                      color: LUX.navy,
                    }}>{t}</div>
                    <div style={{
                      fontFamily: 'Inter', fontSize: 13, color: 'rgba(10,10,10,0.6)',
                      marginTop: 2,
                    }}>{s}</div>
                  </div>
                </div>
              ))}
            </div>
            <button onClick={closeAndStart} style={{
              width: '100%', marginTop: 22, border: 'none',
              background: LUX.navy, color: '#FFF',
              padding: '17px 20px',
              fontFamily: "'JetBrains Mono', monospace", fontSize: 13,
              fontWeight: 700, letterSpacing: 2.5,
              borderRadius: 12, textTransform: 'uppercase', cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}>
              <span>Got it · Let's go</span>
              <span style={{ fontSize: 16 }}>→</span>
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

window.ScreenHero = ScreenHero;