// Flavors grid + Builder + Gift cards
const { useState: useStateF } = React;

const FLAVORS = [
  { name: 'Tiger\'s Blood', color: '#E84C3D', emoji: '🐯', blurb: 'Strawberry + coconut + watermelon. The classic.' },
  { name: 'Blue Hawaii', color: '#21B8D4', emoji: '🌊', blurb: 'Pineapple-coconut, deeply chill.' },
  { name: 'Watermelon', color: '#FF5BA0', emoji: '🍉', blurb: 'Summer in a cup. No seeds, promise.' },
  { name: 'Mango Tajín', color: '#FFB020', emoji: '🥭', blurb: 'Sweet, spicy, a little lime snap.' },
  { name: 'Wedding Cake', color: '#FFF4E0', emoji: '💍', blurb: 'Vanilla-almond-buttery. Trust us.' },
  { name: 'Sour Apple', color: '#B6E84C', emoji: '🍏', blurb: 'Pucker up, very very green.' },
  { name: 'Grape Ape', color: '#7B3AA5', emoji: '🍇', blurb: 'Purple tongue guaranteed.' },
  { name: 'Birthday Cake', color: '#FFC1DE', emoji: '🎂', blurb: 'Sprinkles included. Obviously.' },
  { name: 'Bubble Gum', color: '#F48EC7', emoji: '🫧', blurb: 'Pink, nostalgic, ridiculous.' },
  { name: 'Root Beer Float', color: '#5A3418', emoji: '🥤', blurb: 'Plus a splash of cream on top.' },
  { name: 'Lemon-Lime', color: '#D4E84C', emoji: '🍋', blurb: 'Zippy citrus, great after a run.' },
  { name: 'Cotton Candy', color: '#A7E0FF', emoji: '🍭', blurb: 'State-fair vibes, any month.' },
];

