"use client";

import { FormEvent, useState } from "react";
import { FiArrowRight, FiCheck } from "react-icons/fi";
import { trackEvent } from "@/lib/analytics";

export function Newsletter() {
  const [sent, setSent] = useState(false);

  function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSent(true);
    trackEvent("newsletter_submit", { source: "home" });
    event.currentTarget.reset();
  }

  return (
    <section className="section newsletter-section">
      <div className="shell newsletter-shell" data-reveal>
        <div>
          <span className="eyebrow">ENTRE PARA A COMUNIDADE</span>
          <h2>Receba o próximo som antes do ruído.</h2>
          <p>
            Lançamentos, bastidores, letras e conteúdos do SelahBeat diretamente
            no seu e-mail.
          </p>
        </div>

        {sent ? (
          <div className="form-success" role="status">
            <FiCheck />
            <div>
              <strong>Cadastro recebido.</strong>
              <span>A integração de envio pode ser conectada quando quiser.</span>
            </div>
          </div>
        ) : (
          <form className="newsletter-form" onSubmit={submit}>
            <label>
              <span>Nome</span>
              <input name="name" type="text" autoComplete="name" required />
            </label>
            <label>
              <span>E-mail</span>
              <input name="email" type="email" autoComplete="email" required />
            </label>
            <button type="submit" aria-label="Cadastrar na comunidade">
              <FiArrowRight />
            </button>
          </form>
        )}
      </div>
    </section>
  );
}