/* global React, A7Logo, Icon, Button */

// ===========================================================
// Área 7 — Landing sections
// ===========================================================

const { useState: useS, useEffect: useE, useRef: useR } = React;

// ---------- NAVBAR (sticky) ----------
function NavBar({ name, onReserveClick, openMenu, onOpenMenu }) {
  const [scrolled, setScrolled] = useS(false);
  useE(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      transition: 'background 220ms ease, backdrop-filter 220ms ease, box-shadow 220ms ease',
      background: scrolled ? 'rgba(0,0,0,0.72)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px)' : 'blur(0px)',
      borderBottom: scrolled ? '1px solid var(--hair-2)' : '1px solid transparent',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 72,
      }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <A7Logo size={40}/>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <span style={{ fontWeight: 900, fontSize: 18, letterSpacing: '0.04em' }}>{name}</span>
            <span style={{ fontSize: 10, fontWeight: 700, color: 'var(--fill-tertiary)', letterSpacing: '0.18em' }}>
              SAN CARLOS · MENDOZA
            </span>
          </div>
        </a>
        <nav className="desktop-only" style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          {[
            ['Reservar', '#reservar'],
            ['Grabaciones', '#vivilo'],
            ['Servicios', '#servicios'],
            ['Dónde estamos', '#ubicacion'],
          ].map(([label, href]) => (
            <a key={href} href={href} style={{
              fontSize: 14, fontWeight: 700, color: 'var(--fill-secondary)',
              transition: 'color 150ms ease',
            }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--fill-primary)'}
            onMouseLeave={e => e.currentTarget.style.color = 'var(--fill-secondary)'}
            >{label}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <a
            href="https://wa.me/542617747501" target="_blank" rel="noopener noreferrer"
            className="desktop-only"
            style={{
              width: 44, height: 44, borderRadius: 999,
              background: 'var(--surface-2)', boxShadow: 'inset 0 0 0 1px var(--hair-3)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}
            aria-label="WhatsApp"
          ><Icon name="whatsapp" size={18} color="var(--accent)"/></a>
          <Button size="sm" onClick={onReserveClick}>Reservar</Button>
          <button
            className="mobile-only"
            onClick={onOpenMenu}
            style={{
              width: 44, height: 44, borderRadius: 999,
              background: 'var(--surface-2)', boxShadow: 'inset 0 0 0 1px var(--hair-3)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}
            aria-label="Menú"
          ><Icon name="menu" size={20}/></button>
        </div>
      </div>
    </header>
  );
}

// ---------- HERO ----------
function Hero({ name, tagline, onReserveClick }) {
  return (
    <section id="top" style={{ position: 'relative', overflow: 'hidden' }}>
      {/* atmospheric bg */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: "url(assets/field-night.svg)",
        backgroundSize: 'cover', backgroundPosition: 'center',
        opacity: 0.85,
      }}/>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.95) 100%)',
      }}/>
      {/* neon halo behind type */}
      <div style={{
        position: 'absolute', left: '50%', top: '52%', transform: 'translate(-50%, -50%)',
        width: 700, height: 700, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(90,247,169,0.22) 0%, rgba(90,247,169,0) 65%)',
        pointerEvents: 'none',
      }}/>

      <div className="container" style={{ position: 'relative', zIndex: 2, padding: '72px 20px 96px' }}>
        {/* Recording badge */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '8px 14px 8px 10px', borderRadius: 999,
          background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(14px)',
          boxShadow: 'inset 0 0 0 1px var(--accent), 0 0 30px var(--accent-glow)',
          marginBottom: 32,
        }}>
          <span className="pulse-dot" style={{ background: 'var(--accent)' }}/>
          <Icon name="video" size={16} color="var(--accent)"/>
          <span style={{ fontWeight: 800, fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
            Grabamos tu partido
          </span>
        </div>

        {/* Headline */}
        <h1 className="h-display h-hero" style={{
          margin: 0, color: 'var(--fill-primary)',
        }}>
          <span style={{ display: 'block' }}>Tu partido</span>
          <span style={{
            display: 'block',
            background: 'linear-gradient(90deg, var(--accent) 0%, #d2ff72 100%)',
            WebkitBackgroundClip: 'text', backgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            textShadow: '0 0 60px rgba(90,247,169,0.4)',
          }}>
            empieza acá.
          </span>
        </h1>

        <p style={{
          marginTop: 24, maxWidth: 540,
          fontSize: 18, lineHeight: 1.5, fontWeight: 500, color: 'rgba(251,251,251,0.85)',
        }}>
          {tagline}
        </p>

        <div style={{ marginTop: 36, display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center' }}>
          <Button onClick={onReserveClick} iconAfter="arrow-right">Reservar ahora</Button>
        </div>
      </div>
    </section>
  );
}

// ---------- CALENDAR SECTION ----------
function CalendarSection({ children }) {
  return (
    <section id="reservar" style={{
      padding: '88px 0 80px', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', left: '-10%', top: '-20%',
        width: 600, height: 600, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(90,247,169,0.10) 0%, rgba(90,247,169,0) 70%)',
        pointerEvents: 'none',
      }}/>
      <div className="container" style={{ position: 'relative' }}>
        <SectionHeader
          eyebrow="Reservar"
          title={<><span>Mirá los turnos.</span><br/><span style={{ color: 'var(--accent)' }}>Reservá en 3 pasos.</span></>}
          desc="Tocá un día para ver los horarios. Cada turno es de 1 hora. Pagás al llegar."
        />
        <div style={{ marginTop: 40 }}>{children}</div>
      </div>
    </section>
  );
}

// ---------- VIVILO DE NUEVO ----------
function ViviloDeNuevo({ onAdd }) {
  return (
    <section id="vivilo" style={{
      padding: '96px 0',
      background: 'linear-gradient(180deg, #000 0%, #050a07 50%, #000 100%)',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: "url(assets/field-closeup.svg)",
        backgroundSize: 'cover', backgroundPosition: 'center',
        opacity: 0.4, mixBlendMode: 'lighten',
      }}/>
      <div style={{ position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.85) 100%)' }}/>
      <div className="container" style={{ position: 'relative' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)', gap: 56, alignItems: 'center',
        }} className="vivilo-grid">

          <div>
            <div className="chip chip-accent" style={{ marginBottom: 20 }}>
              <Icon name="film" size={14}/> Servicio único en la zona
            </div>
            <h2 className="h-display h-section">
              Grabamos cada jugada.
              <br/>
              <span style={{
                background: 'linear-gradient(90deg, var(--accent), #d2ff72)',
                WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent',
              }}>Revivila cuando quieras.</span>
            </h2>
            <p style={{ marginTop: 24, fontSize: 18, lineHeight: 1.5, color: 'rgba(251,251,251,0.78)', maxWidth: 540 }}>
              Mientras vos jugás, nuestras cámaras se ocupan. Te mandamos el video por WhatsApp
              o un link para descargarlo. Compartilo con el equipo y revive el gol del año.
            </p>

            <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                { i: 'film', t: 'Partido completo en HD', s: 'Tu partido entero, listo para mirar.', p: '$8.000' },
                { i: 'scissors', t: 'Clips de tus mejores jugadas', s: 'Editamos los goles y mejores momentos.', p: '$4.500' },
                { i: 'whatsapp', t: 'Entrega por WhatsApp', s: 'Te llega en menos de 24 horas.', p: 'Incluido' },
              ].map((f, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 14,
                  padding: 14, borderRadius: 14,
                  background: 'rgba(10,10,10,0.7)', backdropFilter: 'blur(6px)',
                  boxShadow: 'inset 0 0 0 1px var(--hair-3)',
                }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: 12, flexShrink: 0,
                    background: 'var(--accent-soft)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: 'var(--accent)',
                  }}><Icon name={f.i} size={20}/></div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 800, fontSize: 15 }}>{f.t}</div>
                    <div style={{ fontSize: 13, color: 'var(--fill-tertiary)', marginTop: 2 }}>{f.s}</div>
                  </div>
                  <div className="num" style={{
                    fontWeight: 800, fontSize: 14, color: 'var(--accent)',
                  }}>{f.p}</div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Button onClick={onAdd} icon="plus">Agregar grabación</Button>
              <a href="#" onClick={e => e.preventDefault()} style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '18px 24px', fontWeight: 800, fontSize: 14,
                color: 'var(--fill-secondary)', letterSpacing: '0.04em',
              }}>
                Ver un partido grabado <Icon name="arrow-up-right" size={16}/>
              </a>
            </div>
          </div>

          {/* Cinema preview card */}
          <CinemaCard/>
        </div>
      </div>
    </section>
  );
}

