'use client'

import { motion } from 'framer-motion'
import { useMemo, useState } from 'react'

const heroStats = [
  { label: 'Launch time', value: 'days', detail: 'From idea to a five-page microsite with forms and follow-up copy.' },
  { label: 'Mindshare', value: 'Small & micro businesses only', detail: 'Served with tools built for their pace, not enterprise bureaucracy.' },
  { label: 'Control', value: 'In your hands', detail: 'We never take over—just give you better drafts, faster loops, and steady oversight.' },
]

const moduleHighlights = [
  {
    title: 'Lead journey blueprint',
    copy: 'We map every touch—click, form, DM—so your follow-ups feel personal and focused.',
  },
  {
    title: 'Human-reviewed content',
    copy: 'Blogs, emails, socials drafted by AI and approved by a human so the voice always sounds like you.',
  },
  {
    title: 'Microsite sprint',
    copy: 'A five-page experience with lightweight storytelling, responsive forms, and quick updates.',
  },
]

const addonModules = [
  { name: 'Social pulse', note: 'Pre-written slices you edit and send', stat: '3 weekly social loops' },
  { name: 'Conversation lab', note: 'Smart replies you customize', stat: '1 workflow per channel' },
  { name: 'Content studio', note: 'Blog drafts with on-brand tone', stat: '2 long-form pieces' },
]

