// Main sections: Hero, TruckTracker, Flavors, Builder, GiftCards, Book, FAQ, Footer
const { useState: useStateS, useEffect: useEffectS, useMemo: useMemoS } = React;

// ========== HERO ==========
function Hero({ accent, wobble }) {
  return (
    <section
      style={{
        position: 'relative',
        background: '#21B8D4',
        padding: '80px 40px 140px',
        overflow: 'hidden',
        minHeight: 720,
      }}
    >
      {/* Sun burst behind */}
      <div style={{ position: 'absolute', top: -200, right: -200, animation: 'slowSpin 60s linear infinite', opacity: 0.55 }}>
        <SunBurst color="#FFD233" size={800} rays={22} />
      </div>
      {/* Polka dots */}
      <div style={{ position: 'absolute', top: 60, left: 80, width: 22, height: 22, borderRadius: '50%', background: '#FFF4E0' }} />
      <div style={{ position: 'absolute', top: 180, left: 40, width: 14, height: 14, borderRadius: '50%', background: '#FFD233' }} />
      <div style={{ position: 'absolute', top: 260, left: 160, width: 10, height: 10, borderRadius: '50%', background: '#FF5BA0' }} />
      <div style={{ position: 'absolute', top: 120, right: 140, width: 16, height: 16, borderRadius: '50%', background: '#B6E84C' }} />
      <div style={{ position: 'absolute', bottom: 180, left: 120, width: 18, height: 18, borderRadius: '50%', background: '#D74C9E' }} />

      {/* Nav */}
      <nav style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'center', maxWidth: 1280, margin: '0 auto 60px', zIndex: 5 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src="assets/ono-logo.png" alt="Ono Ice" style={{ height: 56, display: 'block', filter: 'drop-shadow(3px 3px 0 #1A2B4E)' }} />
          <span style={{ fontFamily: "'Fredoka'", fontWeight: 700, fontSize: 15, color: '#FFF4E0', letterSpacing: '0.08em', textTransform: 'uppercase', opacity: 0.9 }}>Birmingham, AL</span>
        </div>
        <div style={{ display: 'flex', gap: 28, fontFamily: "'Fredoka'", fontWeight: 600, fontSize: 16, color: '#FFF4E0', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
          {['Flavors', 'Find us', 'Book truck', 'Gift cards'].map(l => (
            <a key={l} href={`#${l.replace(' ', '-').toLowerCase()}`} style={{ color: '#FFF4E0', textDecoration: 'none', borderBottom: '3px dashed transparent', paddingBottom: 2 }}
               onMouseEnter={e => e.currentTarget.style.borderBottomColor = '#FFD233'}
               onMouseLeave={e => e.currentTarget.style.borderBottomColor = 'transparent'}>
              {l}
            </a>
          ))}
        </div>
        <a href="#find-us" style={{
          background: '#FFD233', color: '#1A2B4E', border: '3px solid #1A2B4E', borderRadius: 999,
          padding: '10px 22px', fontFamily: "'Fredoka'", fontWeight: 700, fontSize: 15, textDecoration: 'none',
          boxShadow: '4px 4px 0 #1A2B4E', textTransform: 'uppercase', whiteSpace: 'nowrap',
        }}>
          📍 Find the truck
        </a>
      </nav>

      {/* Hero content */}
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 40, alignItems: 'center', zIndex: 5 }}>
        <div>
          <div style={{ marginBottom: 24, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Sticker bg="#FFD233" rotate={-4}>🌴 Birmingham's shaved ice</Sticker>
            <Sticker bg="#FF5BA0" color="#FFF4E0" rotate={3}>Est. on the move</Sticker>
          </div>
          <div style={{ marginBottom: 20, position: 'relative' }}>
            <img src="assets/ono-logo.png" alt="Ono Ice" style={{ width: '100%', maxWidth: 560, display: 'block', filter: 'drop-shadow(8px 8px 0 #1A2B4E)' }} />
          </div>
          <p style={{
            fontFamily: "'Fredoka'", fontWeight: 500, fontSize: 22, color: '#FFF4E0', maxWidth: 520, lineHeight: 1.4,
            background: 'rgba(26,43,78,0.25)', padding: '16px 20px', borderRadius: 18, border: '3px solid #1A2B4E',
            transform: 'rotate(-1deg)',
          }}>
            Fluffy, fruity, ridiculous-good shaved ice — rolling around Birmingham out of a bright blue truck. <b>Follow us on Instagram</b> to find today's spot.
          </p>
          <div style={{ display: 'flex', gap: 16, marginTop: 28, flexWrap: 'wrap' }}>
            <a href="#flavors" style={{
              background: '#FF5BA0', color: '#FFF4E0', border: '4px solid #1A2B4E', borderRadius: 999,
              padding: '16px 32px', fontFamily: "'Titan One'", fontSize: 22, textDecoration: 'none',
              boxShadow: '6px 6px 0 #1A2B4E', letterSpacing: '0.02em',
            }}>
              See the flavors
            </a>
            <a href="#book" style={{
              background: '#FFF4E0', color: '#1A2B4E', border: '4px solid #1A2B4E', borderRadius: 999,
              padding: '16px 32px', fontFamily: "'Titan One'", fontSize: 22, textDecoration: 'none',
              boxShadow: '6px 6px 0 #1A2B4E',
            }}>
              Book the truck
            </a>
          </div>
        </div>

        <div style={{ position: 'relative', display: 'grid', placeItems: 'center' }}>
          {/* Big spinning sun behind cup */}
          <div style={{ position: 'absolute', animation: 'slowSpin 18s linear infinite' }}>
            <SunBurst color="#FF5BA0" size={520} rays={16} />
          </div>
          <div style={{ position: 'absolute', animation: 'slowSpin 22s linear infinite reverse', opacity: 0.9 }}>
            <SunBurst color="#B6E84C" size={380} rays={12} />
          </div>
          <div style={{ position: 'relative' }}>
            <ShavedIceCup color="#FF5BA0" topping="cherry" size={320} wobble={wobble} />
          </div>
          {/* Floating sticker */}
          <div style={{ position: 'absolute', top: 20, right: -10, animation: wobble ? 'floaty 3s ease-in-out infinite' : 'none' }}>
            <Sticker bg="#B6E84C" rotate={12} size={16}>Watermelon 🍉</Sticker>
          </div>
          <div style={{ position: 'absolute', bottom: 40, left: -20, animation: wobble ? 'floaty 3.5s ease-in-out infinite' : 'none' }}>
            <Sticker bg="#FFD233" rotate={-8} size={16}>+ condensed milk</Sticker>
          </div>
        </div>
      </div>

      {/* Bottom squiggle */}
      <div style={{ position: 'absolute', bottom: -2, left: 0, right: 0 }}>
        <Squiggle color="#FFF4E0" height={50} />
      </div>
    </section>
  );
}

// ========== TRUCK TRACKER (Instagram-focused, evergreen) ==========
function TruckTracker() {
  const HAUNTS = [
    { spot: 'Breweries', detail: 'Avondale, Cahaba, Trim Tab', emoji: '🍺' },
    { spot: 'Markets', detail: 'Pepper Place & farmers markets', emoji: '🥭' },
    { spot: 'Parks', detail: 'Railroad, Homewood, Patton', emoji: '🌳' },
    { spot: 'Private events', detail: 'Birthdays, weddings, schools', emoji: '🎉' },
  ];
  return (
    <section id="find-us" style={{ background: '#FFF4E0', padding: '90px 40px', position: 'relative' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 50 }}>
          <Sticker bg="#21B8D4" color="#FFF4E0" rotate={-2} size={16}>📍 Where's the truck?</Sticker>
          <div style={{ marginTop: 20 }}>
            <BubbleText size={96} fill="#FF5BA0" stroke1="#FFF4E0" stroke2="#1A2B4E" stroke3="#FFD233" rotate={-1}>
              CHASE US
            </BubbleText>
          </div>
          <p style={{ fontFamily: "'Fredoka'", fontSize: 20, color: '#1A2B4E', maxWidth: 640, margin: '16px auto 0', fontWeight: 500 }}>
            Food-truck life means we move. The only place that's <i>always</i> right? Our Instagram. We post every spot before we roll out — follow along and never miss us.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 50, alignItems: 'center' }}>
          {/* Phone mockup showing Insta */}
          <div style={{ display: 'grid', placeItems: 'center', position: 'relative' }}>
            <div style={{ position: 'absolute', animation: 'slowSpin 40s linear infinite', opacity: 0.5 }}>
              <SunBurst color="#FFD233" size={460} rays={14} />
            </div>
            <div style={{
              width: 280, aspectRatio: '9/18', background: '#1A2B4E', borderRadius: 38,
              padding: 8, boxShadow: '12px 12px 0 #1A2B4E', position: 'relative',
              border: '3px solid #1A2B4E', transform: 'rotate(-3deg)',
            }}>
              <div style={{ background: '#FFF4E0', height: '100%', borderRadius: 30, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
                {/* Insta header */}
                <div style={{ padding: '14px 14px 10px', borderBottom: '2px solid #1A2B4E', display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 36, height: 36, borderRadius: '50%', background: '#21B8D4', border: '2px solid #1A2B4E', display: 'grid', placeItems: 'center', fontFamily: "'Titan One'", fontSize: 16, color: '#FFD233' }}>O</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: "'Fredoka'", fontWeight: 700, fontSize: 13, color: '#1A2B4E' }}>onoicebham</div>
                    <div style={{ fontFamily: "'Fredoka'", fontSize: 10, color: '#1A2B4E', opacity: 0.6 }}>Birmingham, AL</div>
                  </div>
                  <div style={{ fontFamily: "'Fredoka'", fontSize: 11, color: '#D74C9E', fontWeight: 700 }}>Follow</div>
                </div>
                {/* Post image */}
                <div style={{ flex: 1, background: '#21B8D4', position: 'relative', display: 'grid', placeItems: 'center' }}>
                  <ShavedIceCup color="#FF5BA0" topping="cherry" size={150} wobble={false} />
                  <div style={{ position: 'absolute', top: 12, left: 12 }}>
                    <Sticker bg="#FFD233" rotate={-4} size={11}>📍 TONIGHT</Sticker>
                  </div>
                </div>
                {/* Caption */}
                <div style={{ padding: '10px 14px', borderTop: '2px solid #1A2B4E', background: '#FFF4E0' }}>
                  <div style={{ fontFamily: "'Fredoka'", fontSize: 11, color: '#1A2B4E', lineHeight: 1.4 }}>
                    <b>onoicebham</b> rolling up to ___ tonight 5–9pm 🧊✨
                  </div>
                </div>
              </div>
            </div>
            <div style={{ position: 'absolute', top: 30, right: 20, animation: 'floaty 3s ease-in-out infinite' }}>
              <Sticker bg="#FF5BA0" color="#FFF4E0" rotate={10} size={13}>Daily updates ↓</Sticker>
            </div>
          </div>

          {/* CTA card */}
          <div>
            <div style={{
              background: '#1A2B4E', border: '5px solid #1A2B4E', borderRadius: 24,
              padding: 32, boxShadow: '10px 10px 0 #FF5BA0', color: '#FFF4E0',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
                <div style={{ width: 56, height: 56, borderRadius: 16, background: 'linear-gradient(45deg, #FFD233, #FF5BA0, #D74C9E)', border: '3px solid #FFF4E0', display: 'grid', placeItems: 'center', fontSize: 28 }}>📷</div>
                <div>
                  <div style={{ fontFamily: "'Titan One'", fontSize: 22, color: '#FFD233', letterSpacing: '0.02em' }}>@onoicebham</div>
                  <div style={{ fontFamily: "'Fredoka'", fontSize: 13, opacity: 0.75 }}>The one source of truth.</div>
                </div>
              </div>
              <p style={{ fontFamily: "'Fredoka'", fontSize: 16, lineHeight: 1.5, opacity: 0.9, fontWeight: 500 }}>
                We post the day's location and hours on Instagram before every shift. Turn on post notifications and you'll always know where to find us.
              </p>
              <a href="https://www.instagram.com/onoicebham/" target="_blank" rel="noreferrer" style={{
                marginTop: 20, display: 'block', background: '#FFD233', color: '#1A2B4E', border: '4px solid #FFF4E0',
                borderRadius: 16, padding: '18px', textAlign: 'center', fontFamily: "'Titan One'",
                fontSize: 22, textDecoration: 'none', boxShadow: 'inset -4px -4px 0 rgba(0,0,0,0.15)',
              }}>
                Follow on Instagram →
              </a>
            </div>

            {/* Where you'll usually find us */}
            <div style={{ marginTop: 28 }}>
              <div style={{ fontFamily: "'Titan One'", fontSize: 18, color: '#1A2B4E', marginBottom: 14, letterSpacing: '0.02em' }}>
                Where we usually pop up
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                {HAUNTS.map((h, i) => (
                  <div key={h.spot} style={{
                    background: '#FFF4E0', border: '3px solid #1A2B4E', borderRadius: 14,
                    padding: '12px 14px', boxShadow: '4px 4px 0 #1A2B4E',
                    display: 'flex', alignItems: 'center', gap: 12,
                    transform: `rotate(${(i % 2 ? 0.6 : -0.6)}deg)`,
                  }}>
                    <div style={{ fontSize: 24 }}>{h.emoji}</div>
                    <div>
                      <div style={{ fontFamily: "'Titan One'", fontSize: 14, color: '#1A2B4E' }}>{h.spot}</div>
                      <div style={{ fontFamily: "'Fredoka'", fontSize: 12, color: '#1A2B4E', opacity: 0.7 }}>{h.detail}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Hero, TruckTracker });