// aero-alerts.jsx + aero-api.jsx — Alerts page and API/Developers page

// ─────────────────────────────────────────────────────────────────────
// PAGE: ALERTS
// ─────────────────────────────────────────────────────────────────────
function PageAlerts({ lang }) {
  const t = window.WX.T[lang];
  const [filter, setFilter] = useState("all"); // all | warning | watch | advisory

  const alerts = [
    {
      id: "BR-RS-2026-0518", level: "warning",
      title_pt: "Chuvas intensas com risco de alagamentos",
      title_en: "Heavy rain with flooding risk",
      area_pt: "Mesorregião Centro-Ocidental, Rio Grande do Sul",
      area_en: "Central-Western Rio Grande do Sul",
      desc_pt: "Acumulados entre 30 e 60 mm em 24 horas com alta probabilidade de descargas atmosféricas. Risco de alagamentos em áreas urbanas, deslizamentos em encostas e elevação rápida do nível dos rios.",
      desc_en: "30 to 60 mm in 24 hours with high probability of lightning strikes. Risk of urban flooding, landslides on slopes, and rapid river rise.",
      issued: "2026-05-26T06:00", expires: "2026-05-26T22:00",
      issuer: "INMET", areas: ["RS", "SC"], severity: 3, certainty: 0.92,
    },
    {
      id: "BR-SC-2026-0317", level: "watch",
      title_pt: "Vendaval costeiro",
      title_en: "Coastal wind advisory",
      area_pt: "Faixa litorânea sul de Santa Catarina",
      area_en: "Southern coast of Santa Catarina",
      desc_pt: "Rajadas entre 60 e 80 km/h vindas do quadrante sudeste. Risco de queda de árvores e destelhamento de estruturas frágeis. Navegação restrita para pequenas embarcações.",
      desc_en: "Gusts 60–80 km/h from the southeast. Risk of fallen trees and damage to fragile structures. Small craft advisory in effect.",
      issued: "2026-05-26T08:30", expires: "2026-05-26T18:00",
      issuer: "Marinha · DHN", areas: ["SC"], severity: 2, certainty: 0.78,
    },
    {
      id: "BR-MG-2026-0226", level: "advisory",
      title_pt: "Baixa umidade do ar",
      title_en: "Low humidity advisory",
      area_pt: "Triângulo Mineiro e Alto Paranaíba",
      area_en: "Triângulo Mineiro and Alto Paranaíba",
      desc_pt: "Umidade relativa do ar entre 12% e 20% durante a tarde. Risco de incêndios florestais elevado. Manter hidratação e evitar atividade física entre 12h e 16h.",
      desc_en: "Relative humidity between 12% and 20% during the afternoon. High wildfire risk. Stay hydrated and avoid physical activity between 12:00 and 16:00.",
      issued: "2026-05-26T05:00", expires: "2026-05-27T00:00",
      issuer: "INMET", areas: ["MG", "GO"], severity: 1, certainty: 0.85,
    },
    {
      id: "BR-AM-2026-0119", level: "advisory",
      title_pt: "Chuvas convectivas",
      title_en: "Convective showers",
      area_pt: "Amazonas e Roraima",
      area_en: "Amazonas and Roraima",
      desc_pt: "Aguaceiros isolados com possibilidade de descargas atmosféricas. Acumulados localizados podem superar 40 mm em 6 horas.",
      desc_en: "Isolated downpours with possibility of lightning. Local accumulations may exceed 40 mm in 6 hours.",
      issued: "2026-05-26T04:00", expires: "2026-05-26T20:00",
      issuer: "CPTEC", areas: ["AM", "RR"], severity: 1, certainty: 0.71,
    },
  ];
  const filtered = alerts.filter(a => filter === "all" || a.level === filter);

  return (
    <div>
      {/* HEADER */}
      <section style={{ background: AERO.paperDeep, borderBottom: `0.5px solid ${AERO.hair}` }}>
        <Container style={{ padding: '56px 36px 48px' }}>
          <div className="aero-eyebrow">
            <a href="#/home" className="aero-link" style={{ color: AERO.inkSoft }}>
              {lang === "pt" ? "Início" : "Home"}
            </a>
            {" / "}<span style={{ color: AERO.ink }}>{lang === "pt" ? "Alertas" : "Alerts"}</span>
          </div>
          <div style={{ display: 'flex', gap: 48, alignItems: 'flex-end', marginTop: 12 }}>
            <h1 className="aero-serif" style={{
              fontStyle: 'italic', fontWeight: 400,
              fontSize: 'clamp(56px, 7vw, 120px)', lineHeight: 0.9, letterSpacing: -3,
              color: AERO.ink, margin: 0,
              flex: 1, textWrap: 'balance',
            }}>
              {lang === "pt" ? "Avisos & alertas ativos" : "Active alerts & advisories"}
            </h1>
            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, auto)', gap: 36,
              paddingBottom: 14,
            }}>
              <StatBlock value={alerts.filter(a => a.level === "warning").length} label={lang === "pt" ? "Alertas" : "Warnings"} color={AERO.danger} />
              <StatBlock value={alerts.filter(a => a.level === "watch").length} label={lang === "pt" ? "Atenção" : "Watches"} color={AERO.warm} />
              <StatBlock value={alerts.filter(a => a.level === "advisory").length} label={lang === "pt" ? "Avisos" : "Advisories"} color={AERO.accent} />
            </div>
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 32 }}>
            {[
              ["all", lang === "pt" ? "Todos" : "All"],
              ["warning", lang === "pt" ? "Alerta" : "Warning"],
              ["watch", lang === "pt" ? "Atenção" : "Watch"],
              ["advisory", lang === "pt" ? "Aviso" : "Advisory"],
            ].map(([k, l]) => (
              <button key={k} onClick={() => setFilter(k)} style={{
                padding: '8px 16px', borderRadius: 999, cursor: 'pointer',
                background: filter === k ? AERO.ink : 'transparent',
                color: filter === k ? AERO.paper : AERO.ink,
                border: `0.5px solid ${filter === k ? AERO.ink : AERO.line}`,
                fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
                letterSpacing: 1.2, textTransform: 'uppercase',
              }}>{l}</button>
            ))}
          </div>
        </Container>
      </section>

      {/* ALERTS LIST + MAP */}
      <Container style={{ marginTop: 48 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 32 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            {filtered.map(a => <BigAlertCard key={a.id} alert={a} lang={lang} />)}
          </div>
          <aside style={{ alignSelf: 'start', position: 'sticky', top: 130 }}>
            <SectionEyebrow hint={lang === "pt" ? "regiões afetadas" : "affected regions"}>
              {lang === "pt" ? "Mapa nacional" : "National map"}
            </SectionEyebrow>
            <AlertsMap lang={lang} />
            <div style={{
              marginTop: 18, padding: '20px 22px',
              background: '#fff', border: `0.5px solid ${AERO.hair}`, borderRadius: 6,
            }}>
              <div className="aero-eyebrow" style={{ marginBottom: 10 }}>
                {lang === "pt" ? "Receba notificações" : "Get notifications"}
              </div>
              <div style={{ fontSize: 13, color: AERO.inkDim, lineHeight: 1.5, marginBottom: 14 }}>
                {lang === "pt"
                  ? "Inscreva-se para receber alertas por SMS, e-mail ou webhook quando o nível ultrapassar o limiar configurado."
                  : "Subscribe to receive alerts via SMS, email, or webhook when severity crosses your threshold."}
              </div>
              <a href="#/api" style={{
                display: 'inline-block',
                background: AERO.ink, color: AERO.paper,
                padding: '10px 16px', borderRadius: 999,
                fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5,
                letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 600,
              }}>
                {lang === "pt" ? "Configurar via API" : "Configure via API"}
              </a>
            </div>
          </aside>
        </div>
      </Container>
    </div>
  );
}