export default function Home() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    company: '',
    message: '',
  })
  const [submitted, setSubmitted] = useState(false)
  const [error, setError] = useState('')

  const isFormValid = useMemo(
    () => formData.name.trim() && formData.email.includes('@') && formData.message.trim(),
    [formData]
  )

  const handleChange = (field: keyof typeof formData) => (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData((prev) => ({ ...prev, [field]: event.target.value }))
  }

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    if (!isFormValid) {
      setError('Please share a name, valid email, and your main objective.')
      return
    }
    setError('')
    setSubmitted(true)
  }

  return (
    <main className="min-h-screen bg-gradient-to-b from-zinc-950 via-slate-950 to-zinc-900 text-white">
      <div className="relative z-10 overflow-hidden">
        <div className="floating-ring pointer-events-none" aria-hidden="true" />
        <div className="floating-ring floating-ring--secondary pointer-events-none" aria-hidden="true" />
      </div>
      <div className="container mx-auto px-4 py-16 space-y-20">
        <section className="relative hero-prism max-w-6xl mx-auto space-y-10">
          <div className="text-center space-y-4">
            <p className="text-xs uppercase tracking-[0.4em] text-zinc-500">Post-marketing world for small teams</p>
            <h1 className="text-4xl md:text-6xl font-bold leading-tight font-heading">
              1KP gives you the AI tools that make your small business feel like it has its own marketing team.
            </h1>
            <p className="mx-auto max-w-3xl text-lg text-zinc-300">
              Build lean, readable stories that win trust, capture leads, and stay in your voice. No hype, no ownership swaps—just the tools you can plug into your own rhythm.
            </p>
          </div>
          <div className="flex flex-col-reverse gap-6 lg:flex-row lg:items-center">
            <div className="space-y-4">
              <div className="rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0_20px_45px_rgba(15,23,42,0.9)]">
                <p className="text-xs uppercase tracking-[0.3em] text-zinc-400">Capstone offer</p>
                <p className="text-sm text-zinc-300 leading-relaxed">
                  An AI-assisted five-page microsite with forms, follow-ups, and living content that you can tweak in minutes.
                </p>
                <div className="pt-4 space-y-2 font-data text-sm text-slate-200">
                  <div>
                    <span className="text-xs uppercase tracking-[0.4em] text-zinc-400">pages</span>
                    <p className="text-3xl font-semibold">5</p>
                  </div>
                  <div>
                    <span className="text-xs uppercase tracking-[0.4em] text-zinc-400">notes</span>
                    <p className="text-2xl font-semibold">live edit</p>
                  </div>
                </div>
              </div>
              <div className="flex flex-col gap-3">
                <button className="rounded-full bg-gradient-to-r from-violet-500 via-purple-600 to-pink-500 px-8 py-3 text-base font-semibold text-white shadow-lg shadow-violet-500/50 transition hover:scale-[1.02]">
                  Plan a walkthrough
                </button>
                <button className="rounded-full border border-zinc-700 px-8 py-3 text-sm uppercase tracking-[0.3em] text-zinc-400 transition hover:border-zinc-500">
                  Download the sprint brief
                </button>
              </div>
            </div>
            <motion.div
              initial={{ opacity: 0, y: 40 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="grid gap-4 md:grid-cols-2"
            >
              {heroStats.map((stat) => (
                <motion.div
                  key={stat.label}
                  className="module-card border border-white/10 bg-white/5 p-5"
                  whileHover={{ scale: 1.02 }}
                >
                  <p className="text-xs uppercase tracking-[0.4em] text-zinc-400">{stat.label}</p>
                  <p className="text-2xl font-heading text-white">{stat.value}</p>
                  <p className="text-sm text-zinc-300">{stat.detail}</p>
                </motion.div>
              ))}
            </motion.div>
          </div>
          <div className="flex justify-center">
            <svg viewBox="0 0 100 100" className="svg-prism" role="presentation" aria-hidden="true">
              <defs>
                <linearGradient id="halo" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stopColor="#a855f7" />
                  <stop offset="50%" stopColor="#38bdf8" />
                  <stop offset="100%" stopColor="#f472b6" />
                </linearGradient>
              </defs>
              <polygon points="50,5 95,35 80,90 20,90 5,35" fill="url(#halo)" opacity="0.85" />
            </svg>
          </div>
        </section>

        <section className="space-y-6 rounded-3xl border border-zinc-800 bg-zinc-950/70 p-8">
          <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
            <div>
              <p className="text-xs uppercase tracking-[0.3em] text-zinc-500">How we show up</p>
              <h2 className="text-3xl font-heading font-bold tracking-tight">Practical tools for your customer journey</h2>
            </div>
            <p className="text-sm text-zinc-400 max-w-xl">
              Each step is measurable, reviewed by humans, and built to help small and micro businesses capture leads faster. We keep the language plain and the results understandable.
            </p>
          </div>
          <div className="grid gap-5 md:grid-cols-3">
            {moduleHighlights.map((module) => (
              <article key={module.title} className="module-card rounded-3xl border border-white/10 bg-white/5 p-6">
                <div className="flex items-center justify-between">
                  <h3 className="text-xl font-heading font-semibold">{module.title}</h3>
                  <span className="h-2 w-2 rounded-full bg-violet-500" />
                </div>
                <p className="mt-3 text-sm text-zinc-300 leading-relaxed">{module.copy}</p>
              </article>
            ))}
          </div>
        </section>

        <section className="space-y-6 rounded-3xl border border-zinc-800 bg-gradient-to-br from-zinc-950/90 to-slate-900/70 p-8">
          <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
            <div>
              <p className="text-xs uppercase tracking-[0.3em] text-zinc-500">Capstone product</p>
              <h2 className="text-3xl font-heading font-bold tracking-tight">Lead-capturing microsites, refreshed</h2>
            </div>
            <p className="text-sm text-zinc-400 max-w-xl">
              Each microsite ships with lead forms, automated follow-ups, and living content modules you can edit in real time. Add-on packs stay affordable and flexible.
            </p>
          </div>
          <div className="grid gap-4 md:grid-cols-3">
            <div className="module-card rounded-3xl border border-white/10 bg-black/30 p-6">
              <p className="text-xs uppercase tracking-[0.4em] text-zinc-400">Pages</p>
              <p className="font-heading text-4xl text-white">5</p>
              <p className="text-sm text-zinc-300">Story-driven layout, hero through CTA.</p>
            </div>
            <div className="module-card rounded-3xl border border-white/10 bg-black/30 p-6">
              <p className="text-xs uppercase tracking-[0.4em] text-zinc-400">Forms</p>
              <p className="font-heading text-4xl text-white">Live</p>
              <p className="text-sm text-zinc-300">Track submissions, add human follow-ups, see the full path.</p>
            </div>
            <div className="module-card rounded-3xl border border-white/10 bg-black/30 p-6">
              <p className="text-xs uppercase tracking-[0.4em] text-zinc-400">Drafts</p>
              <p className="font-heading text-4xl text-white">Human-checked</p>
              <p className="text-sm text-zinc-300">Every piece reviewed before it goes live.</p>
            </div>
          </div>
          <div className="grid gap-4 md:grid-cols-3">
            {addonModules.map((addon) => (
              <article key={addon.name} className="module-card rounded-2xl border border-white/10 bg-white/5 p-5">
                <p className="text-xs uppercase tracking-[0.4em] text-zinc-400">{addon.name}</p>
                <p className="text-base font-semibold text-white">{addon.note}</p>
                <p className="font-data text-sm text-emerald-200">{addon.stat}</p>
              </article>
            ))}
          </div>
        </section>

        <section className="space-y-6 rounded-3xl border border-zinc-800 bg-black/30 p-8">
          <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
            <div>
              <p className="text-xs uppercase tracking-[0.4em] text-zinc-500">Start a conversation</p>
              <h2 className="text-3xl font-heading font-bold">Tell us what feels out of place today</h2>
            </div>
            <p className="text-sm text-zinc-400 max-w-xl">
              Share your current lead flow or the content you wish you had. We will reply with a clear next step—the work is always human-reviewed.
            </p>
          </div>
          <div className="grid gap-4 md:grid-cols-3">
            <div className="skeleton h-10 rounded-3xl" />
            <div className="skeleton h-10 rounded-3xl" />
            <div className="skeleton h-10 rounded-3xl" />
          </div>
          <form className="space-y-4" onSubmit={handleSubmit}>
            <div className="grid gap-4 md:grid-cols-2">
              <label className="text-sm text-zinc-400 flex flex-col">
                Name
                <input
                  value={formData.name}
                  onChange={handleChange('name')}
                  className="mt-2 rounded-2xl bg-white/5 border border-zinc-800 px-4 py-3 text-white focus:border-white focus:ring-0"
                  type="text"
                  placeholder="Alex Rivera"
                />
              </label>
              <label className="text-sm text-zinc-400 flex flex-col">
                Email
                <input
                  value={formData.email}
                  onChange={handleChange('email')}
                  className="mt-2 rounded-2xl bg-white/5 border border-zinc-800 px-4 py-3 text-white focus:border-white focus:ring-0"
                  type="email"
                  placeholder="you@company.com"
                />
              </label>
            </div>
            <label className="text-sm text-zinc-400 flex flex-col">
              Company / project
              <input
                value={formData.company}
                onChange={handleChange('company')}
                className="mt-2 rounded-2xl bg-white/5 border border-zinc-800 px-4 py-3 text-white focus:border-white focus:ring-0"
                type="text"
                placeholder="Neighborhood Bakery, LLC"
              />
            </label>
            <label className="text-sm text-zinc-400 flex flex-col">
              What feels hard about your current marketing stack?
              <textarea
                value={formData.message}
                onChange={handleChange('message')}
                className="mt-2 rounded-2xl bg-white/5 border border-zinc-800 px-4 py-3 text-white focus:border-white focus:ring-0 resize-none min-h-[140px]"
                placeholder="Tell us about the workflows or customer journey you want to own."
              />
            </label>
            {error && <p className="text-sm text-rose-400">{error}</p>}
            {submitted && <p className="text-sm text-emerald-400">Thanks! Expect a plain-language reply with the next steps.</p>}
            <button
              type="submit"
              className="w-full rounded-2xl bg-gradient-to-r from-violet-500 to-purple-700 px-6 py-4 text-base font-semibold text-white shadow-lg shadow-violet-700/40"
            >
              Request a clearer automation path
            </button>
            <p className="text-xs text-zinc-500">
              Every plan is reviewed by a human before we build anything for your team.
            </p>
          </form>
        </section>

        <section className="space-y-4 rounded-3xl border border-zinc-800 bg-white/5 p-8">
          <p className="text-xs uppercase tracking-[0.4em] text-zinc-500">Testing ground</p>
          <h2 className="text-2xl font-heading font-bold">1000planets.cloud is under testing</h2>
          <p className="text-sm text-zinc-400 leading-relaxed">
            We keep the site public while we refine the experience. Expect updates, shimmer, and new modules as we respond to small business customer feedback.
          </p>
        </section>
      </div>
    </main>
  )
}