const { useState, useEffect } = React;

const Hero = () => {
  const [loaded, setLoaded] = useState(false);
  useEffect(() => { const t = setTimeout(() => setLoaded(true), 80); return () => clearTimeout(t); }, []);

  return (
    <section style={{
      position: 'relative', minHeight: '100vh',
      display: 'flex', alignItems: 'center',
      overflow: 'hidden', background: '#1A1A1A',
      padding: '100px 0 60px',
    }}>
      {/* Background */}
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
        <div style={{ position: 'absolute', width: '500px', height: '500px', borderRadius: '50%', filter: 'blur(100px)', background: 'radial-gradient(circle, rgba(232,106,0,0.2) 0%, transparent 70%)', top: '-80px', left: '-60px', animation: 'blob1 11s ease-in-out infinite' }} />
        <div style={{ position: 'absolute', width: '400px', height: '400px', borderRadius: '50%', filter: 'blur(80px)', background: 'radial-gradient(circle, rgba(232,106,0,0.1) 0%, transparent 70%)', bottom: '-60px', left: '35%', animation: 'blob2 14s ease-in-out infinite' }} />
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(circle, rgba(245,240,235,0.045) 1px, transparent 1px)', backgroundSize: '32px 32px' }} />
      </div>

      <div style={{ maxWidth: '1400px', margin: '0 auto', padding: '0 48px', width: '100%', position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '64px', alignItems: 'center' }} className="mobile-stack">

          {/* Left — text */}
          <div style={{
            opacity: loaded ? 1 : 0,
            transform: loaded ? 'none' : 'translateY(36px)',
            transition: 'all 0.9s cubic-bezier(0.16,1,0.3,1)',
          }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: '10px', background: 'rgba(232,106,0,0.1)', border: '1px solid rgba(232,106,0,0.28)', padding: '9px 22px', marginBottom: '36px', fontFamily: "'JetBrains Mono', monospace", fontSize: '11px', color: '#E86A00', letterSpacing: '3px' }}>
              <span style={{ width: '7px', height: '7px', borderRadius: '50%', background: '#E86A00', display: 'inline-block', animation: 'pulse 2s ease-in-out infinite' }} />
              NOW LIVE IN ACCRA, GHANA
            </div>

            <h1 style={{ fontFamily: "'Bebas Neue', sans-serif", fontSize: 'clamp(68px, 7.5vw, 118px)', lineHeight: 0.88, letterSpacing: '4px', color: '#F5F0EB', marginBottom: '28px' }}>
              It's Back.<br /><span style={{ color: '#E86A00' }}>And It's</span><br />Better.
            </h1>

            <p style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 'clamp(15px, 1.6vw, 19px)', color: 'rgba(245,240,235,0.62)', lineHeight: 1.75, marginBottom: '44px', maxWidth: '460px' }}>
              Ghana's favourite protein snack just dropped in Accra. Don't miss it this time.
            </p>

            <div style={{ display: 'flex', gap: '14px', flexWrap: 'wrap' }}>
              <a href="order.html" className="btn-primary">Order Now →</a>
              <a href="reservation.html" className="btn-ghost">Reserve Yours</a>
            </div>

            <div style={{ display: 'flex', marginTop: '52px', paddingTop: '28px', borderTop: '1px solid rgba(245,240,235,0.06)', flexWrap: 'wrap', gap: '0' }}>
              {[['127', 'Bags Sold'], ['GHS 40', 'Per Bag'], ['Same Day', 'Accra Delivery']].map(([val, label], i) => (
                <div key={i} style={{ paddingRight: '28px', marginRight: '28px', borderRight: i < 2 ? '1px solid rgba(245,240,235,0.08)' : 'none' }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '22px', fontWeight: '600', color: '#F5F0EB' }}>{val}</div>
                  <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: '11px', color: 'rgba(245,240,235,0.35)', marginTop: '3px' }}>{label}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right — product image */}
          <div className="hidden-mobile" style={{
            position: 'relative',
            opacity: loaded ? 1 : 0,
            transition: 'opacity 1.2s ease 0.4s',
          }}>
            <div style={{ position: 'relative', overflow: 'hidden' }}>
              <img
                src="uploads/pack-of-3-img3.jpeg"
                alt="Xiexiang Crunch Oat Chocolates — 3 pack"
                style={{ width: '100%', height: '580px', objectFit: 'cover', objectPosition: 'center', display: 'block' }}
              />
              {/* Blend gradient - left */}
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right, rgba(26,26,26,0.55) 0%, transparent 35%)' }} />
              {/* Blend gradient - bottom */}
              <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '45%', background: 'linear-gradient(to top, rgba(26,26,26,0.85) 0%, transparent 100%)' }} />
              {/* Bundle badge */}
              <div style={{ position: 'absolute', bottom: '28px', right: '28px', background: '#E86A00', padding: '14px 22px' }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '9px', color: 'rgba(26,26,26,0.65)', letterSpacing: '2px', marginBottom: '4px' }}>BUNDLE DEAL</div>
                <div style={{ fontFamily: "'Bebas Neue', sans-serif", fontSize: '34px', color: '#1A1A1A', letterSpacing: '2px', lineHeight: 1 }}>3 for GHS 99</div>
              </div>
            </div>

            {/* Small floating thumbnail */}
            <div style={{ position: 'absolute', top: '24px', right: '24px', width: '80px', height: '80px', overflow: 'hidden', border: '2px solid rgba(232,106,0,0.4)', background: '#1A1A1A' }}>
              <img src="uploads/oat-choco.jpeg" alt="Oat Choco bars" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
          </div>
        </div>
      </div>

      {/* Scroll indicator */}
      <div style={{ position: 'absolute', bottom: '40px', left: '50%', transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '9px', color: 'rgba(245,240,235,0.2)', letterSpacing: '4px' }}>SCROLL</div>
        <div style={{ width: '1px', height: '44px', background: 'linear-gradient(to bottom, rgba(232,106,0,0.7), transparent)', animation: 'scrollLine 2.2s ease-in-out infinite' }} />
      </div>
    </section>
  );
};

Object.assign(window, { Hero });