function StatBlock({ value, label, color }) {
  return (
    <div>
      <div className="aero-serif" style={{
        fontStyle: 'italic', fontSize: 72, color: color,
        lineHeight: 0.9, letterSpacing: -2,
      }}>{value}</div>
      <div className="aero-mono" style={{
        fontSize: 10, color: AERO.inkSoft, letterSpacing: 1.2,
        textTransform: 'uppercase', marginTop: 6,
      }}>{label}</div>
    </div>
  );
}

function BigAlertCard({ alert: a, lang }) {
  const accent = a.level === "warning" ? AERO.danger
    : a.level === "watch" ? AERO.warm : AERO.accent;
  const levelLabel = a.level === "warning"
    ? (lang === "pt" ? "Alerta" : "Warning")
    : a.level === "watch"
      ? (lang === "pt" ? "Atenção" : "Watch")
      : (lang === "pt" ? "Aviso" : "Advisory");
  const title = lang === "pt" ? a.title_pt : a.title_en;
  const area = lang === "pt" ? a.area_pt : a.area_en;
  const desc = lang === "pt" ? a.desc_pt : a.desc_en;

  return (
    <article style={{
      position: 'relative', background: '#fff',
      border: `0.5px solid ${AERO.hair}`, borderRadius: 6,
      padding: '28px 32px 28px 36px',
    }}>
      <div style={{
        position: 'absolute', top: 0, bottom: 0, left: 0, width: 4,
        background: accent, borderRadius: '6px 0 0 6px',
      }} />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 24 }}>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <span className="aero-mono" style={{
              fontSize: 10, letterSpacing: 1.6, color: accent,
              textTransform: 'uppercase', fontWeight: 600,
            }}>{levelLabel}</span>
            <span className="aero-mono" style={{
              fontSize: 10, color: AERO.inkSoft, letterSpacing: 0.5,
            }}>{a.id}</span>
            <span style={{ flex: 1 }} />
            {a.areas.map(ar => (
              <span key={ar} style={{
                padding: '3px 8px', borderRadius: 3,
                border: `0.5px solid ${AERO.line}`,
                fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
                color: AERO.inkDim, letterSpacing: 0.5,
              }}>{ar}</span>
            ))}
          </div>
          <h3 className="aero-serif" style={{
            fontStyle: 'italic', fontWeight: 400,
            fontSize: 36, lineHeight: 1.05, letterSpacing: -0.5,
            color: AERO.ink, margin: '14px 0 6px',
            textWrap: 'pretty',
          }}>{title}</h3>
          <div className="aero-mono" style={{
            fontSize: 10.5, color: AERO.inkSoft, letterSpacing: 0.8,
            textTransform: 'uppercase', marginBottom: 16,
          }}>{area} · {a.issuer}</div>
          <p style={{
            fontSize: 14.5, color: AERO.inkDim, lineHeight: 1.55, margin: 0,
            textWrap: 'pretty',
          }}>{desc}</p>
        </div>
      </div>

      <div style={{
        marginTop: 22, paddingTop: 18,
        borderTop: `0.5px solid ${AERO.hair}`,
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr) auto', gap: 16,
        fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
      }}>
        <Pair label={lang === "pt" ? "Emitido" : "Issued"} value={a.issued.replace("T", " ")} />
        <Pair label={lang === "pt" ? "Expira" : "Expires"} value={a.expires.replace("T", " ")} />
        <Pair label={lang === "pt" ? "Severidade" : "Severity"}
          value={"●".repeat(a.severity) + "○".repeat(3 - a.severity)} valColor={accent} />
        <Pair label={lang === "pt" ? "Certeza" : "Certainty"} value={Math.round(a.certainty * 100) + "%"} />
        <a href="#" style={{
          alignSelf: 'center', color: AERO.ink,
          fontSize: 11, letterSpacing: 1.2, textTransform: 'uppercase', fontWeight: 600,
        }}>{lang === "pt" ? "Detalhes →" : "Details →"}</a>
      </div>
    </article>
  );
}

