/* Anunciar + Apps + Contacto + Footer */

function StatCard({ n, label, note, accent }) {
  return (
    <div style={{ background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: 20, padding: "26px 22px", boxShadow: "0 6px 18px rgba(19,19,17,.06)" }}>
      <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 44, color: accent, lineHeight: 1, letterSpacing: "-0.02em" }}>{n}</div>
      <div style={{ fontWeight: 700, fontSize: 16, color: "var(--text-strong)", marginTop: 10 }}>{label}</div>
      <div style={{ color: "var(--text-muted)", fontSize: 13.5, marginTop: 4, lineHeight: 1.4 }}>{note}</div>
    </div>
  );
}

function FormatCard({ icon, title, desc }) {
  return (
    <div style={{ display: "flex", gap: 14, alignItems: "flex-start", background: "rgba(255,255,255,.05)", border: "1px solid rgba(255,255,255,.1)", borderRadius: 16, padding: 18 }}>
      <div style={{ flex: "0 0 auto", width: 44, height: 44, borderRadius: 12, background: LA.yellow, color: LA.black, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22 }}>{icon}</div>
      <div>
        <div style={{ color: "#fff", fontWeight: 700, fontSize: 16 }}>{title}</div>
        <div style={{ color: "rgba(255,255,255,.66)", fontSize: 14, marginTop: 3, lineHeight: 1.45 }}>{desc}</div>
      </div>
    </div>
  );
}

function Anunciar() {
  const stats = [
    ["#1", "FM más escuchada del país", "Líder ininterrumpido según Kantar Ibope Media.", LA.yellow],
    ["22,6%", "de share en FM", "Más de 1 de cada 5 oyentes de FM en Argentina.", LA.teal],
    ["+1M", "oyentes por día", "Solo en CABA y el Gran Buenos Aires.", LA.pink],
    ["98.3", "FM + streaming", "Señal abierta en Carlos Paz, app y web.", LA.blue],
  ];
  const formats = [
    ["📻", "Spots publicitarios", "Producción y emisión en la franja horaria ideal."],
    ["🤝", "PNT y canjes", "Presencia no tradicional integrada al contenido."],
    ["✨", "Acciones especiales", "Sorteos, coberturas y activaciones a medida."],
    ["📱", "Digital &amp; redes", "Amplificá en Instagram, Facebook y la web."],
  ];
  return (
    <section id="anunciar" style={{ background: LA.black, padding: "90px 28px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{ maxWidth: 720, marginBottom: 40 }}>
          <div className="la-kicker">Para anunciantes</div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(32px,4.4vw,54px)", letterSpacing: "-0.01em", color: "#fff", margin: "8px 0 14px", lineHeight: 1 }}>
            Tu marca, en la radio <span style={{ color: LA.yellow }}>#1</span> de Carlos Paz
          </h2>
          <p style={{ color: "rgba(255,255,255,.74)", fontSize: 18, lineHeight: 1.55 }}>
            Conectá con miles de personas todos los días. Llegá a tu público con la credibilidad, el alcance y la calidad de producción de la radio líder de la Argentina.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(210px, 1fr))", gap: 18, marginBottom: 22 }}>
          {stats.map((s) => <StatCard key={s[1]} n={s[0]} label={s[1]} note={s[2]} accent={s[3]} />)}
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 32, flexWrap: "wrap", background: "linear-gradient(100deg, rgba(255,77,157,.14), rgba(59,169,224,.12))", border: "1px solid rgba(255,255,255,.12)", borderRadius: 20, padding: "26px 30px", marginBottom: 46 }}>
          <div style={{ minWidth: 230 }}>
            <div className="la-kicker" style={{ color: LA.yellow }}>Comunidad en redes</div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginTop: 8 }}>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 54, color: "#fff", lineHeight: 1, letterSpacing: "-0.02em" }}>+195K</span>
              <span style={{ color: "rgba(255,255,255,.72)", fontSize: 16, fontWeight: 600 }}>seguidores</span>
            </div>
            <div style={{ color: "rgba(255,255,255,.68)", fontSize: 14, marginTop: 8, maxWidth: 280, lineHeight: 1.4 }}>
              Que siguen a LA 100 Carlos Paz todos los días en sus redes.
            </div>
          </div>
          <div style={{ flex: 1 }} />
          <div style={{ display: "flex", gap: 26, flexWrap: "wrap" }}>
            {[["instagram", "95K", "Instagram"], ["facebook", "78K", "Facebook"], ["threads", "22,4K", "Threads"]].map(([ic, n, l]) => (
              <div key={l} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span style={{ width: 42, height: 42, borderRadius: "50%", background: "rgba(255,255,255,.12)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center" }}><SocialIcon name={ic} size={19} /></span>
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 26, color: "#fff", lineHeight: 1 }}>{n}</div>
                  <div style={{ color: "rgba(255,255,255,.6)", fontSize: 13, fontFamily: "var(--font-meta)", fontWeight: 600, marginTop: 3 }}>{l}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 24, color: "#fff", margin: "0 0 20px" }}>Formatos publicitarios</h3>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 16, marginBottom: 46 }}>
          {formats.map((f) => <FormatCard key={f[1]} icon={f[0]} title={<span dangerouslySetInnerHTML={{ __html: f[1] }} />} desc={<span dangerouslySetInnerHTML={{ __html: f[2] }} />} />)}
        </div>
        <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
          <a href="#contacto" style={{ display: "inline-flex", alignItems: "center", gap: 10, background: LA.yellow, color: LA.black, textDecoration: "none", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16, padding: "15px 30px", borderRadius: 999, boxShadow: "0 8px 24px rgba(255,176,0,.4)" }}>
            Solicitá el media kit
          </a>
          <a href="#contacto" style={{ display: "inline-flex", alignItems: "center", gap: 10, background: "transparent", color: "#fff", textDecoration: "none", border: "2px solid rgba(255,255,255,.28)", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16, padding: "13px 28px", borderRadius: 999 }}>
            Hablar con comercial
          </a>
        </div>
      </div>
    </section>
  );
}