function Flavors({ wobble }) {
  const [focus, setFocus] = useStateF(0);
  const active = FLAVORS[focus];
  return (
    <section id="flavors" style={{ background: '#FFF4E0', padding: '40px 40px 100px', position: 'relative' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <Sticker bg="#B6E84C" rotate={2} size={16}>🍧 40+ flavors on deck</Sticker>
          <div style={{ marginTop: 20, lineHeight: 1.05 }}>
            <div>
              <BubbleText size={96} fill="#FFD233" stroke1="#FFF4E0" stroke2="#1A2B4E" stroke3="#D74C9E" rotate={-2}>
                THE FLAVOR
              </BubbleText>
            </div>
            <div style={{ marginTop: 14 }}>
              <BubbleText size={96} fill="#FF5BA0" stroke1="#FFF4E0" stroke2="#1A2B4E" stroke3="#21B8D4" rotate={1}>
                WALL
              </BubbleText>
            </div>
          </div>
          <p style={{ fontFamily: "'Fredoka'", fontSize: 20, color: '#1A2B4E', maxWidth: 620, margin: '20px auto 0', fontWeight: 500 }}>
            Tap any flavor to see what you're in for. Mix two or three — we won't tell.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 50, alignItems: 'center' }}>
          {/* Big featured cup */}
          <div style={{ display: 'grid', placeItems: 'center', position: 'relative', minHeight: 520 }}>
            <div style={{ position: 'absolute', animation: 'slowSpin 30s linear infinite' }}>
              <SunBurst color={active.color} size={480} rays={14} />
            </div>
            <div style={{ position: 'relative' }}>
              <ShavedIceCup color={active.color} topping="cherry" size={340} wobble={wobble} />
            </div>
            <div style={{ position: 'absolute', bottom: 20, left: '50%', transform: 'translateX(-50%)', textAlign: 'center', width: '100%' }}>
              <div style={{
                background: '#1A2B4E', color: '#FFF4E0', display: 'inline-block', padding: '10px 24px',
                borderRadius: 999, border: '3px solid #FFF4E0', fontFamily: "'Titan One'", fontSize: 22, transform: 'rotate(-2deg)',
                boxShadow: '4px 4px 0 #1A2B4E',
              }}>
                {active.emoji} {active.name}
              </div>
              <div style={{
                marginTop: 12, fontFamily: "'Fredoka'", fontSize: 15, color: '#1A2B4E', fontWeight: 500,
                maxWidth: 320, margin: '12px auto 0',
              }}>
                {active.blurb}
              </div>
            </div>
          </div>

          {/* Flavor grid */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {FLAVORS.map((f, i) => {
              const isActive = i === focus;
              return (
                <button
                  key={f.name}
                  onClick={() => setFocus(i)}
                  style={{
                    background: f.color,
                    border: '4px solid #1A2B4E',
                    borderRadius: 18,
                    padding: '20px 12px 16px',
                    cursor: 'pointer',
                    textAlign: 'center',
                    boxShadow: isActive ? '2px 2px 0 #1A2B4E' : '6px 6px 0 #1A2B4E',
                    transform: isActive ? 'translate(4px, 4px) rotate(-1deg)' : `rotate(${(i % 3 - 1) * 1.5}deg)`,
                    transition: 'transform 0.15s, box-shadow 0.15s',
                    fontFamily: "'Fredoka'",
                    position: 'relative',
                  }}
                  onMouseEnter={e => { if (!isActive) e.currentTarget.style.transform = `rotate(${(i % 3 - 1) * 1.5}deg) scale(1.05)`; }}
                  onMouseLeave={e => { if (!isActive) e.currentTarget.style.transform = `rotate(${(i % 3 - 1) * 1.5}deg)`; }}
                >
                  <div style={{ fontSize: 32, marginBottom: 6 }}>{f.emoji}</div>
                  <div style={{
                    fontFamily: "'Titan One'",
                    fontSize: 14,
                    color: f.color === '#FFF4E0' || f.color === '#B6E84C' || f.color === '#D4E84C' || f.color === '#FFC1DE' || f.color === '#A7E0FF' ? '#1A2B4E' : '#FFF4E0',
                    letterSpacing: '0.02em',
                    lineHeight: 1.1,
                  }}>
                    {f.name}
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        <div style={{ textAlign: 'center', marginTop: 50 }}>
          <Sticker bg="#FFD233" rotate={-1} size={14}>+ sugar-free & dairy-free options always</Sticker>
        </div>
      </div>
    </section>
  );
}

// ========== BUILDER ==========
const SIZES = [
  { id: 'keiki', label: 'Keiki', sub: 'Kid size', price: 4, scale: 0.75 },
  { id: 'regular', label: 'Regular', sub: 'The go-to', price: 6, scale: 1 },
  { id: 'ohana', label: 'Ohana', sub: 'Share (or don\'t)', price: 8, scale: 1.2 },
];
const TOPPINGS = [
  { id: 'cherry', label: 'Cherry', price: 0 },
  { id: 'umbrella', label: 'Paper umbrella', price: 0.5 },
  { id: 'straw', label: 'Pink straw', price: 0 },
  { id: 'sprinkles', label: 'Sprinkles', price: 1 },
];
const EXTRAS = [
  { id: 'cream', label: 'Condensed milk drizzle', price: 1 },
  { id: 'boba', label: 'Boba pearls', price: 1.5 },
  { id: 'icecream', label: 'Vanilla ice cream scoop', price: 2 },
  { id: 'gummies', label: 'Gummy worms', price: 1 },
];

function Builder({ wobble }) {
  const [size, setSize] = useStateF(SIZES[1]);
  const [flavor, setFlavor] = useStateF(FLAVORS[0]);
  const [topping, setTopping] = useStateF('cherry');
  const [extras, setExtras] = useStateF([]);

  const toggleExtra = (id) => setExtras(e => e.includes(id) ? e.filter(x => x !== id) : [...e, id]);

  const toppingObj = TOPPINGS.find(t => t.id === topping);
  const extraPrice = extras.reduce((s, id) => s + (EXTRAS.find(e => e.id === id)?.price || 0), 0);
  const total = (size.price + (toppingObj?.price || 0) + extraPrice).toFixed(2);

  return (
    <section id="build" style={{ background: '#D74C9E', padding: '100px 40px', position: 'relative', overflow: 'hidden' }}>
      {/* Squiggle top */}
      <div style={{ position: 'absolute', top: -2, left: 0, right: 0, transform: 'scaleY(-1)' }}>
        <Squiggle color="#FFF4E0" height={50} />
      </div>
      {/* Polka dots */}
      <div style={{ position: 'absolute', top: 80, right: 60, width: 20, height: 20, borderRadius: '50%', background: '#FFD233' }} />
      <div style={{ position: 'absolute', bottom: 120, left: 80, width: 14, height: 14, borderRadius: '50%', background: '#B6E84C' }} />
      <div style={{ position: 'absolute', top: 200, left: 60, width: 12, height: 12, borderRadius: '50%', background: '#FFF4E0' }} />

      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 60 }}>
          <Sticker bg="#FFD233" rotate={-3} size={16}>👷 Build-your-own</Sticker>
          <div style={{ marginTop: 20 }}>
            <BubbleText size={96} fill="#FFF4E0" stroke1="#FFD233" stroke2="#1A2B4E" stroke3="#21B8D4" rotate={-1}>
              MAKE IT YOURS
            </BubbleText>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 50, alignItems: 'start' }}>
          {/* Live preview */}
          <div style={{
            background: '#FFF4E0', border: '5px solid #1A2B4E', borderRadius: 28,
            padding: 40, boxShadow: '12px 12px 0 #1A2B4E', position: 'sticky', top: 20,
          }}>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: "'Fredoka'", fontWeight: 700, fontSize: 14, color: '#1A2B4E', textTransform: 'uppercase', letterSpacing: '0.1em', opacity: 0.6, marginBottom: 20 }}>
                Your cup, live
              </div>
              <div style={{ minHeight: 340, display: 'grid', placeItems: 'center' }}>
                <ShavedIceCup
                  color={flavor.color}
                  topping={topping}
                  size={280 * size.scale}
                  wobble={wobble}
                />
              </div>
              <div style={{
                marginTop: 20, borderTop: '3px dashed #1A2B4E', paddingTop: 20,
                display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'center', textAlign: 'left',
              }}>
                <div>
                  <div style={{ fontFamily: "'Titan One'", fontSize: 22, color: '#1A2B4E' }}>
                    {size.label} {flavor.name}
                  </div>
                  <div style={{ fontFamily: "'Fredoka'", fontSize: 14, color: '#1A2B4E', opacity: 0.7, marginTop: 2 }}>
                    + {toppingObj?.label}{extras.length ? ` + ${extras.length} extra${extras.length > 1 ? 's' : ''}` : ''}
                  </div>
                </div>
                <div style={{
                  background: '#FFD233', border: '3px solid #1A2B4E', borderRadius: 14,
                  padding: '10px 18px', fontFamily: "'Titan One'", fontSize: 26, color: '#1A2B4E',
                  boxShadow: '4px 4px 0 #1A2B4E',
                }}>
                  ${total}
                </div>
              </div>
            </div>
          </div>

          {/* Controls */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            <BuilderGroup title="1. Pick a size">
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
                {SIZES.map(s => (
                  <button
                    key={s.id}
                    onClick={() => setSize(s)}
                    style={{
                      background: size.id === s.id ? '#FFD233' : '#FFF4E0',
                      border: '4px solid #1A2B4E', borderRadius: 14,
                      padding: '14px 8px', cursor: 'pointer', fontFamily: "'Fredoka'",
                      boxShadow: size.id === s.id ? '2px 2px 0 #1A2B4E' : '4px 4px 0 #1A2B4E',
                      transform: size.id === s.id ? 'translate(2px, 2px)' : 'none',
                      transition: 'transform 0.1s',
                    }}
                  >
                    <div style={{ fontFamily: "'Titan One'", fontSize: 18, color: '#1A2B4E' }}>{s.label}</div>
                    <div style={{ fontSize: 12, color: '#1A2B4E', opacity: 0.7, marginTop: 2 }}>{s.sub}</div>
                    <div style={{ fontFamily: "'Titan One'", fontSize: 16, color: '#D74C9E', marginTop: 4 }}>${s.price}</div>
                  </button>
                ))}
              </div>
            </BuilderGroup>

            <BuilderGroup title="2. Choose a flavor">
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8 }}>
                {FLAVORS.slice(0, 12).map(f => (
                  <button
                    key={f.name}
                    onClick={() => setFlavor(f)}
                    title={f.name}
                    style={{
                      aspectRatio: '1', background: f.color, border: '3px solid #1A2B4E',
                      borderRadius: 12, cursor: 'pointer', display: 'grid', placeItems: 'center',
                      boxShadow: flavor.name === f.name ? 'inset 0 0 0 3px #FFF4E0, 4px 4px 0 #1A2B4E' : '2px 2px 0 #1A2B4E',
                      fontSize: 20, transform: flavor.name === f.name ? 'scale(1.08)' : 'scale(1)',
                      transition: 'transform 0.1s',
                    }}
                  >
                    {f.emoji}
                  </button>
                ))}
              </div>
              <div style={{ marginTop: 10, fontFamily: "'Fredoka'", fontSize: 13, color: '#FFF4E0', fontWeight: 600 }}>
                Picked: <b>{flavor.name}</b> — {flavor.blurb}
              </div>
            </BuilderGroup>

            <BuilderGroup title="3. Top it off">
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
                {TOPPINGS.map(t => (
                  <button
                    key={t.id}
                    onClick={() => setTopping(t.id)}
                    style={{
                      background: topping === t.id ? '#B6E84C' : '#FFF4E0',
                      border: '3px solid #1A2B4E', borderRadius: 12,
                      padding: '10px 12px', cursor: 'pointer', fontFamily: "'Fredoka'",
                      fontWeight: 600, fontSize: 14, color: '#1A2B4E', textAlign: 'left',
                      boxShadow: topping === t.id ? '2px 2px 0 #1A2B4E' : '3px 3px 0 #1A2B4E',
                      display: 'flex', justifyContent: 'space-between',
                    }}
                  >
                    <span>{t.label}</span>
                    <span style={{ opacity: 0.6 }}>{t.price ? `+$${t.price}` : 'free'}</span>
                  </button>
                ))}
              </div>
            </BuilderGroup>

            <BuilderGroup title="4. Extras (stack 'em)">
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
                {EXTRAS.map(e => {
                  const on = extras.includes(e.id);
                  return (
                    <button
                      key={e.id}
                      onClick={() => toggleExtra(e.id)}
                      style={{
                        background: on ? '#FF5BA0' : '#FFF4E0',
                        color: on ? '#FFF4E0' : '#1A2B4E',
                        border: '3px solid #1A2B4E', borderRadius: 12,
                        padding: '10px 12px', cursor: 'pointer', fontFamily: "'Fredoka'",
                        fontWeight: 600, fontSize: 14, textAlign: 'left',
                        boxShadow: on ? '2px 2px 0 #1A2B4E' : '3px 3px 0 #1A2B4E',
                        display: 'flex', justifyContent: 'space-between',
                      }}
                    >
                      <span>{on ? '✓ ' : '+ '}{e.label}</span>
                      <span style={{ opacity: 0.8 }}>+${e.price}</span>
                    </button>
                  );
                })}
              </div>
            </BuilderGroup>
          </div>
        </div>
      </div>
    </section>
  );
}

function BuilderGroup({ title, children }) {
  return (
    <div style={{
      background: 'rgba(26,43,78,0.25)', border: '3px solid #1A2B4E', borderRadius: 20,
      padding: 20, backdropFilter: 'blur(2px)',
    }}>
      <div style={{
        fontFamily: "'Titan One'", fontSize: 18, color: '#FFF4E0',
        marginBottom: 14, letterSpacing: '0.02em',
      }}>
        {title}
      </div>
      {children}
    </div>
  );
}

Object.assign(window, { Flavors, Builder, FLAVORS });