function Pair({ label, value, valColor }) {
  return (
    <div>
      <div style={{ color: AERO.inkSoft, fontSize: 9.5, letterSpacing: 1.2, textTransform: 'uppercase' }}>{label}</div>
      <div style={{ color: valColor || AERO.ink, marginTop: 4 }}>{value}</div>
    </div>
  );
}

// Stylized Brazil map showing affected states.
function AlertsMap({ lang }) {
  // affected: RS, SC, MG, GO, AM, RR
  const affected = {
    RS: { color: AERO.danger, label: lang === "pt" ? "Alerta" : "Warning" },
    SC: { color: AERO.warm, label: lang === "pt" ? "Atenção" : "Watch" },
    MG: { color: AERO.accent, label: lang === "pt" ? "Aviso" : "Advisory" },
    GO: { color: AERO.accent, label: lang === "pt" ? "Aviso" : "Advisory" },
    AM: { color: AERO.accent, label: lang === "pt" ? "Aviso" : "Advisory" },
    RR: { color: AERO.accent, label: lang === "pt" ? "Aviso" : "Advisory" },
  };
  return (
    <div style={{
      position: 'relative', background: '#fff', borderRadius: 6,
      border: `0.5px solid ${AERO.hair}`, padding: 24,
    }}>
      <svg width="100%" viewBox="0 0 380 380">
        {/* abstract Brazil */}
        <path d="M 130 60 C 200 50, 300 60, 340 110 C 360 170, 350 240, 320 300
                 C 280 330, 220 340, 160 320 C 110 300, 70 250, 80 190
                 C 80 130, 90 90, 130 60 Z"
          fill="#efe9da" stroke={AERO.hair} strokeWidth="1" />
        {/* approximate state regions (very simplified) */}
        {/* RS — bottom */}
        <path d="M 120 290 Q 180 305 240 295 L 220 330 Q 180 335 140 320 Z"
          fill={affected.RS.color} opacity="0.85" />
        {/* SC — small NE of RS */}
        <path d="M 220 280 Q 260 275 280 285 L 270 300 Q 240 300 220 295 Z"
          fill={affected.SC.color} opacity="0.85" />
        {/* MG + GO */}
        <ellipse cx="220" cy="180" rx="40" ry="30" fill={affected.MG.color} opacity="0.85" />
        <ellipse cx="160" cy="180" rx="35" ry="30" fill={affected.GO.color} opacity="0.85" />
        {/* AM + RR */}
        <ellipse cx="140" cy="100" rx="55" ry="32" fill={affected.AM.color} opacity="0.85" />
        <ellipse cx="170" cy="70" rx="28" ry="18" fill={affected.RR.color} opacity="0.85" />

        {/* outline overlay */}
        <path d="M 130 60 C 200 50, 300 60, 340 110 C 360 170, 350 240, 320 300
                 C 280 330, 220 340, 160 320 C 110 300, 70 250, 80 190
                 C 80 130, 90 90, 130 60 Z"
          fill="none" stroke={AERO.ink} strokeOpacity="0.4" strokeWidth="1.2" />

        {/* state labels */}
        {Object.entries({
          RS: [180, 312], SC: [248, 290], MG: [220, 184], GO: [160, 184],
          AM: [140, 105], RR: [170, 70],
        }).map(([s, [x, y]]) => (
          <g key={s}>
            <text x={x} y={y + 4} textAnchor="middle"
              fill="#fff" fontSize="11" fontWeight="600"
              fontFamily="'JetBrains Mono', monospace" letterSpacing="0.5">{s}</text>
          </g>
        ))}
      </svg>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 12,
        fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, color: AERO.inkDim }}>
        <Legend swatch={AERO.danger} label={lang === "pt" ? "Alerta · 1 ativo" : "Warning · 1 active"} />
        <Legend swatch={AERO.warm} label={lang === "pt" ? "Atenção · 1 ativo" : "Watch · 1 active"} />
        <Legend swatch={AERO.accent} label={lang === "pt" ? "Aviso · 2 ativos" : "Advisory · 2 active"} />
      </div>
    </div>
  );
}
function Legend({ swatch, label }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span style={{ width: 12, height: 12, borderRadius: 2, background: swatch }} />
      <span>{label}</span>
    </div>
  );
}


