import React, { useState } from "react";
import { motion } from "framer-motion";
import { ArrowRight, Check, Crown, Mail, Phone, MapPin, Bot, FileText, LineChart, Sparkles } from "lucide-react";

/**
 * AutoFlow — AI & Automation (Screenshot → Live)
 *
 * Built with: React + Tailwind + Framer Motion
 * Design goals: clean, modern, "quiet luxury" feel (ample white space, soft shadows, refined micro‑interactions)
 *
 * ✉️ Contact Form
 * - By default, it opens the user's mail client to send to volsobko@gmail.com.
 * - Optional: plug EmailJS for direct sending without a backend — see EMAILJS_* placeholders below.
 */

// Optional EmailJS settings (uncomment and fill to enable)
// const EMAILJS_SERVICE_ID = "";     // e.g., "service_xxx"
// const EMAILJS_TEMPLATE_ID = "";    // e.g., "template_xxx"
// const EMAILJS_PUBLIC_KEY = "";     // e.g., "YOUR_PUBLIC_KEY"

const fadeUp = {
  hidden: { opacity: 0, y: 16 },
  show: { opacity: 1, y: 0, transition: { duration: 0.55, ease: [0.22, 1, 0.36, 1] } },
};
const stagger = { show: { transition: { staggerChildren: 0.06, delayChildren: 0.08 } } };

function SectionTitle({ eyebrow, title, subtitle }: { eyebrow?: string; title: string; subtitle?: string }) {
  return (
    <motion.div variants={stagger} initial="hidden" whileInView="show" viewport={{ once: true, margin: "-80px" }} className="text-center">
      {eyebrow && (
        <motion.p variants={fadeUp} className="text-xs font-medium tracking-widest uppercase text-neutral-500">
          {eyebrow}
        </motion.p>
      )}
      <motion.h2 variants={fadeUp} className="mt-2 text-2xl sm:text-3xl font-semibold text-neutral-900">
        {title}
      </motion.h2>
      {subtitle && (
        <motion.p variants={fadeUp} className="mt-3 text-neutral-600 max-w-2xl mx-auto">
          {subtitle}
        </motion.p>
      )}
    </motion.div>
  );
}

export default function AutoFlowPage() {
  return (
    <div className="min-h-screen bg-neutral-50 text-neutral-900">
      <Navbar />
      <Hero />
      <Services />
      <Packages />
      <Portfolio />
      <About />
      <Contact />
      <Footer />
    </div>
  );
}

function Navbar() {
  return (
    <header className="sticky top-0 z-50 bg-white/80 backdrop-blur border-b border-neutral-200/60">
      <nav className="mx-auto max-w-7xl h-16 px-4 sm:px-6 lg:px-8 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="h-8 w-8 rounded-xl bg-gradient-to-br from-violet-500 to-fuchsia-500 grid place-items-center text-white font-semibold">A</div>
          <span className="font-semibold tracking-wide">AutoFlow</span>
        </div>
        <ul className="hidden md:flex items-center gap-8 text-sm text-neutral-700">
          <li><a href="#services" className="hover:text-neutral-900">Services</a></li>
          <li><a href="#packages" className="hover:text-neutral-900">Packages</a></li>
          <li><a href="#portfolio" className="hover:text-neutral-900">Portfolio</a></li>
          <li><a href="#about" className="hover:text-neutral-900">About</a></li>
          <li><a href="#contact" className="hover:text-neutral-900">Contact</a></li>
        </ul>
        <a href="#contact" className="inline-flex items-center gap-2 rounded-full bg-neutral-900 text-white px-4 py-2 text-sm font-medium hover:opacity-90 transition">
          Get Started <ArrowRight className="h-4 w-4" />
        </a>
      </nav>
    </header>
  );
}

