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

// ───── Logos ─────────────────────────────────────────────────────────────
function YogoyWordmark({ className = "", style = {} }) {
  return (
    <svg className={className} style={style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 614.92 189.39" aria-label="yogoy">
      <g fill="currentColor">
        <path d="M181.63,0h0C147.99,0,120.72,27.27,120.72,60.91v67.41c0,33.64,27.27,60.91,60.91,60.91h0c33.64,0,60.91-27.27,60.91-60.91V60.91C242.55,27.27,215.28,0,181.63,0ZM181.63,83.45c-6.16,0-11.15-4.99-11.15-11.15s4.99-11.15,11.15-11.15,11.15,4.99,11.15,11.15-4.99,11.15-11.15,11.15Z" />
        <path d="M437.22,0h0C403.58,0,376.31,27.27,376.31,60.91v67.41c0,33.64,27.27,60.91,60.91,60.91h0c33.64,0,60.91-27.27,60.91-60.91V60.91C498.13,27.27,470.86,0,437.22,0ZM437.22,83.45c-6.16,0-11.15-4.99-11.15-11.15s4.99-11.15,11.15-11.15,11.15,4.99,11.15,11.15-4.99,11.15-11.15,11.15Z" />
        <path d="M350.2,144.93h0c0,13.43-10.89,24.32-24.32,24.32h-3.07c-5.36,0-10.05,4.05-10.39,9.4-.38,5.87,4.27,10.74,10.05,10.74h3.12c24.71,0,44.75-20.04,44.75-44.75v-73.52c0-5.75-5.07-10.32-10.99-9.46-4.75.68-8.15,4.97-8.15,9.76v16.38c0,3.63-2.8,6.8-6.43,6.91-3.76.11-6.84-2.9-6.84-6.63v-34.82c0-6.37,5.17-11.54,11.54-11.54h0c5.97,0,11.35-2.52,15.15-6.55,3.53-3.74,5.71-8.76,5.71-14.31h0C370.34,9.34,361,0,349.48,0h-40.06C275.79,0,248.51,27.27,248.51,60.91v30.41c0,33.64,27.15,60.91,60.91,60.91,21.53,0,32.18-5.28,37.07-9.11,1.51-1.18,3.7-.1,3.7,1.81Z" />
        <path d="M86.38,0h0c-13.5,0-24.44,10.94-24.44,24.44v34.31c0,3.58-2.76,6.7-6.33,6.81-3.7.11-6.74-2.86-6.74-6.53V24.44C48.88,10.94,37.93,0,24.44,0h0C10.94,0,0,10.94,0,24.44v58.01c0,28.46,23.09,51.52,51.54,51.5l25.34-.02c7.19,0,13.09,5.5,13.73,12.52-.86,12.65-11.39,22.65-24.25,22.65h-3.07c-5.36,0-10.05,4.05-10.39,9.4-.38,5.87,4.27,10.74,10.05,10.74h3.12c24.71,0,44.75-20.04,44.75-44.75V24.44c0-13.5-10.94-24.44-24.44-24.44Z" />
        <path d="M590.49,0h0c-13.5,0-24.44,10.94-24.44,24.44v34.31c0,3.58-2.76,6.7-6.33,6.81-3.7.11-6.74-2.86-6.74-6.53V24.44c0-13.5-10.94-24.44-24.44-24.44h0c-13.5,0-24.44,10.94-24.44,24.44v58.01c0,28.46,23.09,51.52,51.54,51.5l25.34-.02c7.19,0,13.09,5.5,13.73,12.52-.86,12.65-11.39,22.65-24.25,22.65h-3.07c-5.36,0-10.05,4.05-10.39,9.4-.38,5.87,4.27,10.74,10.05,10.74h3.12c24.71,0,44.75-20.04,44.75-44.75V24.44c0-13.5-10.94-24.44-24.44-24.44Z" />
      </g>
    </svg>
  );
}

function YogoyIsotipo({ className = "", style = {} }) {
  return (
    <svg className={className} style={style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 197.41 203.96" aria-label="yogoy mark">
      <g fill="currentColor">
        <path d="M190.56,98.96h0c-2.1,0-4.09.97-5.39,2.62l-1.47,1.88c-7.24,9.23-18.33,14.62-30.06,14.62H42.94C19.22,118.08,0,137.31,0,161.02h0c0,23.71,19.22,42.94,42.94,42.94h71.99c45.56,0,82.49-36.93,82.49-82.49v-15.66c0-3.78-3.07-6.85-6.85-6.85Z" />
        <path d="M67.62,0h0c2.43,0,4.63,1.42,5.64,3.63l.15.34c2.53,5.55,8.06,9.12,14.16,9.12h57.07c23.71,0,42.94,19.22,42.94,42.94h0c0,23.71-19.22,42.94-42.94,42.94h-.73c-45.56,0-82.49-36.93-82.49-82.49V6.19c0-3.42,2.77-6.19,6.19-6.19Z" />
        <circle cx="32.07" cy="77.45" r="23.15" />
      </g>
    </svg>
  );
}

// ───── Pill tag ──────────────────────────────────────────────────────────
function Pill({ children, variant = "", serif = false, as = "span", ...rest }) {
  const cls = ["pill", serif && "pill--serif", variant && `pill--${variant}`].filter(Boolean).join(" ");
  const Tag = as;
  return <Tag className={cls} {...rest}>{children}</Tag>;
}

// ───── Icons ─────────────────────────────────────────────────────────────
function WhatsAppIcon({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M17.5 14.4c-.3-.2-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.4-1.5-.9-.8-1.5-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.2-.6-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4s-1.1 1-1.1 2.5 1.1 2.9 1.3 3.1c.2.2 2.2 3.4 5.3 4.7.7.3 1.3.5 1.8.6.7.2 1.4.2 2 .1.6-.1 1.8-.7 2-1.5.3-.8.3-1.4.2-1.5-.1-.1-.3-.2-.6-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
    </svg>
  );
}
function InstagramIcon({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true">
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" stroke="none" />
    </svg>
  );
}
function PinIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5s2.5 1.1 2.5 2.5S13.4 11.5 12 11.5z"/>
    </svg>
  );
}
function ArrowIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
      <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>
  );
}