// ─────────────────────────────────────────────────────────────────────
// PAGE: API / DEVELOPERS
// ─────────────────────────────────────────────────────────────────────
function PageAPI({ lang }) {
  const [endpoint, setEndpoint] = useState("/weather");
  const [tab, setTab] = useState("curl"); // curl | js | python | response

  return (
    <div>
      {/* HEADER */}
      <section style={{ background: AERO.paperDeep, borderBottom: `0.5px solid ${AERO.hair}` }}>
        <Container style={{ padding: '56px 36px 64px' }}>
          <div className="aero-eyebrow">
            <a href="#/home" className="aero-link" style={{ color: AERO.inkSoft }}>
              {lang === "pt" ? "Início" : "Home"}
            </a>
            {" / "}<span style={{ color: AERO.ink }}>API</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, marginTop: 18, alignItems: 'end' }}>
            <div>
              <h1 className="aero-serif" style={{
                fontStyle: 'italic', fontWeight: 400,
                fontSize: 'clamp(56px, 7vw, 112px)', lineHeight: 0.9, letterSpacing: -3,
                color: AERO.ink, margin: 0, textWrap: 'balance',
              }}>
                {lang === "pt"
                  ? "Uma API meteorológica. Sem firulas."
                  : "One meteorological API. No frills."}
              </h1>
              <p style={{
                fontSize: 17, color: AERO.inkDim, lineHeight: 1.5,
                marginTop: 22, maxWidth: 620, textWrap: 'pretty',
              }}>
                {lang === "pt"
                  ? "REST sobre HTTPS. JSON em entrada e saída. Latência típica de 230ms. Cobertura global com 847 estações em tempo real, 14 modelos numéricos integrados, e histórico desde 1991. Plano free com 10.000 requisições por dia."
                  : "REST over HTTPS. JSON in, JSON out. Typical 230ms latency. Global coverage with 847 real-time stations, 14 integrated numerical models, and history back to 1991. Free plan: 10,000 requests/day."}
              </p>
            </div>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
              color: AERO.inkSoft, padding: '20px 24px',
              background: AERO.ink, color: AERO.paper, borderRadius: 6,
              letterSpacing: 0.5, lineHeight: 1.7,
            }}>
              <div style={{ color: '#9aa3b6', marginBottom: 8 }}>$ {lang === "pt" ? "começar agora" : "get started"}</div>
              <div><span style={{ color: '#b8d9b3' }}>curl</span> https://api.aerograma.pro/v1/weather?lat=-29.69&lon=-53.84</div>
            </div>
          </div>
        </Container>
      </section>

      {/* ENDPOINT TRY-IT */}
      <Container style={{ marginTop: 56 }}>
        <SectionEyebrow hint="v1 · stable">
          {lang === "pt" ? "Endpoints" : "Endpoints"}
        </SectionEyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 24 }}>
          {/* sidebar */}
          <div style={{
            background: '#fff', border: `0.5px solid ${AERO.hair}`, borderRadius: 6,
            padding: 16, alignSelf: 'start',
          }}>
            {[
              ["GET", "/weather", lang === "pt" ? "Estado atual + previsão" : "Current + forecast"],
              ["GET", "/forecast", lang === "pt" ? "Previsão estendida" : "Extended forecast"],
              ["GET", "/hourly", lang === "pt" ? "Série horária" : "Hourly series"],
              ["GET", "/radar", lang === "pt" ? "Tiles de radar" : "Radar tiles"],
              ["GET", "/satellite", lang === "pt" ? "Imagens GOES-16" : "GOES-16 imagery"],
              ["GET", "/alerts", lang === "pt" ? "Alertas oficiais" : "Official alerts"],
              ["GET", "/stations", lang === "pt" ? "Rede de estações" : "Station network"],
              ["GET", "/models", lang === "pt" ? "Saídas brutas de modelos" : "Raw model output"],
              ["POST", "/webhooks", lang === "pt" ? "Inscrever em eventos" : "Subscribe to events"],
            ].map(([m, path, desc]) => (
              <button key={path} onClick={() => setEndpoint(path)} style={{
                display: 'block', width: '100%', textAlign: 'left',
                padding: '10px 14px', marginBottom: 2,
                background: endpoint === path ? AERO.paperDeep : 'transparent',
                border: 'none', borderRadius: 4, cursor: 'pointer',
              }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span style={{
                    fontFamily: "'JetBrains Mono', monospace", fontSize: 9,
                    fontWeight: 600, letterSpacing: 1, color: m === "POST" ? AERO.warm : AERO.ok,
                  }}>{m}</span>
                  <span style={{
                    fontFamily: "'JetBrains Mono', monospace", fontSize: 13,
                    color: AERO.ink, fontWeight: endpoint === path ? 600 : 400,
                  }}>{path}</span>
                </div>
                <div style={{ fontSize: 11, color: AERO.inkSoft, marginTop: 3, marginLeft: 30 }}>
                  {desc}
                </div>
              </button>
            ))}
          </div>

          {/* content */}
          <div>
            <EndpointDoc lang={lang} endpoint={endpoint} tab={tab} setTab={setTab} />
          </div>
        </div>
      </Container>

      {/* Pricing strip */}
      <Container style={{ marginTop: 80 }}>
        <SectionEyebrow hint={lang === "pt" ? "preço por mês · 12 meses" : "monthly · 12-month commitment"}>
          {lang === "pt" ? "Planos" : "Plans"}
        </SectionEyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          <PriceCard tier="Free" price="0" currency="" reqs="10k/dia" features={[
            lang === "pt" ? "Previsão básica" : "Basic forecast",
            lang === "pt" ? "Histórico 7 dias" : "7-day history",
            lang === "pt" ? "Suporte por e-mail" : "Email support",
          ]} lang={lang} />
          <PriceCard tier="Starter" price="129" currency="R$" reqs="200k/dia" features={[
            lang === "pt" ? "Tudo do Free" : "Everything in Free",
            lang === "pt" ? "Radar tiles" : "Radar tiles",
            lang === "pt" ? "Histórico 90 dias" : "90-day history",
            lang === "pt" ? "Webhooks" : "Webhooks",
          ]} lang={lang} />
          <PriceCard tier="Pro" price="490" currency="R$" reqs="2M/dia" highlight features={[
            lang === "pt" ? "Tudo do Starter" : "Everything in Starter",
            lang === "pt" ? "Modelos numéricos brutos" : "Raw numerical models",
            lang === "pt" ? "Histórico 30 anos" : "30-year history",
            "SLA 99.95%",
          ]} lang={lang} />
          <PriceCard tier="Enterprise" price={lang === "pt" ? "sob consulta" : "contact"} currency="" reqs={lang === "pt" ? "ilimitado" : "unlimited"} features={[
            lang === "pt" ? "Infra dedicada" : "Dedicated infra",
            lang === "pt" ? "Co-locação de modelos" : "Model co-location",
            lang === "pt" ? "Suporte 24/7" : "24/7 support",
            "SLA 99.99%",
          ]} lang={lang} />
        </div>
      </Container>
    </div>
  );
}