function Hero() {
  return (
    <section className="relative overflow-hidden">
      <div className="absolute -top-24 -right-24 h-80 w-80 rounded-full bg-violet-200 blur-3xl" />
      <div className="absolute -bottom-24 -left-24 h-80 w-80 rounded-full bg-fuchsia-200 blur-3xl" />
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 grid lg:grid-cols-12 gap-10 items-center py-14 lg:py-20">
        <motion.div variants={stagger} initial="hidden" animate="show" className="lg:col-span-7">
          <motion.p variants={fadeUp} className="text-xs font-medium tracking-widest uppercase text-neutral-500">AI & Automation Agency</motion.p>
          <motion.h1 variants={fadeUp} className="mt-2 text-4xl sm:text-5xl font-bold leading-tight text-neutral-900">
            Unlock the Power of <span className="text-transparent bg-clip-text bg-gradient-to-r from-violet-600 to-fuchsia-600">AI & Automation</span>
          </motion.h1>
          <motion.p variants={fadeUp} className="mt-5 text-lg text-neutral-600 max-w-2xl">
            Transform your business with cutting‑edge AI solutions. Streamline operations, enhance productivity, and unlock new possibilities.
          </motion.p>
          <motion.div variants={fadeUp} className="mt-8 flex flex-wrap gap-3">
            <a href="#packages" className="rounded-full bg-neutral-900 text-white px-6 py-3 text-sm font-semibold shadow-md hover:shadow-lg transition">Get Started Today</a>
            <a href="#services" className="rounded-full border border-neutral-300 bg-white px-6 py-3 text-sm font-medium hover:bg-neutral-50 transition">Learn More</a>
          </motion.div>

          <motion.div variants={fadeUp} className="mt-10 grid grid-cols-3 max-w-md gap-4 text-center">
            {[
              { value: "50+", label: "Projects" },
              { value: "96%", label: "Success Rate" },
              { value: "24/7", label: "Support" },
            ].map((kpi, i) => (
              <div key={i} className="rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm">
                <div className="text-xl font-semibold">{kpi.value}</div>
                <div className="text-xs text-neutral-500">{kpi.label}</div>
              </div>
            ))}
          </motion.div>
        </motion.div>

        <motion.div initial={{ opacity: 0, scale: 0.98 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.8 }} className="lg:col-span-5">
          <div className="relative aspect-[4/5] overflow-hidden rounded-3xl border border-neutral-200 bg-white p-2 shadow-xl">
            <div className="absolute -top-3 -right-3 h-8 w-8 rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500" />
            <div className="absolute -bottom-3 -left-3 h-8 w-8 rounded-full bg-emerald-400" />
            <img src="https://images.unsplash.com/photo-1507143550189-fed454f93097?q=80&w=2400&auto=format&fit=crop" alt="Robot" className="h-full w-full object-cover rounded-2xl" />
          </div>
        </motion.div>
      </div>
    </section>
  );
}

