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

/* === SHARED UI === */

const Logo = ({ variant = "light" }) => (
  <a href="#" className="brand-logo" aria-label="UPCOM Afiliados ML" style={{ display: "inline-flex", alignItems: "center" }}>
    <img
      src={variant === "light" ? "assets/upcom-logo-white.png" : "uploads/upcom-colologoafiliados.png"}
      alt="UPCOM / Afiliados ML"
      style={{ height: 32, width: "auto", display: "block" }}
    />
  </a>
);

const PillBadge = ({ children, tone = "yellow" }) => (
  <span className={`pill pill-${tone}`}>{children}</span>
);

const Check = ({ color = "#FF6B57" }) => (
  <svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true" style={{ flexShrink: 0 }}>
    <circle cx="11" cy="11" r="11" fill={color} />
    <path d="M6 11.5 L9.5 15 L16 8" stroke="white" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" fill="none" />
  </svg>
);

const X = () => (
  <svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true" style={{ flexShrink: 0 }}>
    <circle cx="11" cy="11" r="11" fill="#E5D3F7" />
    <path d="M7 7 L15 15 M15 7 L7 15" stroke="#6B5688" strokeWidth="2.4" strokeLinecap="round" />
  </svg>
);

const WhatsAppIcon = ({ size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M17.6 6.3A7.85 7.85 0 0 0 12 4a7.94 7.94 0 0 0-6.8 12L4 20l4.1-1.1a7.93 7.93 0 0 0 3.9 1h.01A7.94 7.94 0 0 0 20 12a7.9 7.9 0 0 0-2.4-5.7Zm-5.6 12.2a6.6 6.6 0 0 1-3.4-.9l-.24-.15-2.43.64.65-2.37-.16-.25A6.6 6.6 0 1 1 12 18.5Zm3.6-4.94c-.2-.1-1.17-.58-1.35-.64-.18-.07-.31-.1-.45.1s-.51.65-.63.78c-.12.14-.23.16-.43.05a5.4 5.4 0 0 1-1.6-.99 6 6 0 0 1-1.1-1.37c-.12-.2 0-.31.09-.4l.3-.34c.1-.12.13-.2.2-.34a.36.36 0 0 0 0-.34c-.05-.1-.45-1.08-.62-1.48-.16-.39-.33-.34-.45-.34l-.39-.01a.74.74 0 0 0-.54.25 2.27 2.27 0 0 0-.7 1.69 3.95 3.95 0 0 0 .82 2.1 9 9 0 0 0 3.46 3.06c.49.2.87.32 1.16.4a2.8 2.8 0 0 0 1.28.08c.4-.06 1.18-.48 1.34-.95.17-.46.17-.86.12-.95-.05-.1-.18-.15-.38-.25Z"/>
  </svg>
);

const ArrowRight = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 18 18" fill="none" aria-hidden="true">
    <path d="M3 9 H15 M10 4 L15 9 L10 14" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

/* === HEADER === */

const Header = () => (
  <header style={{
    position: "absolute", top: 0, left: 0, right: 0, zIndex: 10,
    padding: "22px 0",
  }}>
    <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20, flexWrap: "wrap" }}>
      <Logo />
      <nav style={{ display: "flex", gap: 28, alignItems: "center", flexWrap: "wrap" }}>
        <a href="#beneficios" style={{ color: "white", fontWeight: 600, fontSize: 14 }}>Benefícios</a>
        <a href="#planos" style={{ color: "white", fontWeight: 600, fontSize: 14 }}>Planos</a>
        <a href="#faq" style={{ color: "white", fontWeight: 600, fontSize: 14 }}>FAQ</a>
        <a href="#contato" className="btn btn-sm" style={{ background: "rgba(255,255,255,0.12)", color: "white", border: "1.5px solid rgba(255,255,255,0.3)" }}>
          Fale com a gente
        </a>
      </nav>
    </div>
  </header>
);

window.Logo = Logo;
window.PillBadge = PillBadge;
window.Check = Check;
window.X = X;
window.WhatsAppIcon = WhatsAppIcon;
window.ArrowRight = ArrowRight;
window.Header = Header;