function EndpointDoc({ lang, endpoint, tab, setTab }) {
  const examples = {
    curl: `curl -X GET "https://api.aerograma.pro/v1/weather" \\
  -H "Authorization: Bearer $AEROGRAMA_KEY" \\
  -G --data-urlencode "lat=-29.69" \\
     --data-urlencode "lon=-53.84" \\
     --data-urlencode "dias=7"`,
    js: `import { Aerograma } from "@aerograma/sdk";

const ag = new Aerograma(process.env.AEROGRAMA_KEY);

const data = await ag.weather({
  lat: -29.69,
  lon: -53.84,
  dias: 7,
});

console.log(data.current_complete.temperature_2m); // 14.4`,
    python: `from aerograma import Client

ag = Client(api_key=os.environ["AEROGRAMA_KEY"])

data = ag.weather(lat=-29.69, lon=-53.84, dias=7)

print(data.current_complete.temperature_2m)  # 14.4`,
    response: `{
  "latitude": -29.701231,
  "longitude": -53.874695,
  "elevation": 77,
  "timezone": "America/Sao_Paulo",
  "current_complete": {
    "time": "2026-05-26T08:30",
    "temperature_2m": 14.4,
    "apparent_temperature": 15.2,
    "relative_humidity_2m": 99,
    "surface_pressure": 1010.4,
    "wind_speed_10m": 4.1,
    "wind_direction_10m": 268,
    "weathercode": 55,
    "weathercode_desc": {
      "pt": "Garoa intensa",
      "en": "Dense drizzle"
    }
  },
  "forecast": [ … 7 days … ],
  "hourly": { … 24 hours of fields … }
}`,
  };

  return (
    <div style={{
      background: '#fff', border: `0.5px solid ${AERO.hair}`, borderRadius: 6,
      overflow: 'hidden',
    }}>
      <div style={{ padding: '24px 28px', borderBottom: `0.5px solid ${AERO.hair}` }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
          <span style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
            fontWeight: 600, letterSpacing: 1, color: AERO.ok,
            padding: '3px 6px', background: AERO.ok + "1a", borderRadius: 3,
          }}>GET</span>
          <code style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 18, color: AERO.ink,
          }}>https://api.aerograma.pro/v1{endpoint}</code>
        </div>
        <h3 className="aero-serif" style={{
          fontStyle: 'italic', fontSize: 26, color: AERO.ink, margin: '14px 0 4px',
        }}>
          {lang === "pt" ? "Estado atual + previsão" : "Current state + forecast"}
        </h3>
        <p style={{ fontSize: 13, color: AERO.inkDim, margin: 0, lineHeight: 1.55 }}>
          {lang === "pt"
            ? "Retorna observações de superfície em tempo real, previsão horária para 24h e previsão diária para até 15 dias para qualquer coordenada do globo."
            : "Returns real-time surface observations, hourly forecast for 24h, and daily forecast up to 15 days for any global coordinate."}
        </p>
      </div>

      {/* Params */}
      <div style={{ padding: '22px 28px', borderBottom: `0.5px solid ${AERO.hair}` }}>
        <div className="aero-eyebrow" style={{ marginBottom: 14 }}>
          {lang === "pt" ? "Parâmetros" : "Parameters"}
        </div>
        {[
          ["lat", "float", true, lang === "pt" ? "Latitude (-90 ≤ lat ≤ 90)" : "Latitude (-90 ≤ lat ≤ 90)"],
          ["lon", "float", true, lang === "pt" ? "Longitude (-180 ≤ lon ≤ 180)" : "Longitude (-180 ≤ lon ≤ 180)"],
          ["dias", "int", false, lang === "pt" ? "Número de dias de previsão (1–15). Padrão: 7" : "Forecast days (1–15). Default: 7"],
          ["lang", "string", false, lang === "pt" ? "Idioma dos textos (pt | en). Padrão: pt" : "Description language (pt | en). Default: pt"],
          ["units", "string", false, lang === "pt" ? "metric | imperial. Padrão: metric" : "metric | imperial. Default: metric"],
        ].map(([name, type, required, desc]) => (
          <div key={name} style={{
            display: 'grid', gridTemplateColumns: '120px 80px 60px 1fr',
            padding: '10px 0', borderTop: `0.5px solid ${AERO.hair}`,
            fontFamily: "'JetBrains Mono', monospace", fontSize: 12,
          }}>
            <code style={{ color: AERO.ink, fontWeight: 500 }}>{name}</code>
            <span style={{ color: AERO.inkSoft }}>{type}</span>
            <span style={{ color: required ? AERO.danger : AERO.inkSoft, fontSize: 10 }}>
              {required ? (lang === "pt" ? "obrigatório" : "required") : (lang === "pt" ? "opcional" : "optional")}
            </span>
            <span style={{ color: AERO.inkDim, fontFamily: "'Geist', system-ui, sans-serif", fontSize: 13 }}>{desc}</span>
          </div>
        ))}
      </div>

      {/* Code tabs */}
      <div>
        <div style={{ display: 'flex', borderBottom: `0.5px solid ${AERO.hair}` }}>
          {[
            ["curl", "cURL"], ["js", "JavaScript"], ["python", "Python"], ["response", "Response"],
          ].map(([k, l]) => (
            <button key={k} onClick={() => setTab(k)} style={{
              padding: '14px 22px', background: 'transparent', border: 'none',
              borderBottom: tab === k ? `1.5px solid ${AERO.ink}` : '1.5px solid transparent',
              color: tab === k ? AERO.ink : AERO.inkSoft, cursor: 'pointer',
              fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
              letterSpacing: 1, textTransform: 'uppercase',
              fontWeight: tab === k ? 600 : 400,
            }}>{l}</button>
          ))}
        </div>
        <pre style={{
          margin: 0, padding: '24px 28px',
          background: AERO.ink, color: AERO.paper,
          fontFamily: "'JetBrains Mono', monospace", fontSize: 13,
          lineHeight: 1.65, overflow: 'auto',
        }}>
          <code style={{ color: AERO.paper, whiteSpace: 'pre' }}>{examples[tab]}</code>
        </pre>
      </div>
    </div>
  );
}