function Services() {
  const items = [
    { icon: <Bot className="h-5 w-5" />, title: "AI Chatbot", desc: "GPT‑powered bots for sites, Telegram/WhatsApp, Slack, CRM." },
    { icon: <FileText className="h-5 w-5" />, title: "Document‑AI", desc: "Intelligent extraction, classification, fast workflows." },
    { icon: <LineChart className="h-5 w-5" />, title: "Predictive Analytics", desc: "Lead scoring, demand planning, anomaly detection." },
  ];
  return (
    <section id="services" className="py-14 lg:py-20">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionTitle title="Our Services" subtitle="Comprehensive AI and automation solutions tailored to your business needs." />
        <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {items.map((it, i) => (
            <motion.div key={i} variants={fadeUp} initial="hidden" whileInView="show" viewport={{ once: true }} className="rounded-2xl border border-neutral-200 bg-white p-5 shadow-sm hover:shadow-md transition">
              <div className="h-10 w-10 rounded-xl bg-neutral-900 text-white grid place-items-center">
                {it.icon}
              </div>
              <h3 className="mt-4 text-lg font-semibold">{it.title}</h3>
              <p className="mt-2 text-sm text-neutral-600">{it.desc}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Packages() {
  const tiers = [
    {
      name: "Starter Bot",
      price: "$1,000",
      note: "Basic FAQ chatbot",
      features: ["Simple intents", "Single channel", "Basic analytics"],
      cta: "Get Started",
      featured: false,
    },
    {
      name: "Pro Bot",
      badge: "Most Popular",
      price: "$3,500",
      note: "CRM integration, Multilingual",
      features: ["Advanced NL pipelines", "Omnichannel messaging", "Multi‑language support", "Priority support"],
      cta: "Get Started",
      featured: true,
    },
    {
      name: "Enterprise Assistant",
      price: "from $10,000",
      note: "Custom solutions, scaling",
      features: ["Custom models", "Security reviews", "SLA & SSO", "Dedicated PM"],
      cta: "Get Started",
      featured: false,
    },
  ];
  return (
    <section id="packages" className="py-14 lg:py-20 bg-gradient-to-b from-white to-neutral-50/60">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionTitle title="Prepared Packages" subtitle="Choose the perfect automation package for your business needs." />
        <div className="mt-10 grid gap-6 md:grid-cols-3">
          {tiers.map((t, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 16 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className={`relative rounded-3xl border p-6 shadow-sm bg-white ${
                t.featured ? "border-neutral-900 shadow-xl scale-[1.01]" : "border-neutral-200"
              }`}
            >
              {t.badge && (
                <span className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-neutral-900 px-3 py-1 text-xs text-white shadow">{t.badge}</span>
              )}
              <h3 className="text-lg font-semibold">{t.name}</h3>
              <div className="mt-2 text-3xl font-bold">{t.price}</div>
              <p className="mt-1 text-sm text-neutral-600">{t.note}</p>
              <ul className="mt-5 space-y-2 text-sm">
                {t.features.map((f, idx) => (
                  <li key={idx} className="flex items-start gap-2"><Check className="h-4 w-4 mt-0.5 text-emerald-600" /> {f}</li>
                ))}
              </ul>
              <a href="#contact" className={`mt-6 inline-flex w-full items-center justify-center gap-2 rounded-xl px-5 py-3 font-medium transition ${
                t.featured ? "bg-neutral-900 text-white hover:opacity-90" : "border border-neutral-300 hover:bg-neutral-50"
              }`}>
                {t.cta} <ArrowRight className="h-4 w-4" />
              </a>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Portfolio() {
  return (
    <section id="portfolio" className="py-14 lg:py-20">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionTitle title="Our Portfolio" subtitle="Discover recent AI & automation projects that transformed businesses." />
        <div className="mt-8 overflow-hidden rounded-3xl border border-neutral-200 bg-white shadow">
          <div className="relative aspect-[16/6]">
            <img src="https://images.unsplash.com/photo-1531297484001-80022131f5a1?q=80&w=2400&auto=format&fit=crop" alt="Portfolio banner" className="h-full w-full object-cover" />
            <div className="absolute inset-0 bg-gradient-to-r from-neutral-900/50 via-transparent to-neutral-900/20" />
            <div className="absolute left-6 bottom-6 text-white">
              <div className="text-sm opacity-90">E‑commerce Chatbot Integration</div>
              <div className="text-xs opacity-75">Automated customer support • A/B uplift +18%</div>
              <a href="#" className="mt-3 inline-flex items-center gap-2 rounded-full bg-white/90 text-neutral-900 backdrop-blur px-4 py-2 text-xs font-semibold hover:bg-white">View all Projects</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function About() {
  const stats = [
    { value: "500+", label: "Projects Completed" },
    { value: "98.5%", label: "Client Satisfaction" },
    { value: "24/7", label: "Support Available" },
  ];
  return (
    <section id="about" className="py-14 lg:py-20 bg-white">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionTitle title="About Us" />
        <div className="mt-6 max-w-3xl mx-auto text-neutral-600 text-base leading-relaxed text-center">
          AutoFlow is a provider of AI and automation solutions, dedicated to transforming how modern businesses operate. We bring 10+ years of experience in retail, e‑commerce, and services automation, helping companies increase efficiency and unlock growth.
        </div>
        <div className="mt-10 grid grid-cols-3 max-w-2xl mx-auto gap-4">
          {stats.map((s, i) => (
            <div key={i} className="rounded-2xl border border-neutral-200 bg-neutral-50 p-5 text-center">
              <div className="text-2xl font-semibold text-neutral-900">{s.value}</div>
              <div className="text-xs text-neutral-500">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [form, setForm] = useState({ firstName: "", lastName: "", email: "", company: "", subject: "", message: "" });
  const to = "volsobko@gmail.com";

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();

    // If EmailJS configured, try it first
    // if (EMAILJS_SERVICE_ID && EMAILJS_TEMPLATE_ID && EMAILJS_PUBLIC_KEY && (window as any).emailjs) {
    //   const emailjs = (window as any).emailjs;
    //   emailjs.init(EMAILJS_PUBLIC_KEY);
    //   await emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, {
    //     to_email: to,
    //     from_name: `${form.firstName} ${form.lastName}`.trim() || "Website Visitor",
    //     reply_to: form.email,
    //     company: form.company,
    //     subject: form.subject || "Website Inquiry",
    //     message: form.message,
    //   });
    //   alert("Message sent! We'll get back to you shortly.");
    //   setForm({ firstName: "", lastName: "", email: "", company: "", subject: "", message: "" });
    //   return;
    // }

    // Fallback: open mail client
    const subject = encodeURIComponent(form.subject || "Website Inquiry");
    const body = encodeURIComponent(
      `Name: ${form.firstName} ${form.lastName}
Email: ${form.email}
Company: ${form.company}

${form.message}`
    );
    window.location.href = `mailto:${to}?subject=${subject}&body=${body}`;
  }

  return (
    <section id="contact" className="py-14 lg:py-20">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionTitle title="Contact Us" subtitle="Ready to transform your business with AI & automation? Get in touch with our specialists." />
        <div className="mt-10 grid lg:grid-cols-2 gap-8">
          <form onSubmit={onSubmit} className="rounded-3xl border border-neutral-200 bg-white p-6 shadow-sm">
            <div className="grid sm:grid-cols-2 gap-3">
              <input required value={form.firstName} onChange={(e)=>setForm({...form, firstName:e.target.value})} className="h-11 rounded-xl border border-neutral-300 bg-white px-4 outline-none placeholder:text-neutral-400 focus:border-neutral-900" placeholder="First name" />
              <input value={form.lastName} onChange={(e)=>setForm({...form, lastName:e.target.value})} className="h-11 rounded-xl border border-neutral-300 bg-white px-4 outline-none placeholder:text-neutral-400 focus:border-neutral-900" placeholder="Last name" />
            </div>
            <div className="mt-3 grid sm:grid-cols-2 gap-3">
              <input required type="email" value={form.email} onChange={(e)=>setForm({...form, email:e.target.value})} className="h-11 rounded-xl border border-neutral-300 bg-white px-4 outline-none placeholder:text-neutral-400 focus:border-neutral-900" placeholder="Email" />
              <input value={form.company} onChange={(e)=>setForm({...form, company:e.target.value})} className="h-11 rounded-xl border border-neutral-300 bg-white px-4 outline-none placeholder:text-neutral-400 focus:border-neutral-900" placeholder="Company" />
            </div>
            <input className="mt-3 h-11 w-full rounded-xl border border-neutral-300 bg-white px-4 outline-none placeholder:text-neutral-400 focus:border-neutral-900" placeholder="Subject" value={form.subject} onChange={(e)=>setForm({...form, subject:e.target.value})} />
            <textarea className="mt-3 min-h-[120px] w-full rounded-xl border border-neutral-300 bg-white px-4 py-3 outline-none placeholder:text-neutral-400 focus:border-neutral-900" placeholder="Message" value={form.message} onChange={(e)=>setForm({...form, message:e.target.value})} />
            <button className="mt-4 inline-flex items-center justify-center gap-2 rounded-xl bg-neutral-900 px-5 py-3 font-medium text-white hover:opacity-90">
              <Mail className="h-4 w-4" /> Send Message
            </button>
          </form>

          <div className="rounded-3xl border border-neutral-200 bg-white p-6 shadow-sm">
            <h4 className="text-lg font-semibold">Get in touch</h4>
            <p className="mt-2 text-sm text-neutral-600">We'd love to discuss your automation needs and how we can help.</p>
            <div className="mt-5 space-y-3 text-sm">
              <div className="flex items-center gap-3"><Mail className="h-4 w-4 text-neutral-500" /> <a className="hover:underline" href="mailto:volsobko@gmail.com">volsobko@gmail.com</a></div>
              <div className="flex items-center gap-3"><Phone className="h-4 w-4 text-neutral-500" /> +1 (000) 000‑0000</div>
              <div className="flex items-center gap-3"><MapPin className="h-4 w-4 text-neutral-500" /> 123 Innovation Drive, Tech City, TX</div>
            </div>
            <div className="mt-6 rounded-2xl bg-neutral-50 border border-neutral-200 p-4">
              <div className="flex items-center gap-2 text-neutral-900 font-medium"><Crown className="h-4 w-4" /> Ready to get started?</div>
              <p className="mt-1 text-sm text-neutral-600">Schedule a consultation to discuss your automation needs and how we can help.</p>
              <a href="#contact" className="mt-3 inline-flex items-center gap-2 rounded-xl border border-neutral-300 px-4 py-2 text-sm hover:bg-neutral-50">Schedule Consultation</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="border-t border-neutral-200 bg-white">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12 grid md:grid-cols-4 gap-10 text-sm">
        <div>
          <div className="flex items-center gap-3">
            <div className="h-8 w-8 rounded-xl bg-gradient-to-br from-violet-500 to-fuchsia-500 grid place-items-center text-white font-semibold">A</div>
            <span className="font-semibold">AutoFlow</span>
          </div>
          <p className="mt-3 text-neutral-600">Leading provider of AI and automation solutions, helping companies scale operations and boost productivity through intelligent technology.</p>
        </div>
        <div>
          <h5 className="font-semibold">Quick Links</h5>
          <ul className="mt-3 space-y-2 text-neutral-600">
            <li><a className="hover:text-neutral-900" href="#services">Services</a></li>
            <li><a className="hover:text-neutral-900" href="#packages">Packages</a></li>
            <li><a className="hover:text-neutral-900" href="#portfolio">Portfolio</a></li>
            <li><a className="hover:text-neutral-900" href="#about">About</a></li>
            <li><a className="hover:text-neutral-900" href="#contact">Contact</a></li>
          </ul>
        </div>
        <div>
          <h5 className="font-semibold">Services</h5>
          <ul className="mt-3 space-y-2 text-neutral-600">
            <li>AI Chatbots</li>
            <li>Document‑AI</li>
            <li>Predictive Analytics</li>
            <li>Process Automation</li>
          </ul>
        </div>
        <div>
          <h5 className="font-semibold">Legal</h5>
          <ul className="mt-3 space-y-2 text-neutral-600">
            <li><a className="hover:text-neutral-900" href="#">Privacy Policy</a></li>
            <li><a className="hover:text-neutral-900" href="#">Terms of Service</a></li>
          </ul>
        </div>
      </div>
      <div className="border-t border-neutral-200">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between text-xs text-neutral-500">
          <span>© {new Date().getFullYear()} AutoFlow. All rights reserved.</span>
          <span className="inline-flex items-center gap-2"><Sparkles className="h-3.5 w-3.5" /> Built with love & precision.</span>
        </div>
      </div>
    </footer>
  );
}