function StoreBadge({ store }) {
  const apple = store === "apple";
  return (
    <a href="https://streaminglocucionar.com/radio/la100carlos" target="_blank" rel="noopener" style={{
      textDecoration: "none", padding: "12px 22px", borderRadius: 14, border: "1px solid rgba(255,255,255,.12)",
    }}>
      <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor">
        {apple
          ? <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.53 4.09M12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25Z" />
          : <path d="M3.6 2.3 13.5 12 3.6 21.7c-.3-.2-.5-.6-.5-1.1V3.4c0-.5.2-.9.5-1.1Zm11 8.4L5.9 2.3l10.5 6 .1.1-2.9 2.3Zm2.9 2.6 3.4 1.9c.7.4.7 1.6 0 2l-3.4 1.9-3.1-2.9 3.1-2.9Zm-2.9 3.4 2.9 2.3-10.6 6 8.7-8.3Z" />}
      </svg>
      <span>
        <span style={{ display: "block", fontSize: 10.5, opacity: .7, fontFamily: "var(--font-meta)", letterSpacing: ".04em" }}>{apple ? "Descargá en el" : "Disponible en"}</span>
        <span style={{ display: "block", fontSize: 17, fontWeight: 700, fontFamily: "var(--font-display)" }}>{apple ? "App Store" : "Google Play"}</span>
      </span>
    </a>
  );
}