// ───── Config (URLs/contact) ─────────────────────────────────────────────
const CONTACT = {
  whatsapp: "5219993095853", // 52 + 1 + 999 309 5853
  whatsappMsg: "Hola yogoy, quiero pasar por mi helado 🍦",
  instagram: "yogoy.mx",
  building: "Arthouse Altabrisa",
  mapsAddr: "Arthouse Altabrisa · C. 23 #464, Mérida",
  mapsAddrFull: "C. 23 #464, Col. Altabrisa, Mérida, Yuc.",
  phoneHuman: "999 309 5853",
  hours: "11:00 — 21:00 · todos los días",
  // Plain embed — no API key needed. Uses Plus Code + name for accurate pin.
  mapEmbed: "https://maps.google.com/maps?q=YOGOY+Arthouse+Altabrisa+Merida&z=17&output=embed",
  mapsLink: "https://share.google/WlZEDaxtnmcRCKF0b",
};
const waHref = `https://wa.me/${CONTACT.whatsapp}?text=${encodeURIComponent(CONTACT.whatsappMsg)}`;

// ───── Nav ───────────────────────────────────────────────────────────────
function Nav({ logoSize = "lg" }) {
  return (
    <nav className={`nav nav--${logoSize}`}>
      <div className="wrap nav-inner">
        <a href="#top" className="nav-logo" aria-label="yogoy home">
          <YogoyWordmark />
        </a>
        <a href={waHref} target="_blank" rel="noopener" className="nav-wa"
           data-event="whatsapp_click" data-label="nav">
          <WhatsAppIcon size={18} />
          <span>Pick up</span>
        </a>
      </div>
    </nav>
  );
}

