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

// =============================================================
// STAR PATTERN — Sur Lab brand star scattered as hero background
// =============================================================
function StarPattern() {
  // Pseudo-random but stable star positions
  const stars = [
    { x: 8, y: 22, s: 18, op: 0.20, r: -8 },
    { x: 18, y: 78, s: 12, op: 0.14, r: 12 },
    { x: 32, y: 16, s: 9,  op: 0.12, r: 0 },
    { x: 48, y: 64, s: 22, op: 0.16, r: -4 },
    { x: 64, y: 28, s: 14, op: 0.18, r: 18 },
    { x: 72, y: 70, s: 10, op: 0.15, r: -10 },
    { x: 86, y: 18, s: 16, op: 0.20, r: 6 },
    { x: 92, y: 56, s: 11, op: 0.13, r: -6 },
    { x: 26, y: 44, s: 7,  op: 0.10, r: 0 },
    { x: 56, y: 12, s: 7,  op: 0.10, r: 0 },
    { x: 78, y: 90, s: 8,  op: 0.12, r: 4 },
    { x: 14, y: 56, s: 8,  op: 0.10, r: -3 },
    { x: 40, y: 88, s: 9,  op: 0.12, r: 8 },
    { x: 96, y: 80, s: 7,  op: 0.10, r: 0 },
    { x: 4,  y: 88, s: 6,  op: 0.10, r: 0 },
  ];

  return (
    <svg className="hero__pattern" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs>
        <symbol id="sl-star" viewBox="0 0 100 100">
          {/* Sur Lab 8-point star — simplified outline */}
          <path d="M50 2 L54 38 Q56 44 62 46 L98 50 L62 54 Q56 56 54 62 L50 98 L46 62 Q44 56 38 54 L2 50 L38 46 Q44 44 46 38 Z"
                fill="currentColor"/>
          <path d="M50 38 L52 46 L58 48 Q60 49 60 50 Q60 51 58 52 L52 54 L50 62 L48 54 L42 52 Q40 51 40 50 Q40 49 42 48 L48 46 Z"
                fill="#202027"/>
          <circle cx="50" cy="50" r="3" fill="currentColor"/>
        </symbol>
        <radialGradient id="hero-fade" cx="50%" cy="50%" r="60%">
          <stop offset="0%" stopColor="#3BAFAA" stopOpacity="0.10"/>
          <stop offset="60%" stopColor="#3BAFAA" stopOpacity="0.03"/>
          <stop offset="100%" stopColor="#3BAFAA" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <rect width="100" height="100" fill="url(#hero-fade)"/>

      {stars.map((st, i) => (
        <g key={i} transform={`translate(${st.x} ${st.y}) rotate(${st.r}) scale(${st.s/100})`} style={{ transformOrigin: "center" }}>
          <use href="#sl-star" x="-50" y="-50" width="100" height="100"
               style={{ color: "#3BAFAA", opacity: st.op }}/>
        </g>
      ))}

      {/* Slow rotating accent star */}
      <g style={{ transformOrigin: "82% 32%", animation: "rotate 80s linear infinite" }}>
        <use href="#sl-star" x="60" y="10" width="44" height="44"
             style={{ color: "#3BAFAA", opacity: 0.08 }}/>
      </g>

      <style>{`@keyframes rotate { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }`}</style>
    </svg>
  );
}

// =============================================================
// COUNTER
// =============================================================
function Counter({ to, prefix = "", suffix = "", duration = 1600, decimals = 0, accent = false }) {
  const [n, setN] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    let raf;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          const start = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setN(eased * to);
            if (p < 1) raf = requestAnimationFrame(tick);
          };
          raf = requestAnimationFrame(tick);
          io.disconnect();
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => { io.disconnect(); if (raf) cancelAnimationFrame(raf); };
  }, [to, duration]);
  const display = n.toLocaleString("es-AR", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
  return <span ref={ref}>{prefix}{accent ? <em>{display}</em> : display}{suffix}</span>;
}

// =============================================================
// REVEAL
// =============================================================
function Reveal({ children, delay = 0, as: As = "div", ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    let timer;
    const reveal = () => {
      timer = setTimeout(() => el.classList.add("is-in"), delay);
    };
    // If already in viewport on mount (or close to it), reveal immediately.
    const r = el.getBoundingClientRect();
    if (r.top < window.innerHeight && r.bottom > 0) {
      reveal();
      return () => { if (timer) clearTimeout(timer); };
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          reveal();
          io.disconnect();
        }
      });
    }, { threshold: 0, rootMargin: "0px 0px -10% 0px" });
    io.observe(el);
    // Hard fallback: never leave anything hidden
    const fallback = setTimeout(() => el.classList.add("is-in"), 1500);
    return () => { io.disconnect(); if (timer) clearTimeout(timer); clearTimeout(fallback); };
  }, [delay]);
  return <As ref={ref} className={`reveal ${rest.className || ""}`} {...rest}>{children}</As>;
}

