'use client'
import { useState } from 'react'
import { ArrowRight, Mail } from 'lucide-react'
import Image from 'next/image'
import Button from '@/components/ui/Button'
import Input from '@/components/ui/Input'

export default function EarthyNewsletterSection() {
  const [email, setEmail] = useState('')
  const [subscribed, setSubscribed] = useState(false)
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (email) setSubscribed(true)
  }
  return (
    <section data-vula-section="earthynewsletter" id="newsletter" className="py-20 bg-[#f4f5f2]">
      <div className="container mx-auto px-4 max-w-5xl">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center bg-white rounded-3xl shadow-xl overflow-hidden">
          <div className="relative h-64 md:h-full min-h-[250px]">
            <Image
              src="https://images.pexels.com/photos/9775170/pexels-photo-9775170.jpeg?auto=compress&cs=tinysrgb&h=350&w=350"
              alt="Marula oil bottle"
              fill
              sizes="(max-width: 768px) 100vw, 50vw"
              className="object-cover"
            />
          </div>
          <div className="p-8 md:p-12">
            <p className="text-sm uppercase tracking-wider text-[#ea580c] mb-2">Imvelo Tips</p>
            <h3 className="text-2xl font-bold text-[#2c331f] mb-2">Get early access to small batches</h3>
            <p className="text-[#8b5a3c] mb-6">Subscribe for seasonal skincare tips, new product alerts, and exclusive offers from the workshop.</p>
            {subscribed ? (
              <p className="text-lg font-semibold text-[#6b8e23]">Siyabonga! You're on the list.</p>
            ) : (
              <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3">
                <Input
                  type="email"
                  placeholder="Your email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                  className="flex-1"
                />
                <Button type="submit" variant="default" className="whitespace-nowrap">
                  Subscribe
                  <ArrowRight className="w-4 h-4 ml-2" />
                </Button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  )
}