// Hero — yellow background, headline, eyebrow pill, three phone mockups
const { motion: HeroMotion } = window.Motion || {};

const Hero = () => {
  const M = window.Motion.motion;
  const fade = (delay = 0) => ({
    initial: { opacity: 0, y: 24 },
    animate: { opacity: 1, y: 0 },
    transition: { duration: 0.7, ease: [0.22, 1, 0.36, 1], delay }
  });

  const float = (delay = 0) => ({
    animate: { y: [0, -10, 0] },
    transition: { duration: 4 + delay * 0.5, repeat: Infinity, ease: 'easeInOut', delay }
  });

  return (
    <section id="top" className="hero" style={{
      background: '#FFCF55',
      paddingTop: 140,
      paddingBottom: 80,
      position: 'relative',
      maxHeight: 850,
      overflow: 'hidden',
      borderRadius: '0 0 48px 48px', borderStyle: "solid", borderWidth: "0px"
    }}>
      <img
        src="public/hero-dots.svg"
        alt=""
        aria-hidden="true"
        style={{
          position: 'absolute',
          inset: 0,
          width: '100%',
          height: '100%',
          objectFit: 'cover',
          pointerEvents: 'none',
          zIndex: 0,
          opacity: 1,
          transform: 'scale(1.15)',
          transformOrigin: 'center center'
        }}
      />
      <div className="container" style={{ position: 'relative', textAlign: 'center', zIndex: 1 }}>
        <M.div {...fade(0)} style={{ marginBottom: 18 }}>
          <a href="https://apps.apple.com/us/app/boba-tale/id1615247565" target="_blank" rel="noopener noreferrer" className="hero-pill">
            <span className="hero-pill__badge">NEW</span>
            <span className="hero-pill__text">BOBA TALE FOR IOS</span>
            <svg className="hero-pill__chev" viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M9 6l6 6-6 6" />
            </svg>
          </a>
        </M.div>

        <style>{`
          .hero-pill {
            display: inline-flex; align-items: center; gap: 8px;
            height: 42px;
            background: #fff;
            border-radius: 9999px;
            padding: 0 14px 0 6px;
            box-shadow: 0 1px 2px rgba(12,12,12,0.05), 0 6px 18px rgba(12,12,12,0.08);
            color: var(--brand-black);
            text-decoration: none;
            font-weight: 600;
            cursor: pointer;
          }
          .hero-pill__badge {
            background: #FFAD4B;
            color: #fff;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.08em;
            padding: 8px 15px;
            border-radius: 9999px;
            line-height: 1;
            transition: background 220ms cubic-bezier(0.22,1,0.36,1);
          }
          .hero-pill:hover .hero-pill__badge { background: #FF964B; }
          .hero-pill__text {
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0;
            color: var(--brand-black);
          }
          .hero-pill__chev {
            transition: transform 220ms cubic-bezier(0.22,1,0.36,1);
          }
          .hero-pill:hover .hero-pill__chev { transform: translateX(2px); }
          .hero-sub { font-size: clamp(20px, 1.8vw, 24px); }
          @media (max-width: 810px) {
            .hero { max-height: 640px !important; padding-bottom: 0 !important; }
            .hero-phones { margin-top: 36px !important; }
            .hero-phone--side { display: none !important; }
            .hero-phone--center {
              transform: scale(0.58);
              transform-origin: top center;
              margin-bottom: -42%;
            }
            .hero-sub { font-size: 17px; }
          }
        `}</style>

        <M.h1 className="h-display" {...fade(0.08)}>
          Mobile Boba Games
        </M.h1>

        <M.p {...fade(0.16)} className="body-lg hero-sub" style={{
          margin: '18px auto 0', color: 'rgba(12,12,12,0.7)', maxWidth: 720
        }}>
          From the creator of Boba Tale. Step into the world of<br className="br-desktop" />{' '}BOBAFRIENDS with boba-inspired casual games.
        </M.p>

        {/* Three floating phones — fan layout */}
        <M.div
          {...fade(0.28)}
          className="hero-phones"
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'flex-end',
            marginTop: 64,
            maxWidth: 980,
            marginLeft: 'auto',
            marginRight: 'auto',
            position: 'relative'
          }}>
          
          <div className="hero-phone hero-phone--side" style={{
            width: 368,
            transform: 'translate(92px, 40px) rotate(-12deg)',
            transformOrigin: 'bottom center',
            zIndex: 1,
            position: 'relative'
          }}>
            <M.div {...float(0)}>
              <PhoneMockup variant="light" tint="cafe" label="Boba Tale — Café" sub="hero screen 1">
                <img
                  src="public/bobafriends-hero-left.png"
                  alt="Boba Tale gameplay"
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </PhoneMockup>
            </M.div>
          </div>
          <div className="hero-phone hero-phone--center" style={{
            width: 368,
            zIndex: 2,
            position: 'relative'
          }}>
            <M.div {...float(0.4)}>
              <PhoneMockup variant="light" tint="sunset" label="Boba Tale — Brew" sub="hero screen 2">
                <img
                  src="public/bobafriends-hero-center.png"
                  alt="Boba Tale gameplay"
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </PhoneMockup>
            </M.div>
          </div>
          <div className="hero-phone hero-phone--side" style={{
            width: 368,
            transform: 'translate(-92px, 40px) rotate(12deg)',
            transformOrigin: 'bottom center',
            zIndex: 1,
            position: 'relative'
          }}>
            <M.div {...float(0.8)}>
              <PhoneMockup variant="light" tint="forest" label="Boba Run" sub="hero screen 3">
                <img
                  src="public/bobafriends-hero-right.png"
                  alt="Boba Tale gameplay"
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </PhoneMockup>
            </M.div>
          </div>
        </M.div>
      </div>
    </section>);

};

window.Hero = Hero;