function Apps() {
  return (
    <section id="app" style={{ background: "var(--neutral-50)", padding: "80px 28px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", display: "grid", gridTemplateColumns: "1.1fr .9fr", gap: 40, alignItems: "center" }} className="apps-grid">
        <div>
          <div className="la-kicker">En tu bolsillo</div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(30px,4vw,46px)", letterSpacing: "-0.01em", color: "var(--text-strong)", margin: "6px 0 14px", lineHeight: 1.02 }}>
            Descargá la app de LA 100
          </h2>
          <p style={{ color: "var(--text-body)", fontSize: 18, lineHeight: 1.55, maxWidth: 460, marginBottom: 26 }}>
            Escuchá la radio en vivo, donde quieras, cuando quieras. Programación, rankings y todo el contenido de LA 100 en tu teléfono.
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <StoreBadge store="apple" /><StoreBadge store="google" />
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <div style={{ position: "relative", width: 260, height: 300, borderRadius: 28, background: "linear-gradient(135deg," + LA.teal + "," + LA.blue + ")", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 24px 60px rgba(19,19,17,.2)" }}>
            <img src="./assets/logo.png" alt="LA 100" style={{ width: 180, filter: "drop-shadow(0 10px 24px rgba(0,0,0,.3))" }} />
          </div>
        </div>
      </div>
    </section>
  );
}

function Contacto() {
  const socials = [
    ["whatsapp", "https://wa.me/5493541334775"],
    ["instagram", "https://www.instagram.com/la100carlospaz/"],
    ["facebook", "https://www.facebook.com/la100carlospaz"],
  ];
  return (
    <section id="contacto" style={{ background: LA.black, padding: "84px 28px 30px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{ background: "linear-gradient(135deg," + LA.yellow + "," + LA.yellowBright + ")", borderRadius: 28, padding: "44px 40px", display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 32, alignItems: "center" }} className="contact-grid">
          <div>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(28px,3.4vw,42px)", color: LA.black, margin: "0 0 12px", lineHeight: 1.02, letterSpacing: "-0.01em" }}>
              Sumá tu marca a LA 100
            </h2>
            <p style={{ color: "rgba(19,19,17,.72)", fontSize: 17, lineHeight: 1.5, margin: 0, maxWidth: 460 }}>
              Escribinos y armamos una propuesta a la medida de tu negocio. Te enviamos el media kit con audiencias, formatos y tarifas.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <a href="mailto:fm@la100carlospaz.com.ar" style={{ background: LA.black, color: "#fff", textDecoration: "none", padding: "16px 22px", borderRadius: 14, fontWeight: 700, fontFamily: "var(--font-display)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              fm@la100carlospaz.com.ar <span style={{ opacity: .6 }}>→</span>
            </a>
            <a href="https://wa.me/5493541334775" target="_blank" rel="noopener" style={{ background: "rgba(19,19,17,.12)", color: LA.black, textDecoration: "none", padding: "16px 22px", borderRadius: 14, fontWeight: 700, fontFamily: "var(--font-display)", display: "flex", alignItems: "center", gap: 10 }}>
              <SocialIcon name="whatsapp" size={20} /> WhatsApp comercial
            </a>
          </div>
        </div>

        <footer style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 20, padding: "44px 4px 10px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <img src="./assets/logo.png" alt="LA 100" style={{ height: 56 }} />
            <div style={{ color: "rgba(255,255,255,.6)", fontSize: 13.5, lineHeight: 1.5 }}>
              LA 100 · 98.3 FM<br />Villa Carlos Paz, Córdoba, Argentina
            </div>
          </div>
          <div style={{ display: "flex", gap: 10 }}>
            {socials.map(([name, href]) => (
              <a key={name} href={href} target="_blank" rel="noopener" aria-label={name} style={{ width: 40, height: 40, borderRadius: "50%", background: "rgba(255,255,255,.08)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", transition: "all .2s" }}
                onMouseEnter={(e) => { e.currentTarget.style.background = LA.yellow; e.currentTarget.style.color = LA.black; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = "rgba(255,255,255,.08)"; e.currentTarget.style.color = "#fff"; }}>
                <SocialIcon name={name} size={17} />
              </a>
            ))}
          </div>
        </footer>
        <div style={{ borderTop: "1px solid rgba(255,255,255,.1)", padding: "18px 4px", color: "rgba(255,255,255,.4)", fontSize: 12.5, display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8 }}>
          <span>© 2026 LA 100 Carlos Paz. Todos los derechos reservados.</span>
          <span>la100carlospaz.com.ar</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Anunciar, Apps, Contacto });