// ============ MAP + TESTIMONIALS + CONTACT + FOOTER ============
const { useState: useStateE } = React;

// Stylized SVG of Buenos Aires (approximate shape). Markers are positioned in % coords.
function MapBA() {
  const { t } = window.useLang();
  const ref = window.useReveal();
  const [popup, setPopup] = useStateE(null);

  const markers = [
    { id: 'uai', x: 52, y: 56, title: 'UAI · Centro', desc: 'Sede principal · Av. San Juan & Montes de Oca' },
    { id: 'caeti', x: 50, y: 60, title: 'CAETI Lab', desc: 'Lab de robótica e IA · investigación AURA' },
    { id: 'cafe', x: 54, y: 58, title: 'Café Tecnológico', desc: 'Espacio mensual de tech · UAI Centro' },
    { id: 'banfield', x: 62, y: 80, title: 'Banfield', desc: 'Base de operaciones freelance · Zona Sur' }
  ];

  return (
    <section id="map" ref={ref}>
      <div className="container">
        <div className="fade-up">
          <span className="kicker">{t.map.kicker}</span>
          <h2 className="section-title">{t.map.h2}</h2>
        </div>
        <div className="map-wrap fade-up d1" style={{marginTop: 40}}>
          <svg viewBox="0 0 100 100" preserveAspectRatio="none" className="map-svg" aria-hidden>
            <defs>
              <linearGradient id="riverGrad" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0%" stopColor="#0c1120" />
                <stop offset="100%" stopColor="#131a2c" />
              </linearGradient>
              <pattern id="grid" width="4" height="4" patternUnits="userSpaceOnUse">
                <path d="M 4 0 L 0 0 0 4" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="0.2"/>
              </pattern>
            </defs>
            <rect width="100" height="100" fill="#060810" />
            <rect width="100" height="100" fill="url(#grid)" />
            {/* Río de la Plata */}
            <path d="M 70,0 Q 80,30 75,55 Q 78,80 100,100 L 100,0 Z" fill="url(#riverGrad)" opacity="0.7" />
            {/* CABA shape (approx) */}
            <path d="M 38,18 L 58,15 L 72,28 L 68,50 L 65,68 L 56,72 L 48,68 L 42,55 L 36,40 Z"
                  fill="#0c1120" stroke="rgba(56,189,248,0.25)" strokeWidth="0.3" />
            {/* GBA Sur (Banfield) */}
            <path d="M 45,70 L 62,70 L 70,86 L 58,92 L 44,88 Z"
                  fill="#0c1120" stroke="rgba(139,92,246,0.2)" strokeWidth="0.3" />
            {/* Major roads */}
            <line x1="38" y1="40" x2="68" y2="48" stroke="rgba(255,255,255,0.06)" strokeWidth="0.3" />
            <line x1="50" y1="20" x2="56" y2="72" stroke="rgba(255,255,255,0.06)" strokeWidth="0.3" />
            <line x1="56" y1="58" x2="64" y2="82" stroke="rgba(255,255,255,0.06)" strokeWidth="0.3" />
            {/* labels */}
            <text x="50" y="32" fontSize="2.2" fill="rgba(255,255,255,0.25)" fontFamily="monospace" textAnchor="middle">CABA</text>
            <text x="56" y="86" fontSize="2" fill="rgba(255,255,255,0.2)" fontFamily="monospace" textAnchor="middle">ZONA SUR</text>
            <text x="86" y="55" fontSize="2" fill="rgba(255,255,255,0.18)" fontFamily="monospace" textAnchor="middle" transform="rotate(-90 86 55)">RÍO DE LA PLATA</text>
          </svg>
          {markers.map(m => (
            <div key={m.id} className="map-marker" style={{ left: `${m.x}%`, top: `${m.y}%` }}>
              {popup === m.id && (
                <div className="map-popup">
                  <div className="title">{m.title}</div>
                  <div className="desc">{m.desc}</div>
                </div>
              )}
              <button className="map-pin" onClick={() => setPopup(popup === m.id ? null : m.id)}>
                <span className="dot" />
                {m.title}
              </button>
              <div className="tail" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ TESTIMONIALS ============
function Testimonials() {
  const { t } = window.useLang();
  const ref = window.useReveal();
  return (
    <section id="testimonials" ref={ref}>
      <div className="container">
        <div className="fade-up">
          <span className="kicker">{t.testimonials.kicker}</span>
          <h2 className="section-title">{t.testimonials.h2}</h2>
        </div>
        <div className="test-grid">
          {window.TESTIMONIALS.map((tm, i) => (
            <div key={i} className="test-card glass fade-up" style={{transitionDelay: `${i * 0.08}s`}}>
              <span className="quote-mark">"</span>
              <div className="stars">{'★'.repeat(tm.stars)}</div>
              <p className="q">{tm.quote}</p>
              <div className="who">
                <div className="av">{tm.name[0]}</div>
                <div>
                  <div className="name">{tm.name}</div>
                  <div className="ctx">{tm.ctx}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ CONTACT ============
function Contact() {
  const { t } = window.useLang();
  const ref = window.useReveal();
  const ctaRef = window.useMagnetic(10);
  const ctaRef2 = window.useMagnetic(10);
  return (
    <section id="contact" ref={ref}>
      <div className="container">
        <div className="contact-card glass-strong fade-up">
          <span className="kicker">{t.contact.kicker}</span>
          <h2>{t.contact.h2}</h2>
          <p style={{color:'var(--muted)', fontSize:18, maxWidth: 580, margin: '0 auto'}}>{t.contact.sub}</p>
          <div className="contact-ctas">
            <a href="https://github.com/AngeloVPerrotta" target="_blank" rel="noopener noreferrer" className="btn btn-primary magnetic" ref={ctaRef}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5C5.7.5.5 5.7.5 12c0 5 3.3 9.3 7.8 10.8.6.1.8-.2.8-.6v-2.2c-3.2.7-3.9-1.4-3.9-1.4-.5-1.3-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.5-.3-5.2-1.3-5.2-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2.9-.3 2-.4 3-.4s2.1.1 3 .4c2.3-1.5 3.3-1.2 3.3-1.2.7 1.6.2 2.9.1 3.1.7.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.4-5.2 5.7.4.3.8 1 .8 2v3c0 .3.2.7.8.6 4.5-1.5 7.8-5.8 7.8-10.8C23.5 5.7 18.3.5 12 .5z"/></svg>
              {t.hero.ctaPrimary}
            </a>
            <a href="https://www.linkedin.com/in/angelo-perrotta/" target="_blank" rel="noopener noreferrer" className="btn btn-ghost magnetic" ref={ctaRef2}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3V9zm7 0h3.8v1.7h.1c.5-.9 1.8-1.9 3.7-1.9 4 0 4.7 2.6 4.7 6V21h-4v-5.5c0-1.3 0-3-1.9-3s-2.1 1.4-2.1 2.9V21h-4V9z"/></svg>
              {t.hero.ctaSecondary}
            </a>
          </div>
          <div className="contact-chips">
            <a className="contact-chip" href="mailto:perrottangelo340@gmail.com">📧 perrottangelo340@gmail.com</a>
            <a className="contact-chip" href="https://wa.me/5491124618617" target="_blank" rel="noopener noreferrer">💬 +54 9 11 2461-8617</a>
            <a className="contact-chip" href="https://www.instagram.com/angeloo.pp/" target="_blank" rel="noopener noreferrer">📷 @angeloo.pp</a>
            <a className="contact-chip" href="https://angelovperrotta.github.io" target="_blank" rel="noopener noreferrer">🌐 angelovperrotta.github.io</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ FOOTER ============
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <h5>Angelo Perrotta</h5>
            <p style={{color:'var(--muted)', fontSize:14, maxWidth: 320}}>Ingeniería en sistemas en formación. Construyo agentes de IA, investigo robótica y enseño matemática.</p>
          </div>
          <div className="footer-col">
            <h5>Navegar</h5>
            <a href="#about">Sobre mí</a>
            <a href="#os">Angelo OS</a>
            <a href="#projects">Proyectos</a>
            <a href="#aura">AURA</a>
            <a href="#cafe">Café Tecnológico</a>
          </div>
          <div className="footer-col">
            <h5>Conectar</h5>
            <a href="https://github.com/AngeloVPerrotta" target="_blank" rel="noopener noreferrer">GitHub</a>
            <a href="https://www.linkedin.com/in/angelo-perrotta/" target="_blank" rel="noopener noreferrer">LinkedIn</a>
            <a href="https://www.instagram.com/angeloo.pp/" target="_blank" rel="noopener noreferrer">Instagram</a>
            <a href="mailto:perrottangelo340@gmail.com">Mail</a>
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 Angelo Perrotta · Buenos Aires, Argentina</span>
          <span>{`> system: ready`}</span>
        </div>
      </div>
    </footer>
  );
}

window.MapBA = MapBA;
window.Testimonials = Testimonials;
window.Contact = Contact;
window.Footer = Footer;