// Gift cards, Book-the-truck, FAQ, Footer
const { useState: useStateG } = React;

// ========== GIFT CARDS ==========
function GiftCards() {
  const [amount, setAmount] = useStateG(25);
  const AMOUNTS = [10, 25, 50, 100];
  return (
    <section id="gift-cards" style={{ background: '#21B8D4', padding: '100px 40px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -150, left: -150, animation: 'slowSpin 50s linear infinite', opacity: 0.45 }}>
        <SunBurst color="#FFD233" size={500} rays={16} />
      </div>
      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
          {/* Card mockup */}
          <div style={{ display: 'grid', placeItems: 'center', perspective: 1000 }}>
            <div style={{
              width: 420, aspectRatio: '1.6/1', position: 'relative',
              transform: 'rotate(-4deg)', filter: 'drop-shadow(10px 12px 0 #1A2B4E)',
            }}>
              {/* Card body */}
              <div style={{
                position: 'absolute', inset: 0, background: '#21B8D4', border: '5px solid #1A2B4E',
                borderRadius: 20, padding: 28, display: 'flex', flexDirection: 'column',
                justifyContent: 'space-between',
              }}>
                <div style={{ fontFamily: "'Titan One'", fontSize: 18, color: '#FFF4E0', letterSpacing: '0.04em', transform: 'rotate(-3deg)', alignSelf: 'flex-start' }}>
                  GIFT CARDS!
                </div>
                <div style={{ textAlign: 'center' }}>
                  <BubbleText size={52} fill="#FFF4E0" stroke1="#FFD233" stroke2="#1A2B4E" stroke3="#B6E84C" rotate={-2}>
                    ONO
                  </BubbleText>
                  <span style={{ display: 'inline-block', margin: '0 4px' }} />
                  <BubbleText size={52} fill="#FFD233" stroke1="#FFF4E0" stroke2="#1A2B4E" stroke3="#FF5BA0" rotate={2}>
                    ICE
                  </BubbleText>
                </div>
                <div style={{
                  fontFamily: "'Fredoka'", fontSize: 13, color: '#FFF4E0', opacity: 0.85,
                  display: 'flex', justifyContent: 'space-between',
                }}>
                  <span>No.&nbsp; BHAM-{String(Math.floor(1000 + amount * 7)).padStart(4, '0')}</span>
                  <span style={{ fontFamily: "'Titan One'", fontSize: 22, color: '#FFD233' }}>${amount}</span>
                </div>
              </div>
              {/* Shaved ice on the side */}
              <div style={{ position: 'absolute', top: -20, right: -40 }}>
                <svg width="120" height="140" viewBox="0 0 120 140">
                  <circle cx="60" cy="70" r="55" fill="#D74C9E" stroke="#1A2B4E" strokeWidth="4" />
                  <circle cx="45" cy="55" r="8" fill="rgba(255,255,255,0.5)" />
                  <line x1="85" y1="35" x2="115" y2="5" stroke="#FFD233" strokeWidth="6" strokeLinecap="round" />
                  <line x1="85" y1="35" x2="115" y2="5" stroke="#1A2B4E" strokeWidth="8" strokeLinecap="round" strokeDasharray="0 0" opacity="0" />
                  <line x1="84" y1="34" x2="116" y2="6" stroke="#1A2B4E" strokeWidth="2" strokeLinecap="round" />
                </svg>
              </div>
            </div>
          </div>

          {/* Copy + picker */}
          <div>
            <Sticker bg="#FFD233" rotate={-2} size={16}>🎁 Share the chill</Sticker>
            <div style={{ marginTop: 20 }}>
              <BubbleText size={82} fill="#FFF4E0" stroke1="#FFD233" stroke2="#1A2B4E" stroke3="#FF5BA0" rotate={-1}>
                GIFT CARDS!
              </BubbleText>
            </div>
            <p style={{
              fontFamily: "'Fredoka'", fontSize: 20, color: '#FFF4E0', marginTop: 20,
              fontWeight: 500, maxWidth: 480, lineHeight: 1.5,
            }}>
              Birthdays, teacher thank-yous, "sorry your AC is broken" — an Ono Ice gift card never misses. Redeemable at the truck or any private booking.
            </p>

            <div style={{
              marginTop: 28, background: '#FFF4E0', border: '4px solid #1A2B4E',
              borderRadius: 20, padding: 24, boxShadow: '6px 6px 0 #1A2B4E',
            }}>
              <div style={{ fontFamily: "'Titan One'", fontSize: 18, color: '#1A2B4E', marginBottom: 14 }}>
                Pick an amount
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
                {AMOUNTS.map(a => (
                  <button
                    key={a}
                    onClick={() => setAmount(a)}
                    style={{
                      background: amount === a ? '#FF5BA0' : '#FFF4E0',
                      color: amount === a ? '#FFF4E0' : '#1A2B4E',
                      border: '3px solid #1A2B4E', borderRadius: 14,
                      padding: '14px 0', cursor: 'pointer', fontFamily: "'Titan One'", fontSize: 20,
                      boxShadow: amount === a ? '2px 2px 0 #1A2B4E' : '4px 4px 0 #1A2B4E',
                      transform: amount === a ? 'translate(2px,2px)' : 'none',
                    }}
                  >
                    ${a}
                  </button>
                ))}
              </div>
              <button style={{
                marginTop: 16, width: '100%', background: '#1A2B4E', color: '#FFD233',
                border: '3px solid #1A2B4E', borderRadius: 14, padding: '16px',
                fontFamily: "'Titan One'", fontSize: 20, cursor: 'pointer', boxShadow: '4px 4px 0 #B6E84C',
              }}>
                Send this gift card →
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ========== BOOK THE TRUCK ==========
function BookTruck() {
  const [form, setForm] = useStateG({
    name: '', email: '', type: 'Birthday party', date: '', guests: 30, location: '', notes: '',
  });
  const [sent, setSent] = useStateG(false);
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const TYPES = ['Birthday party', 'Wedding', 'School / PTA', 'Company / HR', 'Neighborhood', 'Other'];

  return (
    <section id="book-truck" style={{ background: '#FFF4E0', padding: '100px 40px', position: 'relative' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 60, alignItems: 'center' }}>
          <div>
            <Sticker bg="#D74C9E" color="#FFF4E0" rotate={-3} size={16}>🎉 Book us</Sticker>
            <div style={{ marginTop: 20 }}>
              <BubbleText size={88} fill="#21B8D4" stroke1="#FFF4E0" stroke2="#1A2B4E" stroke3="#FFD233" rotate={-2}>
                BRING THE
              </BubbleText>
              <div style={{ marginTop: 4 }}>
                <BubbleText size={88} fill="#FF5BA0" stroke1="#FFF4E0" stroke2="#1A2B4E" stroke3="#B6E84C" rotate={1}>
                  TRUCK
                </BubbleText>
              </div>
            </div>
            <p style={{
              fontFamily: "'Fredoka'", fontSize: 20, color: '#1A2B4E', marginTop: 20,
              fontWeight: 500, maxWidth: 440, lineHeight: 1.5,
            }}>
              Birthdays, block parties, office cool-downs, weddings, school field days. We'll roll up with the music on, the ice flying, and a line forming.
            </p>

            <div style={{
              marginTop: 28, display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              {[
                ['⚡', 'We serve 30–300 guests'],
                ['🧊', '~45 seconds per cup from our real Hawaiian ice shaver'],
                ['💸', 'Flat-rate packages, no weird fees'],
                ['🎨', 'Menu cards can be branded to your event'],
              ].map(([ic, t]) => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: 12, background: '#FFD233',
                    border: '3px solid #1A2B4E', display: 'grid', placeItems: 'center', fontSize: 20,
                    flexShrink: 0,
                  }}>{ic}</div>
                  <div style={{ fontFamily: "'Fredoka'", fontSize: 16, color: '#1A2B4E', fontWeight: 500 }}>{t}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Form card */}
          <div style={{
            background: '#FFD233', border: '5px solid #1A2B4E', borderRadius: 28,
            padding: 32, boxShadow: '12px 12px 0 #1A2B4E', transform: 'rotate(1deg)',
            position: 'relative',
          }}>
            <div style={{ position: 'absolute', top: -20, left: -20 }}>
              <Sticker bg="#FF5BA0" color="#FFF4E0" rotate={-10} size={14}>Quote in 24hrs</Sticker>
            </div>
            {sent ? (
              <div style={{ textAlign: 'center', padding: '40px 0' }}>
                <div style={{ fontSize: 60 }}>🎉</div>
                <div style={{ fontFamily: "'Titan One'", fontSize: 28, color: '#1A2B4E', marginTop: 10 }}>Got it!</div>
                <p style={{ fontFamily: "'Fredoka'", fontSize: 16, color: '#1A2B4E', marginTop: 10, fontWeight: 500 }}>
                  We'll get back to you within 24 hours with a quote. (This is a demo — no email was sent.)
                </p>
                <button onClick={() => setSent(false)} style={{
                  marginTop: 20, background: '#FFF4E0', border: '3px solid #1A2B4E',
                  borderRadius: 12, padding: '10px 18px', fontFamily: "'Fredoka'", fontWeight: 700,
                  cursor: 'pointer',
                }}>
                  Send another
                </button>
              </div>
            ) : (
              <form onSubmit={e => { e.preventDefault(); setSent(true); }}>
                <div style={{ fontFamily: "'Titan One'", fontSize: 26, color: '#1A2B4E', marginBottom: 20 }}>
                  Tell us about your thing
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                  <Field label="Your name">
                    <input required value={form.name} onChange={e => update('name', e.target.value)} style={inputStyle} placeholder="Hailey R." />
                  </Field>
                  <Field label="Email">
                    <input required type="email" value={form.email} onChange={e => update('email', e.target.value)} style={inputStyle} placeholder="hailey@example.com" />
                  </Field>
                </div>
                <Field label="What's the event?">
                  <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                    {TYPES.map(t => (
                      <button type="button" key={t} onClick={() => update('type', t)} style={{
                        background: form.type === t ? '#D74C9E' : '#FFF4E0',
                        color: form.type === t ? '#FFF4E0' : '#1A2B4E',
                        border: '2px solid #1A2B4E', borderRadius: 999,
                        padding: '6px 12px', fontFamily: "'Fredoka'", fontWeight: 600, fontSize: 13,
                        cursor: 'pointer',
                      }}>
                        {t}
                      </button>
                    ))}
                  </div>
                </Field>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                  <Field label="Date">
                    <input required type="date" value={form.date} onChange={e => update('date', e.target.value)} style={inputStyle} />
                  </Field>
                  <Field label={`Guests (${form.guests})`}>
                    <input type="range" min="20" max="400" value={form.guests} onChange={e => update('guests', e.target.value)} style={{ width: '100%' }} />
                  </Field>
                </div>
                <Field label="Location">
                  <input value={form.location} onChange={e => update('location', e.target.value)} style={inputStyle} placeholder="Address or neighborhood" />
                </Field>
                <Field label="Anything else?">
                  <textarea value={form.notes} onChange={e => update('notes', e.target.value)} style={{ ...inputStyle, height: 64, resize: 'none' }} placeholder="Allergies, themes, custom menu cards…" />
                </Field>
                <button type="submit" style={{
                  marginTop: 16, width: '100%', background: '#1A2B4E', color: '#FFD233',
                  border: '3px solid #1A2B4E', borderRadius: 14, padding: '16px',
                  fontFamily: "'Titan One'", fontSize: 20, cursor: 'pointer', boxShadow: '4px 4px 0 #D74C9E',
                }}>
                  Send inquiry →
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

const inputStyle = {
  width: '100%', background: '#FFF4E0', border: '3px solid #1A2B4E',
  borderRadius: 12, padding: '10px 12px', fontFamily: "'Fredoka'", fontSize: 15,
  color: '#1A2B4E', outline: 'none', boxSizing: 'border-box',
};

function Field({ label, children }) {
  return (
    <label style={{ display: 'block', marginTop: 12 }}>
      <span style={{ display: 'block', fontFamily: "'Fredoka'", fontWeight: 700, fontSize: 13, color: '#1A2B4E', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
        {label}
      </span>
      {children}
    </label>
  );
}

// ========== FAQ ==========
function FAQ() {
  const [open, setOpen] = useStateG(0);
  const Q = [
    ["What's your ice actually like?", "We use a real Hawaiian-style block-ice shaver — so it's soft, snow-light, and holds flavor instead of getting crunchy. It's not a snow cone (no shade to snow cones)."],
    ["How do I find out where the truck is?", "Check our Instagram — @onoicebham. We post the day's location and hours every shift, and any weather-or-line-related changes go up there too. Turn on post notifications so you never miss a spot."],
    ['Got anything for allergies / diets?', 'Sugar-free syrups, dairy-free everything by default (condensed milk and ice cream are the only dairy add-ons), and we clean the shaver between blocks for allergy orders — just ask.'],
    ['How far will you drive?', 'Birmingham metro is easy. Outside the metro, we\'ll quote travel — we\'ve done Tuscaloosa and Huntsville happily.'],
    ['Do you take cards / Apple Pay?', 'Yes, all of it. Cash too, if you still carry it like a legend.'],
    ['Can we customize the menu for our event?', 'Yes! Themed flavor names, a branded menu card, signature color — all included in event bookings.'],
  ];
  return (
    <section id="faq" style={{ background: '#5B3A9E', padding: '100px 40px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: 50, right: 50, animation: 'slowSpin 40s linear infinite reverse', opacity: 0.2 }}>
        <SunBurst color="#FFD233" size={400} rays={12} />
      </div>
      <div style={{ maxWidth: 900, margin: '0 auto', position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 50 }}>
          <Sticker bg="#B6E84C" rotate={2} size={16}>🧊 Common questions</Sticker>
          <div style={{ marginTop: 20 }}>
            <BubbleText size={88} fill="#FFD233" stroke1="#FFF4E0" stroke2="#1A2B4E" stroke3="#FF5BA0" rotate={-1}>
              THE COLD FACTS
            </BubbleText>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {Q.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                background: '#FFF4E0', border: '4px solid #1A2B4E', borderRadius: 18,
                boxShadow: '6px 6px 0 #1A2B4E', overflow: 'hidden',
              }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: '100%', background: isOpen ? '#FFD233' : '#FFF4E0',
                    border: 'none', borderBottom: isOpen ? '3px solid #1A2B4E' : 'none',
                    padding: '18px 22px', cursor: 'pointer', display: 'flex',
                    justifyContent: 'space-between', alignItems: 'center',
                    fontFamily: "'Titan One'", fontSize: 19, color: '#1A2B4E', textAlign: 'left',
                  }}
                >
                  <span>{q}</span>
                  <span style={{
                    width: 32, height: 32, borderRadius: '50%', background: '#1A2B4E',
                    color: '#FFD233', display: 'grid', placeItems: 'center', fontSize: 20,
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform 0.2s',
                    flexShrink: 0,
                  }}>+</span>
                </button>
                {isOpen && (
                  <div style={{
                    padding: '18px 22px', fontFamily: "'Fredoka'", fontSize: 16,
                    color: '#1A2B4E', fontWeight: 500, lineHeight: 1.5,
                  }}>
                    {a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ========== INSTAGRAM STRIP ==========
function InstaStrip() {
  const posts = [
    { label: 'Tiger\'s Blood + cream', bg: '#FF5BA0' },
    { label: 'Setup at Avondale', bg: '#FFD233' },
    { label: 'Birthday party, 80 kids', bg: '#B6E84C' },
    { label: 'Blue Hawaii + umbrella', bg: '#21B8D4' },
    { label: 'Menu board', bg: '#D74C9E' },
    { label: 'New flavor: lychee', bg: '#FFC1DE' },
  ];
  return (
    <section style={{ background: '#FFF4E0', padding: '80px 40px', borderTop: '5px solid #1A2B4E', borderBottom: '5px solid #1A2B4E' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 30, flexWrap: 'wrap', gap: 20 }}>
          <div>
            <Sticker bg="#FF5BA0" color="#FFF4E0" rotate={-3} size={16}>📸 @onoicebham</Sticker>
            <div style={{ marginTop: 16 }}>
              <BubbleText size={64} fill="#1A2B4E" stroke1="#FFD233" stroke2="#1A2B4E" stroke3="#FF5BA0" rotate={-1}>
                ON THE 'GRAM
              </BubbleText>
            </div>
          </div>
          <a href="https://www.instagram.com/onoicebham/" target="_blank" rel="noreferrer" style={{
            background: '#1A2B4E', color: '#FFD233', border: '3px solid #1A2B4E',
            borderRadius: 999, padding: '12px 22px', fontFamily: "'Titan One'", fontSize: 16,
            textDecoration: 'none', boxShadow: '4px 4px 0 #FF5BA0',
          }}>
            Follow us →
          </a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12 }}>
          {posts.map((p, i) => (
            <div key={i} style={{ transform: `rotate(${(i % 2 ? 1 : -1) * 1.5}deg)` }}>
              <PhotoPlaceholder label={`[ photo: ${p.label} ]`} w="100%" h={180} bg={p.bg} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ========== FOOTER ==========
function Footer() {
  return (
    <footer style={{ background: '#1A2B4E', padding: '60px 40px 40px', color: '#FFF4E0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40, marginBottom: 40 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <img src="assets/ono-logo.png" alt="Ono Ice" style={{ height: 70, display: 'block', filter: 'drop-shadow(4px 4px 0 #000)' }} />
            </div>
            <p style={{ fontFamily: "'Fredoka'", fontSize: 15, marginTop: 16, maxWidth: 360, fontWeight: 400, opacity: 0.85 }}>
              Hand-shaved Hawaiian-style ice, made to order, rolling around the Magic City.
            </p>
          </div>
          {[
            ['Menu', ['Flavors', 'Build-your-own', 'Sugar-free', 'Dairy-free']],
            ['The truck', ['Where we are', 'Book an event', 'Gift cards', 'FAQ']],
            ['Say hi', ['@onoicebham', 'hello@onoice.bham', '(205) 555-ICE1', 'Birmingham, AL']],
          ].map(([h, items]) => (
            <div key={h}>
              <div style={{ fontFamily: "'Titan One'", fontSize: 16, color: '#FFD233', marginBottom: 14 }}>{h}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
                {items.map(x => (
                  <li key={x} style={{ fontFamily: "'Fredoka'", fontSize: 14, opacity: 0.85 }}>{x}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          borderTop: '2px dashed rgba(255,244,224,0.3)', paddingTop: 20,
          display: 'flex', justifyContent: 'space-between', fontFamily: "'Fredoka'", fontSize: 13, opacity: 0.7, flexWrap: 'wrap', gap: 10,
        }}>
          <span>© 2026 Ono Ice · Birmingham, AL</span>
          <span>🧊 Made in the Magic City · Keep it cold</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { GiftCards, BookTruck, FAQ, InstaStrip, Footer });