/* global React */
const { useEffect, useRef, useState } = React;

// ─────────── OFFERS GRID ───────────
function Offers() {
  const offers = [
    {
      tag: 'Game day cool-down',
      name: 'Medium ICEE',
      desc: 'Stay ice-cold through every half. Cherry, blue raspberry — pick your flavor.',
      currency: '$', price: '1.99', unit: '',
      pennant: '$1.99',
      theme: 'icee',
      art: <IceeIllustration />,
    },
    {
      tag: 'Afternoon showdowns',
      name: 'Monster Energy',
      desc: 'Two cans of ice-cold Monster — extra time, extra fuel.',
      currency: '$', price: '4.98', unit: '2 for',
      pennant: '2 / 4.98',
      theme: 'red',
      art: <CanIllustration label="MONSTER" />,
    },
    {
      tag: 'Stadium rounds',
      name: 'Powerade 32oz',
      desc: 'Three bottles, hydrate the whole squad. Mix & match flavors.',
      currency: '$', price: '5', unit: '3 for',
      pennant: '3 / $5',
      theme: 'yellow',
      art: <BottleIllustration />,
    },
  ];

  return (
    <section className="offers" id="offers">
      <div className="offers-inner">
        <div className="offers-head">
          <div>
            <div className="offers-eyebrow">Featured · FanZone</div>
            <h2 className="offers-title">
              Your Offer Lineup
            </h2>
          </div>
          <div className="offers-meta">
            <b>Limited time</b>
            Available all summer at participating Odessa<br />
            and Midland OXXO locations.
          </div>
        </div>

        <div className="offers-grid">
          {offers.map((o, i) => (
            <article key={i} className={`offer theme-${o.theme}`}>
              <div className="offer-pennant">{o.pennant}</div>
              <div className="offer-art">FPO — awaiting creative</div>
              <div className="offer-info">
                <span className="offer-tag">{o.tag}</span>
                <h3 className="offer-name">{o.name}</h3>
                <p className="offer-desc">{o.desc}</p>
                <div className="offer-price">
                  <span className="currency">{o.currency}</span>{o.price}
                  <span className="unit">{o.unit}</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function CoffeeIllustration() {
  return (
    <svg viewBox="0 0 240 280" xmlns="http://www.w3.org/2000/svg">
      {/* steam */}
      <g stroke="#1A1208" strokeWidth="3" fill="none" strokeLinecap="round" opacity="0.55">
        <path d="M 90 50 Q 80 30 95 15 Q 110 0 100 -10"/>
        <path d="M 120 45 Q 110 25 125 10"/>
        <path d="M 150 50 Q 140 30 155 15 Q 170 0 160 -10"/>
      </g>
      {/* cup */}
      <path d="M 60 90 L 180 90 L 168 250 Q 165 270 145 270 L 95 270 Q 75 270 72 250 Z" fill="#fff" stroke="#1A1208" strokeWidth="3"/>
      {/* sleeve */}
      <rect x="60" y="140" width="120" height="60" fill="#DF0024" stroke="#1A1208" strokeWidth="3"/>
      <rect x="60" y="155" width="120" height="30" fill="#FEE658"/>
      <text x="120" y="180" textAnchor="middle" fontFamily="Anton, Bebas Neue, sans-serif" fontSize="22" fill="#DF0024" letterSpacing="2">ANDATTI</text>
      {/* coffee surface */}
      <ellipse cx="120" cy="92" rx="60" ry="10" fill="#3a1d0f"/>
      <ellipse cx="120" cy="90" rx="60" ry="10" fill="#5a2d1a"/>
    </svg>
  );
}

function CanIllustration({ label }) {
  return (
    <svg viewBox="0 0 240 280" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(20 20)">
        <rect x="0" y="20" width="80" height="200" rx="10" fill="#1A1208" stroke="#fff" strokeWidth="3"/>
        <rect x="0" y="20" width="80" height="14" rx="6" fill="#888"/>
        <text x="40" y="130" textAnchor="middle" fontFamily="Anton, Bebas Neue, sans-serif" fontSize="20" fill="#FEE658" transform="rotate(-90 40 130)" letterSpacing="3">{label}</text>
      </g>
      <g transform="translate(120 40)">
        <rect x="0" y="20" width="80" height="200" rx="10" fill="#1A1208" stroke="#fff" strokeWidth="3"/>
        <rect x="0" y="20" width="80" height="14" rx="6" fill="#888"/>
        <text x="40" y="130" textAnchor="middle" fontFamily="Anton, Bebas Neue, sans-serif" fontSize="20" fill="#FEE658" transform="rotate(-90 40 130)" letterSpacing="3">{label}</text>
      </g>
      {/* ice cube */}
      <g transform="translate(50 230)">
        <rect width="22" height="22" fill="#fff" opacity="0.9" rx="3" transform="rotate(15)"/>
      </g>
    </svg>
  );
}

function BottleIllustration() {
  return (
    <svg viewBox="0 0 280 280" xmlns="http://www.w3.org/2000/svg">
      {[0, 90, 180].map((x, i) => (
        <g key={i} transform={`translate(${x} 30)`}>
          <path d="M 30 0 L 60 0 L 60 25 L 70 50 L 70 200 Q 70 215 55 215 L 35 215 Q 20 215 20 200 L 20 50 L 30 25 Z"
                fill={['#DF0024', '#1A4FB2', '#7B3F99'][i]} stroke="#1A1208" strokeWidth="3"/>
          <rect x="20" y="80" width="50" height="60" fill="#fff" stroke="#1A1208" strokeWidth="2"/>
          <text x="45" y="118" textAnchor="middle" fontFamily="Anton, Bebas Neue, sans-serif" fontSize="14" fill="#1A1208">POWER</text>
        </g>
      ))}
    </svg>
  );
}

function IceeIllustration() {
  return (
    <svg viewBox="0 0 240 300" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="dome-grad" cx="42%" cy="38%" r="58%">
          <stop offset="0%" stopColor="#FF3348"/>
          <stop offset="100%" stopColor="#B5001D"/>
        </radialGradient>
        <linearGradient id="cup-shadow" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="rgba(0,0,0,0.12)"/>
          <stop offset="100%" stopColor="rgba(0,0,0,0)"/>
        </linearGradient>
      </defs>

      {/* Straw */}
      <rect x="144" y="8" width="11" height="115" rx="5"
            fill="#DF0024" stroke="#B5001D" strokeWidth="1.5"
            transform="rotate(6 149 65)"/>
      <rect x="147" y="8" width="4" height="115" rx="2"
            fill="#FF7777" opacity="0.5"
            transform="rotate(6 149 65)"/>

      {/* Slushie dome body */}
      <path d="M 52 124 Q 54 56 120 46 Q 186 56 188 124 Z"
            fill="url(#dome-grad)"/>
      {/* Dome highlight streak */}
      <path d="M 72 112 Q 82 68 118 60 Q 150 64 162 92"
            fill="none" stroke="#FF6677" strokeWidth="6"
            strokeLinecap="round" opacity="0.55"/>
      {/* Dome rim ellipse */}
      <ellipse cx="120" cy="124" rx="68" ry="15" fill="#D4001C"/>

      {/* Cup body trapezoid */}
      <path d="M 52 124 L 188 124 L 168 272 L 72 272 Z"
            fill="#fff" stroke="#1A1208" strokeWidth="2.5"/>

      {/* Left red stripe */}
      <path d="M 52 124 L 92 124 L 84 272 L 72 272 Z" fill="#DF0024"/>
      {/* Blue center panel */}
      <path d="M 92 124 L 148 124 L 138 272 L 84 272 Z" fill="#1252A3"/>
      {/* Right red stripe */}
      <path d="M 148 124 L 188 124 L 168 272 L 138 272 Z" fill="#DF0024"/>

      {/* Cup rim strip */}
      <ellipse cx="120" cy="124" rx="68" ry="9"
               fill="#D8D8D8" stroke="#1A1208" strokeWidth="1.5"/>

      {/* ICEE text */}
      <text x="120" y="198" textAnchor="middle"
            fontFamily="Anton, Bebas Neue, sans-serif"
            fontSize="34" fill="#fff" letterSpacing="4"
            style={{ filter: 'drop-shadow(0 2px 0 rgba(0,0,0,0.3))' }}>
        ICEE
      </text>
      {/* tagline */}
      <text x="120" y="218" textAnchor="middle"
            fontFamily="Geist, sans-serif"
            fontSize="10" fill="rgba(255,255,255,0.75)" letterSpacing="1">
        Coldest Drink in Town
      </text>

      {/* Condensation drops */}
      <circle cx="66" cy="170" r="3.5" fill="rgba(255,255,255,0.55)"/>
      <circle cx="172" cy="182" r="2.5" fill="rgba(255,255,255,0.55)"/>
      <circle cx="63" cy="220" r="3"   fill="rgba(255,255,255,0.45)"/>
      <circle cx="175" cy="230" r="3.5" fill="rgba(255,255,255,0.55)"/>
      <circle cx="174" cy="152" r="2"  fill="rgba(255,255,255,0.5)"/>
      <circle cx="67" cy="250" r="2.5" fill="rgba(255,255,255,0.4)"/>
      <line x1="170" y1="144" x2="168" y2="162"
            stroke="rgba(255,255,255,0.35)" strokeWidth="2.5" strokeLinecap="round"/>
      <line x1="68" y1="192" x2="67" y2="208"
            stroke="rgba(255,255,255,0.3)" strokeWidth="2" strokeLinecap="round"/>

      {/* Shadow on left edge of cup */}
      <path d="M 52 124 L 72 272 L 84 272 L 92 124 Z"
            fill="url(#cup-shadow)"/>
    </svg>
  );
}

window.Offers = Offers;

// ─────────── APP DOWNLOAD BAND ───────────
function AppBand() {
  return (
    <section className="app-band">
      <div className="app-inner">
        <div>
          <div className="eyebrow">⚽ OXXO Rewards</div>
          <h2>Want to <em>Score</em> More Deals?</h2>
          <p>
            Download the Easy Coins app to save on snacks, fuel and more.
          </p>
          <div className="store-badges">
            <a href="https://apps.apple.com" className="store-badge" target="_blank" rel="noopener" aria-label="Download on the App Store">
              <svg width="135" height="40" viewBox="0 0 135 40" xmlns="http://www.w3.org/2000/svg">
                <rect x="0.5" y="0.5" width="134" height="39" rx="7.5" fill="#000" stroke="#A6A6A6"/>
                {/* Apple logo */}
                <path d="M26.47 20.3c-.03-3.26 2.66-4.84 2.78-4.92-1.52-2.22-3.88-2.52-4.72-2.55-2-.2-3.9 1.18-4.91 1.18-1.02 0-2.58-1.15-4.25-1.12-2.17.03-4.18 1.27-5.3 3.2-2.27 3.94-.58 9.77 1.62 12.96 1.08 1.56 2.36 3.3 4.04 3.24 1.63-.07 2.24-1.05 4.2-1.05 1.96 0 2.52 1.05 4.23 1.02 1.75-.03 2.85-1.58 3.92-3.15 1.24-1.8 1.75-3.55 1.78-3.64-.04-.02-3.37-1.29-3.4-5.17zm-3.19-9.5c.9-1.09 1.5-2.6 1.33-4.11-1.29.05-2.85.86-3.77 1.93-.83.96-1.56 2.5-1.36 3.97 1.44.11 2.9-.73 3.8-1.79z" fill="#fff"/>
                {/* Download on the */}
                <text x="48" y="14" fontFamily="-apple-system, 'Helvetica Neue', sans-serif" fontSize="9" fill="#fff" letterSpacing="0.3">Download on the</text>
                {/* App Store */}
                <text x="47" y="29" fontFamily="-apple-system, 'Helvetica Neue', sans-serif" fontSize="17" fontWeight="600" fill="#fff" letterSpacing="-0.3">App Store</text>
              </svg>
            </a>
            <a href="https://play.google.com" className="store-badge" target="_blank" rel="noopener" aria-label="Get it on Google Play">
              <svg width="135" height="40" viewBox="0 0 135 40" xmlns="http://www.w3.org/2000/svg">
                <rect x="0.5" y="0.5" width="134" height="39" rx="7.5" fill="#000" stroke="#A6A6A6"/>
                {/* Google Play triangle icon */}
                <path d="M13 9.5l14.5 10.5L13 30.5V9.5z" fill="url(#gp-grad-a)"/>
                <path d="M13 9.5l8.5 8.5-8.5 2z" fill="url(#gp-grad-b)" opacity="0.8"/>
                <path d="M13 30.5l8.5-8.5-8.5-2z" fill="url(#gp-grad-c)" opacity="0.8"/>
                <path d="M27.5 20L32 17.5 27.5 20z" fill="url(#gp-grad-d)" opacity="0.6"/>
                <defs>
                  <linearGradient id="gp-grad-a" x1="13" y1="20" x2="27.5" y2="20" gradientUnits="userSpaceOnUse">
                    <stop offset="0%" stopColor="#00C6FF"/>
                    <stop offset="100%" stopColor="#00E5C0"/>
                  </linearGradient>
                  <linearGradient id="gp-grad-b" x1="13" y1="9.5" x2="21.5" y2="18" gradientUnits="userSpaceOnUse">
                    <stop offset="0%" stopColor="#FFE000"/>
                    <stop offset="100%" stopColor="#FFBD00"/>
                  </linearGradient>
                  <linearGradient id="gp-grad-c" x1="13" y1="22" x2="21.5" y2="30.5" gradientUnits="userSpaceOnUse">
                    <stop offset="0%" stopColor="#FF3A44"/>
                    <stop offset="100%" stopColor="#C31162"/>
                  </linearGradient>
                  <linearGradient id="gp-grad-d" x1="27.5" y1="17.5" x2="32" y2="20" gradientUnits="userSpaceOnUse">
                    <stop offset="0%" stopColor="#32A071"/>
                    <stop offset="100%" stopColor="#2DA771"/>
                  </linearGradient>
                </defs>
                {/* Get it on */}
                <text x="40" y="14" fontFamily="-apple-system, 'Helvetica Neue', sans-serif" fontSize="9" fill="#fff" letterSpacing="0.3">GET IT ON</text>
                {/* Google Play */}
                <text x="39" y="29" fontFamily="-apple-system, 'Helvetica Neue', sans-serif" fontSize="16" fontWeight="600" fill="#fff" letterSpacing="-0.3">Google Play</text>
              </svg>
            </a>
            <button className="btn btn-yellow">Learn More →</button>
          </div>
        </div>
        <div className="phone-mock">
          <PhoneMock />
        </div>
      </div>
    </section>
  );
}

function PhoneMock() {
  return (
    <svg viewBox="0 0 300 420" xmlns="http://www.w3.org/2000/svg">
      <rect x="40" y="10" width="220" height="400" rx="32" fill="#1A1208" stroke="#FEE658" strokeWidth="3"/>
      <rect x="52" y="22" width="196" height="376" rx="22" fill="#DF0024"/>
      {/* notch */}
      <rect x="120" y="22" width="60" height="10" rx="5" fill="#1A1208"/>
      {/* content */}
      <g>
        <text x="150" y="80" textAnchor="middle" fontFamily="Anton, Bebas Neue, sans-serif" fontSize="32" fill="#FEE658" letterSpacing="1">FANZONE</text>
        <rect x="68" y="100" width="164" height="64" rx="10" fill="#fff"/>
        <text x="150" y="126" textAnchor="middle" fontFamily="Anton, Bebas Neue, sans-serif" fontSize="14" fill="#DF0024">ANDATTI COFFEE</text>
        <text x="150" y="150" textAnchor="middle" fontFamily="Geist, sans-serif" fontSize="22" fontWeight="700" fill="#1A1208">$1 ANY SIZE</text>
        <rect x="68" y="174" width="164" height="64" rx="10" fill="#FEE658"/>
        <text x="150" y="200" textAnchor="middle" fontFamily="Anton, Bebas Neue, sans-serif" fontSize="14" fill="#DF0024">MONSTER 2-FOR</text>
        <text x="150" y="224" textAnchor="middle" fontFamily="Geist, sans-serif" fontSize="22" fontWeight="700" fill="#1A1208">$4.98</text>
        <rect x="68" y="248" width="164" height="64" rx="10" fill="#fff"/>
        <text x="150" y="274" textAnchor="middle" fontFamily="Anton, Bebas Neue, sans-serif" fontSize="14" fill="#DF0024">POWERADE 3 FOR $5</text>
        <text x="150" y="298" textAnchor="middle" fontFamily="Geist, sans-serif" fontSize="22" fontWeight="700" fill="#1A1208">$4.00</text>
        <rect x="68" y="332" width="164" height="44" rx="22" fill="#FEE658"/>
        <text x="150" y="360" textAnchor="middle" fontFamily="Geist, sans-serif" fontSize="14" fontWeight="700" fill="#DF0024" letterSpacing="2">FIND MY OXXO</text>
      </g>
    </svg>
  );
}

window.AppBand = AppBand;

// ─────────── LOCATOR ───────────
function Locator() {
  return (
    <section className="locator" id="locator">
      <div className="locator-inner">
        <h2>See you at OXXO.</h2>
        <p>Enter your ZIP — we'll find the closest store with FanZone offers.</p>
        <form className="locator-form" onSubmit={(e) => e.preventDefault()}>
          <input type="text" placeholder="ZIP code (e.g. 79761)" />
          <button type="submit">📍 Find a Store</button>
        </form>
      </div>
    </section>
  );
}
window.Locator = Locator;

// ─────────── FOOTER ───────────
function Footer() {
  return (
    <>
      <footer>
        <div className="footer-inner">
          <div>
            <img src="assets/oxxo-logo.png" alt="OXXO" style={{ height: 60 }} />
            <p className="footer-blurb">
              OXXO convenience stores offer fuel, food, and daily essentials with
              surprising quality, service, and value—bringing a little more
              happiness to life on the go.
            </p>
          </div>
          <div className="footer-newsletter">
            <h4>Stay in the FanZone</h4>
            <form onSubmit={(e) => e.preventDefault()}>
              <input type="email" placeholder="Your email" />
              <button>Subscribe</button>
            </form>
          </div>
          <div className="footer-links">
            <a href="#">Who We Are</a>
            <a href="#">Careers</a>
            <a href="#">Contact</a>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">SMS Terms</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>©2026 OXXO · All rights reserved</span>
          <div className="socials">
            <a href="#" aria-label="Facebook"><img src="assets/icon-facebook.png" alt=""/></a>
            <a href="#" aria-label="LinkedIn"><img src="assets/icon-linkedin.png" alt=""/></a>
          </div>
        </div>
      </footer>
      <div className="footer-stripe" />
    </>
  );
}
window.Footer = Footer;
