'use client'

import { useState, type FormEvent } from 'react'
import { LayoutGrid } from 'lucide-react'
import Button from '@/components/ui/Button'
import Input from '@/components/ui/Input'

export default function IkayaMailSection() {
  const [email, setEmail] = useState('')
  const [subscribed, setSubscribed] = useState(false)

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault()
    if (email.trim()) setSubscribed(true)
  }

  return (
    <section data-vula-section="ikayamail" id="newsletter" className="bg-[#8b5a3c] px-4 py-16">
      <div className="mx-auto max-w-3xl rounded-3xl border border-[#e2d9d4] bg-white p-8 text-center shadow-lg sm:p-12">
        <div className="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-[#f9f5f4] text-[#ea580c]">
          <LayoutGrid className="h-6 w-6" />
        </div>
        <h2 className="font-display text-3xl text-[#21140d] sm:text-4xl">Join the iKhaya family</h2>
        <p className="mx-auto mt-3 mb-8 max-w-xl text-[#5b463a]">First access to new artisan collections, design inspiration from Durban, and the stories behind every hand-painted pattern. No hard sell &mdash; just an invitation to stay connected.</p>
        {subscribed ? (
          <p className="font-semibold text-[#6b8e23]">Sawubona! Check your inbox to confirm your welcome note.</p>
        ) : (
          <form onSubmit={handleSubmit} className="mx-auto flex max-w-md flex-col gap-3 sm:flex-row">
            <Input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Your email address" className="flex-1" />
            <Button type="submit" variant="default">Sign me up</Button>
          </form>
        )}
      </div>
    </section>
  )
}