// =============================================================
// RINGS VIZ — actor map (Sur Lab palette)
// =============================================================
const RINGS_DATA = [
  { id: 0, label: "Núcleo decisor", count: "≈ 20 operadoras",
    desc: <><strong>Operadoras y titulares de áreas.</strong> Determinan CapEx, cronogramas, contratación, estándares y velocidad de expansión. YPF, PAE, Chevron, Shell, Vista, Tecpetrol, TotalEnergies, Pampa Energía, Pluspetrol, Equinor, Exxon, entre otras. Su nivel de actividad ordena a toda la red.</> },
  { id: 1, label: "Capacidad técnica", count: "+100 empresas",
    desc: <><strong>Servicios petroleros y proveedores técnicos críticos.</strong> Drilling, completación, fractura, wireline, cementación, ingeniería, automatización. Traducen estrategia en producción efectiva. La legitimidad se construye por performance sostenida, cumplimiento y seguridad — no por visibilidad.</> },
  { id: 2, label: "Derrame y territorio", count: "Red pyme multisectorial",
    desc: <><strong>Pymes que sostienen la operación.</strong> Logística, metalmecánica, construcción, alojamiento, catering, software, telecomunicaciones, salud ocupacional. Es donde el desarrollo energético se convierte en economía real — y donde se sienten con más fuerza las asimetrías del sistema.</> },
  { id: 3, label: "Vida social expandida", count: "Impacto urbano",
    desc: <><strong>Hotelería, gastronomía, salud, educación, deportes, turismo, comercio, desarrollo urbano.</strong> Acá Vaca Muerta deja de ser industria y se vuelve fenómeno urbano, cultural y sociológico. Aparecen housing, arraigo, migración interna, profesionalización acelerada y transformación del tejido social.</> },
  { id: 4, label: "Capa transversal: Gobierno", count: "Nación / Provincia / Municipios",
    desc: <><strong>Marco que hace viable toda la cadena.</strong> Marcos regulatorios, política fiscal, seguridad jurídica, infraestructura pública, concesiones, permisos, ordenamiento territorial. No es un proveedor más: es la capa de gobernanza que habilita —o restringe— la escala del ecosistema.</> },
];

function RingsViz({ active, setActive }) {
  const cx = 50, cy = 50;
  const radii = [10, 22, 34, 46];
  const BLUE = "#1F4F7E";
  const TEAL = "#3BAFAA";
  const MUTE = "#6E6A60";

  return (
    <svg viewBox="0 0 100 100" style={{ width: "100%", height: "100%" }}>
      {/* outer transversal layer (gobierno) */}
      <rect x="2" y="2" width="96" height="96"
        fill="none"
        stroke={active === 4 ? TEAL : "#C9BC9A"}
        strokeWidth={active === 4 ? "0.4" : "0.2"}
        strokeDasharray="1.4 1.4"
        rx="2"
        style={{ cursor: "pointer", transition: "stroke 220ms" }}
        onMouseEnter={() => setActive(4)}
      />

      {radii.map((r, i) => {
        const isActive = active === i;
        const fill = isActive
          ? `color-mix(in oklab, ${TEAL} 16%, transparent)`
          : (i === 0 ? `color-mix(in oklab, ${BLUE} 18%, transparent)` : "transparent");
        return (
          <g key={i} style={{ cursor: "pointer" }} onMouseEnter={() => setActive(i)}>
            <circle cx={cx} cy={cy} r={r}
              fill={fill}
              stroke={isActive ? TEAL : (i === 0 ? BLUE : "#C9BC9A")}
              strokeWidth={isActive ? "0.5" : "0.22"}
              style={{ transition: "all 220ms" }}
            />
          </g>
        );
      })}

      {/* labels */}
      {RINGS_DATA.slice(0,4).map((d, i) => {
        const r = radii[i] - 2;
        return (
          <text key={i}
            x={cx} y={cy - r + 1.6}
            textAnchor="middle"
            fontFamily="var(--mono)"
            fontSize={i === 0 ? "2.6" : "1.9"}
            fontWeight="600"
            fill={active === i ? TEAL : (i === 0 ? BLUE : MUTE)}
            style={{ letterSpacing: "0.08em", pointerEvents: "none", transition: "fill 220ms" }}
          >
            {`0${i+1}`}
          </text>
        );
      })}

      {/* center star (Sur Lab mark) */}
      <g transform={`translate(${cx} ${cy})`}>
        <path d="M0 -4 L0.6 -0.8 Q0.9 -0.3 1.4 0 L5 0.5 L1.4 1 Q0.9 1.3 0.6 1.8 L0 5 L-0.6 1.8 Q-0.9 1.3 -1.4 1 L-5 0.5 L-1.4 0 Q-0.9 -0.3 -0.6 -0.8 Z"
              fill={TEAL} transform="scale(0.7)"/>
      </g>

      {/* tick marks */}
      {Array.from({ length: 24 }).map((_, i) => {
        const angle = (i * 15) * Math.PI / 180;
        const x1 = cx + Math.cos(angle) * 47;
        const y1 = cy + Math.sin(angle) * 47;
        const x2 = cx + Math.cos(angle) * (i % 6 === 0 ? 49 : 48);
        const y2 = cy + Math.sin(angle) * (i % 6 === 0 ? 49 : 48);
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#C9BC9A" strokeWidth="0.12" />;
      })}

      {/* gov label */}
      <text x={4} y={5.5} fontFamily="var(--mono)" fontSize="1.7" fontWeight="600"
        fill={active === 4 ? TEAL : MUTE}
        style={{ letterSpacing: "0.14em", textTransform: "uppercase", transition: "fill 220ms" }}>
        Gobierno · capa transversal
      </text>
    </svg>
  );
}

