"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ArrowRight, CheckCircle, Users } from "lucide-react";

export default function InlineOptin() {
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!email) return;
    setSubmitted(true);
  }

  return (
    <section className="bg-background py-16 px-4 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-2xl text-center">
        {submitted ? (
          <div className="space-y-4 py-8">
            <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-green-100 text-green-600">
              <CheckCircle className="h-8 w-8" />
            </div>
            <h3 className="text-2xl font-bold text-foreground">You're on the list!</h3>
            <p className="text-muted-foreground">
              Check <strong>{email}</strong> — your playbook is on its way.
            </p>
          </div>
        ) : (
          <>
            {/* Eyebrow */}
            <p className="text-sm font-semibold uppercase tracking-widest text-primary mb-3">
              Free resource
            </p>

            {/* Headline */}
            <h2 className="text-3xl font-extrabold text-foreground sm:text-4xl leading-tight mb-4">
              Get the free playbook
            </h2>

            {/* Subtext */}
            <p className="text-muted-foreground text-lg mb-8 max-w-lg mx-auto">
              The exact strategies our top clients used to grow revenue by 3x —
              distilled into a no-fluff, actionable guide.
            </p>

            {/* Form */}
            <form
              onSubmit={handleSubmit}
              className="flex flex-col sm:flex-row gap-3 justify-center"
            >
              <Input
                type="email"
                placeholder="Enter your email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                className="h-12 sm:max-w-xs text-base"
              />
              <Button type="submit" size="lg" className="h-12 gap-2 font-semibold">
                Get free access
                <ArrowRight className="h-4 w-4" />
              </Button>
            </form>

            {/* Social proof */}
            <div className="mt-6 flex items-center justify-center gap-2 text-sm text-muted-foreground">
              <Users className="h-4 w-4" />
              <span>
                Join{" "}
                <strong className="text-foreground">1,200+ marketers</strong> already
                inside · No spam · Unsubscribe anytime
              </span>
            </div>
          </>
        )}
      </div>
    </section>
  );
}