function PriceCard({ tier, price, currency, reqs, features, highlight, lang }) {
  return (
    <div style={{
      background: highlight ? AERO.ink : '#fff',
      color: highlight ? AERO.paper : AERO.ink,
      border: `0.5px solid ${highlight ? AERO.ink : AERO.hair}`,
      borderRadius: 6, padding: '28px 26px',
    }}>
      <div className="aero-mono" style={{
        fontSize: 10, letterSpacing: 1.6, textTransform: 'uppercase',
        color: highlight ? '#cfcab8' : AERO.inkSoft, fontWeight: 600,
      }}>{tier}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 12 }}>
        <span className="aero-serif" style={{
          fontStyle: 'italic', fontSize: 56, lineHeight: 1, letterSpacing: -1.5,
        }}>{currency}{price}</span>
      </div>
      <div className="aero-mono" style={{
        fontSize: 10, color: highlight ? '#cfcab8' : AERO.inkSoft, marginTop: 4,
      }}>{reqs} · {lang === "pt" ? "requisições" : "requests"}</div>
      <div style={{ borderTop: `0.5px solid ${highlight ? '#3a382f' : AERO.hair}`,
        marginTop: 20, paddingTop: 16,
        display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
        {features.map(f => (
          <div key={f} style={{ display: 'flex', gap: 8, alignItems: 'baseline' }}>
            <span style={{ color: highlight ? AERO.warm : AERO.warm, fontSize: 10 }}>●</span>
            <span style={{ color: highlight ? '#e9e3cf' : AERO.inkDim }}>{f}</span>
          </div>
        ))}
      </div>
      <a href="#" style={{
        display: 'block', textAlign: 'center', marginTop: 22,
        background: highlight ? AERO.warm : 'transparent',
        color: highlight ? AERO.ink : AERO.ink,
        border: highlight ? 'none' : `0.5px solid ${AERO.line}`,
        padding: '11px', borderRadius: 999,
        fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5,
        letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 600,
      }}>
        {lang === "pt" ? "Começar" : "Get started"}
      </a>
    </div>
  );
}

Object.assign(window, { PageAlerts, PageAPI });