/* global React */

const Hero = ({ copy }) => {
  const [form, setForm] = React.useState({ nome: "", whatsapp: "" });

  const submit = (e) => {
    e.preventDefault();
    const msg = encodeURIComponent(`Olá! Me chamo ${form.nome} e tenho interesse em um site de afiliado do Mercado Livre. Meu WhatsApp: ${form.whatsapp}`);
    window.open(`https://wa.me/5511999999999?text=${msg}`, "_blank");
  };

  return (
    <section className="bg-purple-deep" style={{ padding: "150px 0 110px", overflow: "hidden" }}>
      {/* decorative blobs */}
      <div className="blob" style={{ width: 500, height: 500, background: "#FF6B57", top: -120, right: -120, opacity: 0.25 }} />
      <div className="blob" style={{ width: 420, height: 420, background: "#FFCB47", bottom: -180, left: -100, opacity: 0.18 }} />

      {/* sparkles */}
      <Sparkle style={{ top: 120, left: "8%" }} />
      <Sparkle style={{ top: 280, right: "5%", transform: "scale(0.6)" }} />
      <Sparkle style={{ bottom: 120, left: "42%", transform: "scale(0.7)" }} />

      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.15fr 1fr",
          gap: 60,
          alignItems: "center",
        }} className="hero-grid">
          {/* LEFT COPY */}
          <div className="stack" style={{ gap: 28 }}>
            <span className="pill pill-yellow" style={{ alignSelf: "flex-start" }}>
              <Spark /> {copy.heroBadge}
            </span>
            <h1 style={{ color: "white" }}>
              {copy.heroTitle.before}{" "}
              <span style={{
                background: "linear-gradient(90deg, #FFCB47, #FF8676)",
                WebkitBackgroundClip: "text",
                WebkitTextFillColor: "transparent",
              }}>{copy.heroTitle.highlight}</span>
              {copy.heroTitle.after}
            </h1>
            <p style={{ fontSize: 19, color: "rgba(255,255,255,0.85)", maxWidth: 560, lineHeight: 1.5 }}>
              {copy.heroSub}
            </p>

            {/* trust strip */}
            <div className="row" style={{ gap: 20, marginTop: 8 }}>
              <TrustItem icon="bolt" label="Entrega em 3 dias úteis" />
              <TrustItem icon="shield" label="Sem mensalidade" />
              <TrustItem icon="rocket" label="Pagamento em até 12x" />
            </div>

            <div className="row" style={{ marginTop: 8, gap: 14 }}>
              <a href="#planos" className="btn btn-primary btn-lg">
                Quero meu site pronto <ArrowRight />
              </a>
              <a href="#planos" className="btn btn-ghost btn-lg">Ver planos</a>
            </div>
          </div>

          {/* RIGHT FORM CARD */}
          <form onSubmit={submit} style={{
            background: "white",
            borderRadius: 28,
            padding: 36,
            boxShadow: "0 30px 80px -20px rgba(0,0,0,0.4)",
            position: "relative",
          }}>
            <div style={{
              position: "absolute", top: -16, left: 24,
              background: "#FF6B57", color: "white",
              padding: "8px 16px", borderRadius: 999,
              fontSize: 12, fontWeight: 800, letterSpacing: "0.05em", textTransform: "uppercase",
            }}>
              Gratuito
            </div>

            <h3 style={{ color: "#1A0B33", fontSize: 24, marginBottom: 8 }}>
              Receba seu site pronto
            </h3>
            <p style={{ color: "#6B5688", fontSize: 14, marginBottom: 24 }}>
              Preencha em 30 segundos. Te chamamos no WhatsApp.
            </p>

            <div className="stack" style={{ gap: 14 }}>
              <Field label="Nome completo" name="nome" value={form.nome} onChange={(v) => setForm({...form, nome: v})} />
              <Field label="WhatsApp" name="whatsapp" placeholder="(11) 99999-9999" value={form.whatsapp} onChange={(v) => setForm({...form, whatsapp: v})} />
            </div>

            <button type="submit" className="btn btn-primary btn-lg" style={{ width: "100%", marginTop: 24 }}>
              Falar no WhatsApp <WhatsAppIcon size={18} />
            </button>

            <p style={{ fontSize: 12, color: "#A89AC2", textAlign: "center", marginTop: 12 }}>
              🔒 Seus dados estão seguros. Sem spam.
            </p>
          </form>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
};

const Sparkle = ({ style }) => (
  <div style={{ position: "absolute", ...style }} aria-hidden="true">
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <path d="M16 4 L18 14 L28 16 L18 18 L16 28 L14 18 L4 16 L14 14 Z" fill="#FFCB47" opacity="0.85" />
    </svg>
  </div>
);

const Spark = () => (
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
    <path d="M7 1 L8 6 L13 7 L8 8 L7 13 L6 8 L1 7 L6 6 Z" fill="currentColor" />
  </svg>
);

const TrustItem = ({ icon, label }) => {
  const icons = {
    bolt: <path d="M11 1 L4 12 L9 12 L7 19 L14 8 L9 8 Z" fill="#FFCB47" />,
    shield: <path d="M9 1 L2 4 L2 9 C2 13 5 17 9 18 C13 17 16 13 16 9 L16 4 Z M7 9 L9 11 L13 7" stroke="#FFCB47" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" />,
    rocket: <path d="M3 15 L7 11 M2 17 L4 17 M5 13 C5 8 9 4 14 4 L16 6 C16 11 12 15 7 15 Z M11 7 A1.5 1.5 0 1 1 11 8" stroke="#FFCB47" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" />,
  };
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, color: "rgba(255,255,255,0.9)", fontSize: 14, fontWeight: 600 }}>
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">{icons[icon]}</svg>
      {label}
    </div>
  );
};

const Field = ({ label, name, value, onChange, type = "text", placeholder }) => (
  <label style={{ display: "block" }}>
    <span style={{ display: "block", fontSize: 13, fontWeight: 700, color: "#3D2466", marginBottom: 6 }}>{label}</span>
    <input
      type={type}
      name={name}
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder={placeholder}
      style={{
        width: "100%",
        padding: "14px 16px",
        borderRadius: 12,
        border: "1.5px solid #E5D3F7",
        fontSize: 15,
        fontFamily: "inherit",
        color: "#1A0B33",
        outline: "none",
        transition: "border-color 0.2s",
      }}
      onFocus={(e) => e.target.style.borderColor = "#7B2DD6"}
      onBlur={(e) => e.target.style.borderColor = "#E5D3F7"}
    />
  </label>
);

window.Hero = Hero;