// ───── Hero ──────────────────────────────────────────────────────────────
function Hero({ logoMega = true }) {
  return (
    <header className="hero" id="top">
      <div className="wrap">
        <div className="hero-eyebrow">
          <span className="dot" />
          <span className="mono">Frozen yogurt · Mérida, MX</span>
          <span className="hero-eyebrow-sep">·</span>
          <a className="mono mono-link" href={`https://instagram.com/${CONTACT.instagram}`} target="_blank" rel="noopener"
             data-event="instagram_click" data-label="hero_eyebrow">
            <InstagramIcon size={13} /> @{CONTACT.instagram}
          </a>
        </div>

        {logoMega && (
          <div className="hero-logo">
            <YogoyWordmark />
          </div>
        )}

        <div className="hero-main">
          <div className="hero-text">
            <p className="hero-tag">
              Tu nuevo helado<br/>
              <em>favorito.</em>
            </p>
            <p className="hero-subtag">Yogurt helado, en Mérida.</p>
            <div className="hero-ctas">
              <a href={waHref} target="_blank" rel="noopener" className="btn btn--wa"
                 data-event="whatsapp_click" data-label="hero">
                <WhatsAppIcon size={20} />
                <span>Pick up · WhatsApp</span>
              </a>
              <a href={CONTACT.mapsLink} target="_blank" rel="noopener" className="btn btn--ghost"
                 data-event="maps_click" data-label="hero">
                <PinIcon size={16} />
                <span>Cómo llegar</span>
              </a>
            </div>
            <p className="hero-pickup-note">
              Escríbenos por WhatsApp y pasa por tu helado.
            </p>
            <div className="hero-loc">
              <PinIcon size={14} />
              <span>{CONTACT.mapsAddr}</span>
            </div>
          </div>

          <div className="hero-photos">
            <div className="hero-photo-cell">
              <image-slot
                id="hero-photo-1"
                shape="rounded"
                radius="22"
                placeholder="Arrastra foto vertical"
                style={{ width: "100%", height: "100%", display: "block" }}
              ></image-slot>
            </div>
            <div className="hero-photo-cell">
              <image-slot
                id="hero-photo-2"
                shape="rounded"
                radius="22"
                placeholder="Otra foto vertical"
                style={{ width: "100%", height: "100%", display: "block" }}
              ></image-slot>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

// ───── Galería de fotos ──────────────────────────────────────────────────
function Galeria() {
  const slots = [
    { id: "g1", placeholder: "Vaso estrella" },
    { id: "g2", placeholder: "Topping close-up" },
    { id: "g3", placeholder: "Sabor de temporada" },
    { id: "g4", placeholder: "Detalle del local" },
  ];
  return (
    <section className="section section--galeria" id="galeria">
      <div className="wrap">
        <div className="eyebrow">
          <span className="dot" />
          <span className="mono">Galería · @{CONTACT.instagram}</span>
        </div>
        <div className="galeria-grid">
          {slots.map((s) => (
            <div key={s.id} className="galeria-cell">
              <image-slot
                id={s.id}
                shape="rounded"
                radius="20"
                placeholder={s.placeholder}
                style={{ width: "100%", height: "100%", display: "block" }}
              ></image-slot>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───── Sabores ───────────────────────────────────────────────────────────
const SABOR_DATA = [
  {
    title: "Clásico",
    variant: "mint",
    badge: "Siempre",
    desc: "Yogurt natural cremoso y Taro.",
    sub: "Las dos bases que nunca faltan.",
  },
  {
    title: "Frutal",
    variant: "peach",
    badge: "Rota cada 10 días",
    desc: "Un sabor frutal del momento.",
    sub: "Mango, mandarina, mamey, fresa…",
  },
  {
    title: "Cremoso",
    variant: "lav",
    badge: "Rota cada 10 días",
    desc: "Un cremoso indulgente.",
    sub: "Avellana, dark chocolate, matcha…",
  },
  {
    title: "Temporada",
    variant: "ink",
    badge: "★ Especial",
    desc: "El sabor del momento.",
    sub: "Algo único, en colaboración o de estación.",
  },
];

function Sabores() {
  return (
    <section className="section" id="sabores">
      <div className="wrap">
        <div className="eyebrow">
          <span className="dot" />
          <span className="mono">Sabores</span>
        </div>
        <h2 className="section-title">Cuatro sabores<br/>siempre listos.</h2>
        <p className="sabores-intro">
          Dos clásicos que nunca cambian y dos que rotan cada 10 días. <br className="hide-sm" />
          Pregunta al llegar cuáles están hoy en barra.
        </p>
        <div className="sabores-grid">
          {SABOR_DATA.map((s) => (
            <article key={s.title} className={`sabor-card ${s.variant}`}>
              <span className="sabor-badge">{s.badge}</span>
              <h3>{s.title}</h3>
              <p className="sabor-desc">{s.desc}</p>
              <p className="sabor-sub">{s.sub}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───── Toppings mini ─────────────────────────────────────────────────────
function ToppingsMini() {
  return (
    <section className="section section--mini" id="toppings">
      <div className="wrap">
        <div className="toppings-mini">
          <div className="toppings-mini-left">
            <span className="mono">Toppings</span>
            <h2 className="toppings-mini-title">
              30+ toppings.<br/>
              <em>Especiales</em> por temporada.
            </h2>
          </div>
          <div className="toppings-mini-right">
            <ul className="topping-cats">
              <li>Frutas frescas</li>
              <li>Barra seca</li>
              <li>Líquidos</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── Instagram feed ────────────────────────────────────────────────────
function InstagramFeed() {
  const posts = Array.from({ length: 6 }).map((_, i) => ({
    id: `ig${i + 1}`,
    caption: ["Nuevo sabor: Pistache 🌿","Jueves de 2x1","Behind the counter","Granada · temporada","Brownie + lechera","Domingo en familia"][i],
  }));
  return (
    <section className="section section--ig" id="instagram">
      <div className="wrap">
        <div className="ig-header">
          <div className="ig-handle">
            <InstagramIcon size={26} />
            <div>
              <span className="ig-handle-name">@{CONTACT.instagram}</span>
              <span className="ig-handle-sub">2.4k seguidores · Mérida, MX</span>
            </div>
          </div>
          <a href={`https://instagram.com/${CONTACT.instagram}`} target="_blank" rel="noopener" className="btn btn--outline"
             data-event="instagram_click" data-label="ig_follow_btn">
            Síguenos <ArrowIcon size={14} />
          </a>
        </div>

        <div className="ig-grid">
          {posts.map((p) => (
            <a key={p.id} href={`https://instagram.com/${CONTACT.instagram}`} target="_blank" rel="noopener" className="ig-post"
               data-event="instagram_click" data-label="ig_post">
              <image-slot
                id={p.id}
                shape="rect"
                placeholder={p.caption}
                style={{ width: "100%", height: "100%", display: "block" }}
              ></image-slot>
              <span className="ig-post-overlay">
                <InstagramIcon size={20} />
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───── Visita ────────────────────────────────────────────────────────────
function Visita() {
  return (
    <section className="section section--visita" id="visita">
      <div className="wrap">
        <div className="eyebrow">
          <span className="dot" />
          <span className="mono">Visítanos</span>
        </div>
        <h2 className="section-title">Altabrisa,<br/>Mérida.</h2>
        <p className="visit-addr">
          <strong>{CONTACT.building}</strong>
          <span className="visit-addr-sub">{CONTACT.mapsAddrFull}</span>
        </p>

        <div className="visit-layout">
          <div className="visit-left">
            <div className="visit-photo">
              <image-slot
                id="local-photo"
                shape="rounded"
                radius="22"
                placeholder="Foto del local (vertical)"
                style={{ width: "100%", aspectRatio: "3 / 4", display: "block" }}
              ></image-slot>
            </div>

            <div className="visit-info">
              <h4>Horarios</h4>
              <p className="hours-line">{CONTACT.hours}</p>
            </div>

            <div className="visit-info">
              <h4>Contacto</h4>
              <div className="contact-list">
                <a href={waHref} target="_blank" rel="noopener" className="contact-item"
                   data-event="whatsapp_click" data-label="visita_contacto">
                  <WhatsAppIcon size={18} />
                  <span>WhatsApp <em>{CONTACT.phoneHuman}</em></span>
                </a>
                <a href={`https://instagram.com/${CONTACT.instagram}`} target="_blank" rel="noopener" className="contact-item"
                   data-event="instagram_click" data-label="visita_contacto">
                  <InstagramIcon size={18} />
                  <span>@{CONTACT.instagram}</span>
                </a>
              </div>
            </div>

            <div className="visit-apps">
              <a href={CONTACT.mapsLink} target="_blank" rel="noopener" className="btn btn--dark"
                 data-event="maps_click" data-label="visita_btn">
                <PinIcon size={16} /> Ver en Google Maps
              </a>
            </div>
          </div>

          <div className="visit-map-wrap">
            <iframe
              title="Mapa yogoy"
              src={CONTACT.mapEmbed}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              className="visit-map-iframe"
              allowFullScreen
            ></iframe>
            <a href={CONTACT.mapsLink} target="_blank" rel="noopener" className="visit-map-cta"
               data-event="maps_click" data-label="visita_map_overlay">
              Abrir en Google Maps <ArrowIcon size={14} />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── Strip marquee ─────────────────────────────────────────────────────
function Strip() {
  const items = ["Yogurt hecho en casa", "Helado todo el año", "Mérida · MX", "Frozen for you", "Since 2024"];
  const loop = [...items, ...items];
  return (
    <div className="strip" aria-hidden="true">
      <div className="strip-track">
        {loop.map((t, i) => <span key={i}>{t}</span>)}
      </div>
    </div>
  );
}

// ───── Footer ────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-logo">
            <YogoyWordmark />
          </div>
          <a href={`https://instagram.com/${CONTACT.instagram}`} target="_blank" rel="noopener" className="footer-ig"
             data-event="instagram_click" data-label="footer">
            <InstagramIcon size={18} />
            <span>@{CONTACT.instagram}</span>
          </a>
        </div>
        <div className="footer-baseline">
          <span>© 2024–{new Date().getFullYear()} yogoy · Mérida, Yucatán</span>
          <a href="/privacy.html">Aviso de privacidad</a>
          <span>Altabrisa · 2CG6+M7</span>
        </div>
      </div>
    </footer>
  );
}

// ───── WhatsApp Floating Action Button ───────────────────────────────────
function WhatsAppFab() {
  return (
    <a href={waHref} target="_blank" rel="noopener" className="wa-fab" aria-label="Pick up por WhatsApp"
       data-event="whatsapp_click" data-label="fab">
      <WhatsAppIcon size={28} />
      <span className="wa-fab-label">Pick up</span>
    </a>
  );
}

Object.assign(window, {
  YogoyWordmark, YogoyIsotipo, Pill,
  Nav, Hero, Galeria, Sabores, ToppingsMini, InstagramFeed, Visita, Strip, Footer, WhatsAppFab,
});