function CinemaCard() {
  // animated mock of a video player thumbnail
  const [time, setTime] = useS(38);
  useE(() => {
    const id = setInterval(() => setTime(t => (t + 1) % 100), 700);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{
      borderRadius: 22, overflow: 'hidden',
      background: '#0a0a0a',
      boxShadow: 'inset 0 0 0 1px var(--hair-3), 0 30px 80px rgba(0,0,0,0.6)',
      position: 'relative',
    }}>
      <div style={{
        aspectRatio: '16 / 10',
        backgroundImage: "url(assets/field-aerial.svg)",
        backgroundSize: 'cover', backgroundPosition: 'center',
        position: 'relative',
      }}>
        {/* play */}
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <div className="shine" style={{
            width: 84, height: 84, borderRadius: '50%',
            background: 'var(--accent)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 0 60px var(--accent-glow)',
          }}>
            <svg width="28" height="28" viewBox="0 0 24 24" fill="var(--accent-ink)">
              <polygon points="7,4 21,12 7,20"/>
            </svg>
          </div>
        </div>
        {/* live tag */}
        <div style={{
          position: 'absolute', top: 14, left: 14,
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '6px 10px', borderRadius: 999,
          background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)',
          boxShadow: 'inset 0 0 0 1px rgba(244,63,94,0.5)',
          fontWeight: 900, fontSize: 11, color: 'var(--live)', letterSpacing: '0.1em',
        }}>
          <span className="pulse-dot"/> EN VIVO
        </div>
        {/* score */}
        <div style={{
          position: 'absolute', top: 14, right: 14,
          padding: '10px 14px', borderRadius: 14,
          background: 'rgba(10,10,10,0.7)', backdropFilter: 'blur(10px)',
          boxShadow: 'inset 0 0 0 1px var(--hair-3)',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <Team color="var(--accent)" abbr="EQA" score="3"/>
          <span style={{ color: 'var(--fill-tertiary)', fontWeight: 900, fontSize: 14 }}>×</span>
          <Team color="#d2ff72" abbr="EQB" score="2"/>
        </div>
      </div>
      {/* progress */}
      <div style={{ padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontWeight: 800, fontSize: 14 }}>F5 · Sábado 21:00</div>
          <div className="num" style={{ fontSize: 12, color: 'var(--fill-tertiary)', fontWeight: 700 }}>
            {Math.floor(time / 10) + 22}:{String((time * 6) % 60).padStart(2, '0')} / 60:00
          </div>
        </div>
        <div style={{ height: 4, borderRadius: 999, background: 'var(--surface-3)', position: 'relative' }}>
          <div style={{
            position: 'absolute', left: 0, top: 0, bottom: 0,
            width: `${time}%`, background: 'var(--accent)', borderRadius: 999,
            boxShadow: '0 0 12px var(--accent-glow)',
            transition: 'width 700ms linear',
          }}/>
          <div style={{
            position: 'absolute', left: `${time}%`, top: '50%', transform: 'translate(-50%, -50%)',
            width: 12, height: 12, borderRadius: '50%', background: '#fff',
            boxShadow: '0 0 0 4px rgba(90,247,169,0.32)',
          }}/>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          {['Gol 22:14', 'Gol 31:02', 'Asistencia 47:38'].map((c, i) => (
            <div key={i} className="chip" style={{ fontSize: 11 }}>
              <Icon name="sparkle" size={12} color="var(--accent)"/> {c}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Team({ color, abbr, score }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
      <div style={{
        width: 24, height: 24, borderRadius: '50%',
        background: color, color: '#000',
        fontSize: 10, fontWeight: 900,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>{abbr.slice(0, 1)}</div>
      <span style={{ fontWeight: 700, fontSize: 12, color: 'var(--fill-secondary)' }}>{abbr}</span>
      <span className="num" style={{ fontWeight: 900, fontSize: 18 }}>{score}</span>
    </div>
  );
}

// ---------- SERVICIOS ----------
function Servicios() {
  const items = [
    { i: 'wifi',     t: 'Wi-Fi', s: 'En toda la cancha' },
    { i: 'shower',   t: 'Vestuarios', s: 'Con duchas calientes' },
    { i: 'parking',  t: 'Estacionamiento', s: 'Propio y gratuito' },
    { i: 'grill',    t: 'Parrilla', s: 'Para después del partido' },
    { i: 'cake',     t: 'Quincho', s: 'Para cumpleaños y eventos' },
    { i: 'trophy',   t: 'Torneos', s: 'Inscribite con tu equipo' },
    { i: 'video',    t: 'Grabaciones', s: 'Único en la zona' },
  ];
  return (
    <section id="servicios" style={{ padding: '88px 0' }}>
      <div className="container">
        <SectionHeader
          eyebrow="Servicios"
          title={<>Todo lo que <span style={{ color: 'var(--accent)' }}>necesitás</span> para el partido.</>}
          desc="No es solo cancha. Es lugar para juntarse, festejar y volver."
        />
        <div style={{
          marginTop: 48, display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 14,
        }}>
          {items.map((it, i) => (
            <div key={i} style={{
              padding: 20, borderRadius: 16,
              background: 'var(--surface-1)',
              boxShadow: 'inset 0 0 0 1px var(--hair-2)',
              transition: 'background 200ms ease, transform 200ms ease, box-shadow 200ms ease',
              cursor: 'default',
            }}
            onMouseEnter={e => {
              e.currentTarget.style.background = 'var(--surface-2)';
              e.currentTarget.style.boxShadow = 'inset 0 0 0 1px var(--accent), 0 0 40px rgba(90,247,169,0.18)';
            }}
            onMouseLeave={e => {
              e.currentTarget.style.background = 'var(--surface-1)';
              e.currentTarget.style.boxShadow = 'inset 0 0 0 1px var(--hair-2)';
            }}
            >
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: 'var(--surface-2)', color: 'var(--accent)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 14,
              }}><Icon name={it.i} size={22}/></div>
              <div style={{ fontWeight: 800, fontSize: 16 }}>{it.t}</div>
              <div style={{ fontSize: 13, color: 'var(--fill-tertiary)', marginTop: 4 }}>{it.s}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- DONDE ESTAMOS ----------
function Ubicacion({ name }) {
  return (
    <section id="ubicacion" style={{ padding: '80px 0' }}>
      <div className="container">
        <SectionHeader
          eyebrow="Dónde estamos"
          title={<>Te esperamos en <span style={{ color: 'var(--accent)' }}>San Carlos</span>.</>}
          desc="Al lado del Aserradero Luffi y enfrente de Flia Suárez. Carril Nacional S/N, San Carlos, Mendoza."
        />
        <div className="ubic-grid" style={{
          marginTop: 40, display: 'grid', gridTemplateColumns: '1fr', gap: 24,
        }}>
          {/* Map placeholder (stylized) */}
          <div style={{
            borderRadius: 20, overflow: 'hidden', position: 'relative',
            aspectRatio: '16 / 11', minHeight: 280,
            background: '#0a0a0a', boxShadow: 'inset 0 0 0 1px var(--hair-3)',
          }}>
            <MapStyled/>
            <a href="https://maps.app.goo.gl/ogkJBcYP7iMay4cs9" target="_blank" rel="noopener noreferrer" style={{
              position: 'absolute', bottom: 16, left: 16,
            }}>
              <Button size="sm" variant="primary" icon="pin">Cómo llegar</Button>
            </a>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <InfoRow icon="pin" k="Dirección" v="Carril Nacional S/N, San Carlos, Mendoza"/>
            <InfoRow icon="clock" k="Horarios" v={<>Lunes a Lunes<br/>10:00 a 01:00 hs · feriados incluidos</>}/>
            <InfoRow icon="phone" k="Teléfono" v="+5492622437406" href="tel:+5492622437406"/>
            <InfoRow icon="whatsapp" k="WhatsApp" v="Respondemos en minutos" href="https://wa.me/542617747501"/>
            <InfoRow icon="instagram" k="Instagram" v={<>@area7futbol</>} href="https://www.instagram.com/area7futbol/"/>
          </div>
        </div>
      </div>
    </section>
  );
}

function InfoRow({ icon, k, v, href }) {
  const inner = (
    <div style={{
      display: 'flex', alignItems: 'flex-start', gap: 16,
      padding: 16, borderRadius: 14,
      background: 'var(--surface-1)', boxShadow: 'inset 0 0 0 1px var(--hair-2)',
      transition: 'background 150ms ease',
      cursor: href ? 'pointer' : 'default',
    }}
    onMouseEnter={e => href && (e.currentTarget.style.background = 'var(--surface-2)')}
    onMouseLeave={e => href && (e.currentTarget.style.background = 'var(--surface-1)')}
    >
      <div style={{
        width: 40, height: 40, borderRadius: 10, flexShrink: 0,
        background: 'var(--accent-soft)', color: 'var(--accent)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><Icon name={icon} size={20}/></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 11, fontWeight: 900, letterSpacing: '0.14em', color: 'var(--fill-tertiary)' }}>
          {k.toUpperCase()}
        </div>
        <div style={{ fontWeight: 700, fontSize: 15, marginTop: 4, color: 'var(--fill-primary)', lineHeight: 1.4 }}>{v}</div>
      </div>
      {href && <Icon name="arrow-up-right" size={18} color="var(--fill-tertiary)"/>}
    </div>
  );
  return href ? <a href={href} target="_blank" rel="noopener noreferrer">{inner}</a> : inner;
}

// Stylized map "card"
function MapStyled() {
  return (
    <svg viewBox="0 0 800 500" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"
      style={{ display: 'block' }}>
      <defs>
        <linearGradient id="mapbg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#0a1f15"/>
          <stop offset="100%" stopColor="#020806"/>
        </linearGradient>
      </defs>
      <rect width="800" height="500" fill="url(#mapbg)"/>
      {/* streets grid (rough) */}
      <g stroke="rgba(255,255,255,0.1)" strokeWidth="1.5" fill="none">
        <path d="M-50 380 Q 200 360 400 380 T 850 360"/>
        <path d="M-50 200 Q 200 220 400 200 T 850 220"/>
        <path d="M120 -10 L 140 510"/>
        <path d="M300 -10 L 320 510"/>
        <path d="M520 -10 L 540 510"/>
        <path d="M680 -10 L 700 510"/>
      </g>
      {/* main road (route 40) */}
      <path d="M-50 290 Q 200 270 400 290 T 850 270"
        stroke="rgba(90,247,169,0.3)" strokeWidth="6" fill="none"/>
      <path d="M-50 290 Q 200 270 400 290 T 850 270"
        stroke="rgba(90,247,169,0.7)" strokeWidth="1.5" fill="none" strokeDasharray="6 8"/>

      {/* blocks */}
      <g fill="rgba(255,255,255,0.04)">
        <rect x="160" y="220" width="120" height="60" rx="3"/>
        <rect x="340" y="220" width="160" height="60" rx="3"/>
        <rect x="540" y="220" width="120" height="60" rx="3"/>
        <rect x="160" y="310" width="120" height="60" rx="3"/>
        <rect x="540" y="310" width="120" height="60" rx="3"/>
      </g>

      {/* street label - Del Bajo */}
      <g transform="translate(380 310)">
        <rect x="-50" y="-12" width="100" height="24" rx="12" fill="rgba(15,40,28,0.9)"/>
        <text textAnchor="middle" y="4" fontSize="9" fontWeight="700" fill="rgba(251,251,251,0.78)">DEL BAJO</text>
      </g>

      {/* reference - Aserradero Luffi */}
      <g transform="translate(260 240)">
        <rect x="-60" y="-12" width="120" height="24" rx="12" fill="rgba(15,40,28,0.9)"/>
        <text textAnchor="middle" y="4" fontSize="10" fontWeight="900" fill="rgba(251,251,251,0.78)">ASERRADERO LUFFI</text>
      </g>

      {/* reference - Flia Suarez (enfrente cruzando la calle) */}
      <g transform="translate(540 340)">
        <rect x="-50" y="-12" width="100" height="24" rx="12" fill="rgba(15,40,28,0.9)"/>
        <text textAnchor="middle" y="4" fontSize="10" fontWeight="900" fill="rgba(251,251,251,0.78)">FLIA SUAREZ</text>
      </g>

      {/* pin */}
      <g transform="translate(540 260)">
        <circle r="42" fill="rgba(90,247,169,0.12)" className="spin-slow"/>
        <circle r="28" fill="rgba(90,247,169,0.2)"/>
        <g transform="translate(0 -8)">
          <path d="M0 18 C -14 4 -14 -10 0 -10 C 14 -10 14 4 0 18 Z" fill="var(--accent)" stroke="#000" strokeWidth="2"/>
          <circle cy="-3" r="4" fill="#000"/>
        </g>
        <text textAnchor="middle" y="38" fontSize="11" fontWeight="900" fill="var(--accent)" letterSpacing="1">ÁREA 7</text>
      </g>
    </svg>
  );
}

// ---------- FOOTER ----------
function Footer({ name }) {
  return (
    <footer style={{
      borderTop: '1px solid var(--hair-2)',
      padding: '56px 0 32px',
    }}>
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)', gap: 40,
          marginBottom: 40,
        }} className="footer-grid">
          <div style={{ maxWidth: 380 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <A7Logo size={48}/>
              <div className="h-display" style={{ fontSize: 28 }}>{name}</div>
            </div>
            <p style={{ color: 'var(--fill-secondary)', fontSize: 14, lineHeight: 1.5 }}>
              Cancha de fútbol 7 en San Carlos, Mendoza.
              Grabamos tu partido. Reservás en 1 minuto.
            </p>
            <div style={{ marginTop: 18, display: 'flex', gap: 8 }}>
              {[
                { i: 'whatsapp', l: 'WhatsApp', h: 'https://wa.me/542617747501' },
                { i: 'instagram', l: 'Instagram', h: 'https://www.instagram.com/area7futbol/' },
              ].map(s => (
                <a key={s.i} href={s.h} target="_blank" rel="noopener noreferrer" aria-label={s.l} style={{
                  width: 40, height: 40, borderRadius: 999,
                  background: 'var(--surface-2)', boxShadow: 'inset 0 0 0 1px var(--hair-3)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--accent)',
                }}><Icon name={s.i} size={18}/></a>
              ))}
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }}>
            <FooterCol title="Página" links={[
              ['Reservar', '#reservar'],
              ['Grabaciones', '#vivilo'],
              ['Servicios', '#servicios'],
              ['Ubicación', '#ubicacion'],
            ]}/>
            <FooterCol title="Contacto" links={[
              ['WhatsApp', 'https://wa.me/542617747501'],
              ['Instagram', 'https://www.instagram.com/area7futbol/'],
              ['+5492622437406', 'tel:+5492622437406'],
            ]}/>
          </div>
        </div>
        <div className="hr"/>
        <div style={{
          marginTop: 20, display: 'flex', justifyContent: 'space-between',
          alignItems: 'center', gap: 12, fontSize: 12, color: 'var(--fill-tertiary)',
          flexWrap: 'wrap',
        }}>
          <span>© 2026 {name} — Todos los derechos reservados.</span>
          <span>Hecho con ❤ en Mendoza.</span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div className="eyebrow eyebrow-muted" style={{ marginBottom: 14 }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {links.map(([l, h]) => (
          <a key={l} href={h} style={{
            fontSize: 14, fontWeight: 600, color: 'var(--fill-secondary)',
          }}
          onMouseEnter={e => e.currentTarget.style.color = 'var(--accent)'}
          onMouseLeave={e => e.currentTarget.style.color = 'var(--fill-secondary)'}
          >{l}</a>
        ))}
      </div>
    </div>
  );
}

// ---------- helpers ----------
function SectionHeader({ eyebrow, title, desc }) {
  return (
    <div style={{ maxWidth: 720 }}>
      <div className="eyebrow" style={{ marginBottom: 16 }}>{eyebrow}</div>
      <h2 className="h-display h-section" style={{ textWrap: 'balance' }}>{title}</h2>
      {desc && <p style={{ marginTop: 16, color: 'var(--fill-secondary)', fontSize: 17, lineHeight: 1.5, maxWidth: 560 }}>{desc}</p>}
    </div>
  );
}

// ---------- Mobile menu ----------
function MobileMenu({ open, onClose, onReserveClick }) {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 90,
      background: 'rgba(0,0,0,0.85)', backdropFilter: 'blur(14px)',
      animation: 'fadeIn 200ms both',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        position: 'absolute', top: 0, right: 0, bottom: 0, width: '86%', maxWidth: 360,
        background: '#0a0a0a', boxShadow: '-30px 0 80px rgba(0,0,0,0.6)',
        padding: '24px 20px', display: 'flex', flexDirection: 'column', gap: 16,
        animation: 'fadeSlide 350ms cubic-bezier(0.2,0.8,0.2,1) both',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <A7Logo size={36}/>
          <button onClick={onClose} style={{
            width: 36, height: 36, borderRadius: 999, background: 'var(--surface-2)',
            boxShadow: 'inset 0 0 0 1px var(--hair-3)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}><Icon name="close"/></button>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 16 }}>
          {[
            ['Reservar', '#reservar'],
            ['Grabaciones', '#vivilo'],
            ['Servicios', '#servicios'],
            ['Dónde estamos', '#ubicacion'],
          ].map(([l, h]) => (
            <a key={h} href={h} onClick={onClose} style={{
              padding: '16px 12px', fontSize: 20, fontWeight: 800,
              borderBottom: '1px solid var(--hair-2)',
            }}>{l}</a>
          ))}
        </div>
        <Button block onClick={() => { onClose(); onReserveClick(); }} iconAfter="arrow-right">
          Reservar ahora
        </Button>
      </div>
    </div>
  );
}

Object.assign(window, {
  NavBar, Hero, CalendarSection, ViviloDeNuevo, Servicios, Ubicacion, Footer, MobileMenu, SectionHeader,
});