// =============================================================
// FORM
// =============================================================
function SignupForm() {
  const [submitted, setSubmitted] = useState(false);
  const [data, setData] = useState({
    nombre: "", empresa: "", cargo: "", email: "", whatsapp: "",
    ciudad: "", sector: "",
    intereses: ["Recibir el informe"],
    idioma: "Español",
    consent: false,
  });

  const update = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const toggleInt = (label) => {
    setData((d) => ({ ...d, intereses: d.intereses.includes(label) ? d.intereses.filter(x => x !== label) : [...d.intereses, label] }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!data.consent) return;

    const subject = `Inscripción al Observatorio — ${data.nombre || "(sin nombre)"} · ${data.empresa || "(sin empresa)"}`;
    const lines = [
      "Nuevo registro al Observatorio Vaca Muerta:",
      "",
      `Nombre y apellido: ${data.nombre}`,
      `Empresa / institución: ${data.empresa}`,
      `Cargo / rol: ${data.cargo}`,
      `Email: ${data.email}`,
      `WhatsApp: ${data.whatsapp}`,
      `Ciudad / país: ${data.ciudad}`,
      `Sector: ${data.sector}`,
      `Intereses: ${data.intereses.join(", ")}`,
      `Idioma preferido: ${data.idioma}`,
      "",
      "— Enviado desde la landing del Observatorio.",
    ];
    const body = lines.join("\n");
    const mailto = `mailto:observatorio@surlab.com.ar?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    // Trigger PDF download immediately so the user gets the informe right away.
    if (typeof window.__dlInforme === "function") window.__dlInforme();
    // Then open the user's mail client with the prefilled lead notification.
    setTimeout(() => { window.location.href = mailto; }, 350);
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="form-shell">
        <div className="form-aside">
          <div className="eyebrow">Confirmación</div>
          <h3>Gracias por sumarte al Observatorio.</h3>
          <p style={{ color: "rgba(255,250,240,0.85)", lineHeight: 1.6, fontSize: 14.5 }}>
            Vamos a estar en contacto. Te enviaremos el primer informe completo a la brevedad y los próximos cortes a medida que se publiquen.
          </p>
        </div>
        <div className="form-success">
          <div className="tag">Próximos pasos</div>
          <h3>Tu lugar quedó registrado y la descarga comenzó.</h3>
          <p>
            El informe en PDF empezó a descargarse automáticamente. Si tu navegador lo bloqueó, <a href="informe-vaca-muerta.pdf" download="Observatorio-Vaca-Muerta-Informe-1-de-5.pdf" style={{ color: "var(--sl-teal)", fontWeight: 600 }}>tocá aquí para descargarlo manualmente</a>.
            También recibirás un mail de bienvenida y la agenda de los próximos cortes bimestrales. Para conversar antes, escribinos a <a href="mailto:observatorio@surlab.com.ar" style={{ color: "var(--sl-teal)", fontWeight: 600 }}>observatorio@surlab.com.ar</a>.
          </p>
          <button className="btn btn--ghost" onClick={() => setSubmitted(false)} style={{ marginTop: 12, justifySelf: "start" }}>
            Registrar otro contacto <span className="btn__arrow">→</span>
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="form-shell" id="formulario">
      <div className="form-aside">
        <div>
          <div className="eyebrow">Inscripción</div>
          <h3>Sumate al primer corte y a la serie bimestral del Observatorio.</h3>
        </div>
        <ul>
          <li>Acceso al primer informe completo (35 páginas).</li>
          <li>4 cortes adicionales a lo largo de la serie 2026.</li>
          <li>Newsletter quincenal con insights del ecosistema.</li>
          <li>Invitaciones a presentaciones y mesas de trabajo.</li>
          <li>Versión en inglés a pedido.</li>
        </ul>
        <div className="tag">
          INFORME 1/5 · 2026<br/>
          PRÓXIMO NÚMERO · FOCO AOG PATAGONIA
        </div>
      </div>

      <form className="form-body" onSubmit={handleSubmit} noValidate>
        <div className="form-row">
          <div className="field">
            <label>Nombre y apellido *</label>
            <input required placeholder=" " value={data.nombre} onChange={(e)=>update("nombre", e.target.value)} />
          </div>
          <div className="field">
            <label>Empresa / institución *</label>
            <input required placeholder=" " value={data.empresa} onChange={(e)=>update("empresa", e.target.value)} />
          </div>
        </div>
        <div className="form-row">
          <div className="field">
            <label>Cargo / rol</label>
            <input placeholder=" " value={data.cargo} onChange={(e)=>update("cargo", e.target.value)} />
          </div>
          <div className="field">
            <label>Email *</label>
            <input required type="email" placeholder=" " value={data.email} onChange={(e)=>update("email", e.target.value)} />
          </div>
        </div>
        <div className="form-row">
          <div className="field">
            <label>WhatsApp (opcional)</label>
            <input placeholder=" " value={data.whatsapp} onChange={(e)=>update("whatsapp", e.target.value)} />
          </div>
          <div className="field">
            <label>Ciudad / país</label>
            <input placeholder=" " value={data.ciudad} onChange={(e)=>update("ciudad", e.target.value)} />
          </div>
        </div>
        <div className="field">
          <label>Sector de actividad</label>
          <select value={data.sector} onChange={(e)=>update("sector", e.target.value)}>
            <option value="">Seleccionar…</option>
            <option>Operadora / E&P</option>
            <option>Servicios petroleros</option>
            <option>Pyme proveedora</option>
            <option>Cámara empresaria / clúster</option>
            <option>Sector público / regulador</option>
            <option>Sistema financiero / inversión</option>
            <option>Academia / investigación</option>
            <option>Medios / periodismo</option>
            <option>Consultoría / profesional independiente</option>
            <option>Otro</option>
          </select>
        </div>

        <div className="field">
          <label>Interés principal · podés marcar varios</label>
          <div className="checkbox-group">
            {[
              "Recibir el informe",
              "Recibir próximos cortes bimestrales",
              "Sumarme al newsletter quincenal",
              "Participar de futuras entrevistas o paneles",
              "Explorar oportunidades de colaboración con Sur Lab",
            ].map((i) => (
              <label key={i}>
                <input type="checkbox" checked={data.intereses.includes(i)} onChange={() => toggleInt(i)} />
                <span>{i}</span>
              </label>
            ))}
          </div>
        </div>

        <div className="field">
          <label>Idioma preferido</label>
          <div className="lang-radios">
            {["Español", "English", "Ambos"].map((l) => (
              <label key={l}>
                <input type="radio" name="lang" checked={data.idioma === l} onChange={() => update("idioma", l)} />
                <span>{l}</span>
              </label>
            ))}
          </div>
        </div>

        <div className="checkbox-group" style={{ marginTop: 4 }}>
          <label>
            <input type="checkbox" required checked={data.consent} onChange={(e)=>update("consent", e.target.checked)} />
            <span>Acepto recibir comunicaciones de valor del Observatorio Vaca Muerta y Sur Lab. Podré darme de baja en cualquier momento.</span>
          </label>
        </div>

        <div className="form-submit">
          <span className="micro">Tus datos no se comparten con terceros. Los usamos solo para enviar las publicaciones del Observatorio.</span>
          <button type="submit" className="btn btn--primary">
            Sumarme al Observatorio <span className="btn__arrow">→</span>
          </button>
        </div>
      </form>
    </div>
  );
}

Object.assign(window, { StarPattern, Counter, Reveal, RingsViz, RINGS_DATA, SignupForm });