import React from "react";
import { motion } from "framer-motion";
import { Check, Shield, Sparkles, Zap, ArrowRight, Mail, HelpCircle, Star } from "lucide-react";

const container = {
  hidden: { opacity: 0 },
  show: { opacity: 1, transition: { staggerChildren: 0.06 } },
};

const item = {
  hidden: { opacity: 0, y: 10 },
  show: { opacity: 1, y: 0 },
};

const features = [
  {
    icon: <Zap className="h-6 w-6" aria-hidden/>,
    title: "Instant Invitations",
    desc: "Invite teammates by email and get them productive within minutes.",
  },
  {
    icon: <Shield className="h-6 w-6" aria-hidden/>,
    title: "Admin Controls",
    desc: "Centralized billing, access revocation, and audit-friendly usage logs.",
  },
  {
    icon: <Sparkles className="h-6 w-6" aria-hidden/>,
    title: "Premium Models",
    desc: "High-accuracy reasoning and priority throughput for critical work.",
  },
];

const testimonials = [
  {
    name: "Maya R.",
    role: "Founder, Finch Labs",
    quote:
      "We onboarded 14 people in one afternoon. The $2/email pricing is a no-brainer for pilots.",
  },
  {
    name: "Elliot S.",
    role: "Head of Ops, Northbeam",
    quote:
      "Turned messy SOPs into repeatable prompts. Saved ~7 hours/week/team.",
  },
  {
    name: "Jasmine O.",
    role: "Product Manager, Radian",
    quote:
      "Stakeholders finally get fast, consistent answers. Setup was painless.",
  },
];

const faqs = [
  {
    q: "What exactly am I paying for?",
    a: "Access to your organization’s private AI assistant workspace with admin oversight, billed per invited email per month.",
  },
  {
    q: "Do you store my data?",
    a: "Your workspace content is encrypted in transit and at rest. You control data retention settings.",
  },
  {
    q: "Is there a warranty?",
    a: "Yes! Every subscription includes a full 25‑day satisfaction warranty. If it’s not for you, you get your money back.",
  }
];

function LogoMark() {
  return (
    <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" aria-label="Logo" className="h-10 w-10">
      <rect rx="14" ry="14" width="64" height="64" className="fill-emerald-500" />
      <g className="fill-white">
        <path d="M32 14a10 10 0 0 0-10 10v6l-4-4a10 10 0 1 0 0 14l4-4v6a10 10 0 1 0 14 0v-6l4 4a10 10 0 1 0 0-14l-4 4v-6A10 10 0 0 0 32 14z" />
      </g>
    </svg>
  );
}

function Badge({ children }) {
  return (
    <span className="inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium shadow-sm">
      <Star className="h-3.5 w-3.5" aria-hidden />
      {children}
    </span>
  );
}

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-neutral-50 text-neutral-900 antialiased dark:bg-neutral-950 dark:text-neutral-50">
      <header className="sticky top-0 z-30 w-full border-b bg-white/70 backdrop-blur dark:border-neutral-800 dark:bg-neutral-950/70">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
          <div className="flex items-center gap-2">
            <LogoMark />
            <span className="text-lg font-semibold tracking-tight">InviteGPT Business</span>
          </div>
          <nav className="hidden items-center gap-6 md:flex">
            <a href="#features" className="text-sm opacity-80 hover:opacity-100">Features</a>
            <a href="#pricing" className="text-sm opacity-80 hover:opacity-100">Pricing</a>
            <a href="#testimonials" className="text-sm opacity-80 hover:opacity-100">Testimonials</a>
            <a href="#faq" className="text-sm opacity-80 hover:opacity-100">FAQ</a>
          </nav>
          <a href="#cta" className="group inline-flex items-center gap-2 rounded-2xl bg-neutral-900 px-4 py-2 text-sm font-medium text-white shadow-lg hover:shadow-xl dark:bg-white dark:text-neutral-900">
            Get Started <ArrowRight className="h-4 w-4 transition group-hover:translate-x-0.5" />
          </a>
        </div>
      </header>

      <section className="relative overflow-hidden">
        <div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(60%_50%_at_50%_10%,rgba(16,185,129,0.15),transparent_60%)]" />
        <div className="mx-auto grid max-w-6xl grid-cols-1 items-center gap-10 px-6 pb-20 pt-16 md:grid-cols-2">
          <motion.div variants={container} initial="hidden" animate="show" className="space-y-6">
            <motion.div variants={item} className="flex items-center gap-3">
              <Badge>Early access pricing</Badge>
              <span className="text-xs opacity-70">$2/email invitation/month</span>
            </motion.div>
            <motion.h1 variants={item} className="text-5xl font-extrabold leading-tight tracking-tight md:text-6xl">
              Spin up your team’s AI workspace in minutes
            </motion.h1>
            <motion.p variants={item} className="max-w-prose text-lg opacity-80">
              Give everyone a premium AI assistant with centralized controls and simple per‑email billing. Start small, scale safely.
            </motion.p>
            <motion.div variants={item} className="flex flex-wrap items-center gap-3" id="cta">
              <a href="#pricing" className="inline-flex items-center gap-2 rounded-2xl bg-emerald-500 px-5 py-3 font-semibold text-white shadow-lg hover:shadow-xl">
                Invite by Email <Mail className="h-4 w-4" />
              </a>
              <a href="#features" className="inline-flex items-center gap-2 rounded-2xl border px-5 py-3 font-semibold shadow-sm">
                Explore Features
              </a>
            </motion.div>
            <motion.div variants={item} className="flex items-center gap-4 pt-4 text-sm opacity-70">
              <div className="flex items-center gap-2"><Shield className="h-4 w-4"/>SAML/SSO ready</div>
              <div className="flex items-center gap-2"><Sparkles className="h-4 w-4"/>Priority inference</div>
              <div className="flex items-center gap-2"><Zap className="h-4 w-4"/>99.9% uptime</div>
            </motion.div>
          </motion.div>

          <div className="relative">
            <div className="absolute inset-0 -z-10 rounded-3xl bg-gradient-to-tr from-emerald-200 to-transparent blur-2xl dark:from-emerald-900/30" />
            <div className="rounded-3xl border bg-white p-6 shadow-2xl dark:border-neutral-800 dark:bg-neutral-900">
              <div className="rounded-xl border bg-neutral-50 p-4 dark:border-neutral-800 dark:bg-neutral-950">
                <div className="flex items-center gap-3">
                  <LogoMark />
                  <div>
                    <p className="text-sm font-semibold">Invite Center</p>
                    <p className="text-xs opacity-70">Add teammates & manage seats</p>
                  </div>
                </div>
                <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
                  {["maya@company.com", "eli@company.com", "jasmine@company.com", "alex@company.com"].map((email) => (
                    <div key={email} className="flex items-center justify-between rounded-lg border p-3 text-sm dark:border-neutral-800">
                      <span>{email}</span>
                      <button className="rounded-lg bg-neutral-900 px-3 py-1 text-white dark:bg-white dark:text-neutral-900">Invite</button>
                    </div>
                  ))}
                </div>
                <div className="mt-4 flex items-center justify-between rounded-lg bg-emerald-50 p-3 text-sm dark:bg-emerald-900/30">
                  <span>Billing preview</span>
                  <span className="font-semibold">4 seats × $2 = $8/month</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="border-y bg-white py-6 dark:border-neutral-800 dark:bg-neutral-950">
        <div className="mx-auto max-w-6xl px-6 text-center text-sm opacity-70">
          Trusted by product, ops, and data teams at fast‑moving startups.
        </div>
      </section>

      <section id="features" className="mx-auto max-w-6xl px-6 py-20">
        <div className="grid grid-cols-1 items-start gap-10 md:grid-cols-3">
          <div className="md:col-span-1">
            <h2 className="text-3xl font-bold tracking-tight">Everything you need to pilot AI at work</h2>
            <p className="mt-3 text-base opacity-80">
              Start with a handful of seats, prove the value, then scale with admin controls and predictable pricing.
            </p>
          </div>
          <motion.ul variants={container} initial="hidden" whileInView="show" viewport={{ once: true }} className="md:col-span-2 grid grid-cols-1 gap-6 sm:grid-cols-2">
            {features.map((f) => (
              <motion.li key={f.title} variants={item} className="rounded-2xl border p-6 shadow-sm dark:border-neutral-800">
                <div className="flex items-center gap-3">
                  <div className="rounded-xl bg-neutral-100 p-2 dark:bg-neutral-800">{f.icon}</div>
                  <h3 className="text-lg font-semibold">{f.title}</h3>
                </div>
                <p className="mt-3 text-sm opacity-80">{f.desc}</p>
                <ul className="mt-4 space-y-2 text-sm">
                  {["Seat-level permissions", "Exportable usage reports", "Shared prompt library"].map((b) => (
                    <li key={b} className="flex items-center gap-2 opacity-80"><Check className="h-4 w-4"/> {b}</li>
                  ))}
                </ul>
              </motion.li>
            ))}
          </motion.ul>
        </div>
      </section>

      <section id="pricing" className="bg-neutral-25/40 py-20 dark:bg-neutral-950">
        <div className="mx-auto max-w-6xl px-6">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="text-4xl font-bold tracking-tight">Simple pricing</h2>
            <p className="mt-2 opacity-80">Pay only for the invitations you send. Perfect for pilots and small teams.</p>
          </div>

          <div className="mx-auto mt-10 grid max-w-4xl grid-cols-1 gap-6 md:grid-cols-2">
            <div className="relative rounded-3xl border bg-white p-8 shadow-xl dark:border-neutral-800 dark:bg-neutral-900">
              <Badge>Launch Special</Badge>
              <h3 className="mt-4 text-2xl font-bold">Business Plan</h3>
              <p className="mt-2 text-sm opacity-80">Everything you need to roll out an AI assistant responsibly.</p>
              <div className="mt-6 flex items-end gap-2">
                <span className="text-5xl font-extrabold tracking-tight">$2</span>
                <span className="pb-2 text-sm opacity-70">/ email invitation / month</span>
              </div>
              <ul className="mt-6 space-y-2 text-sm">
                {[
                  "Unlimited projects & chat history",
                  "Admin dashboard & usage logs",
                  "Priority compute & model access",
                  "Email-based SSO provisioning",
                  "25‑day full warranty satisfaction guarantee",
                ].map((line) => (
                  <li key={line} className="flex items-center gap-2"><Check className="h-4 w-4"/> {line}</li>
                ))}
              </ul>
              <a href="#cta" className="mt-8 inline-flex items-center gap-2 rounded-2xl bg-neutral-900 px-5 py-3 font-semibold text-white shadow-lg hover:shadow-xl dark:bg-white dark:text-neutral-900">
                Start Inviting <ArrowRight className="h-4 w-4"/>
              </a>
            </div>

            <div className="rounded-3xl border bg-white p-8 shadow-md dark:border-neutral-800 dark:bg-neutral-900">
              <h3 className="text-2xl font-bold">Volume & Security</h3>
              <p className="mt-2 text-sm opacity-80">For 50+ seats, dedicated support, or SOC 2 reports, talk to us.</p>
              <ul className="mt-6 space-y-2 text-sm">
                {[
                  "Bulk CSV invites",
                  "Custom retention windows",
                  "SAML/SCIM provisioning",
                  "Dedicated onboarding help",
                ].map((line) => (
                  <li key={line} className="flex items-center gap-2"><Check className="h-4 w-4"/> {line}</li>
                ))}
              </ul>
              <a href="#contact" className="mt-8 inline-flex items-center gap-2 rounded-2xl border px-5 py-3 font-semibold shadow-sm">
                Contact Sales
              </a>
            </div>
          </div>
        </div>
      </section>

      <section id="testimonials" className="mx-auto max-w-6xl px-6 py-20">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-4xl font-bold tracking-tight">Loved by early teams</h2>
          <p className="mt-2 opacity-80">Here’s what pilot customers are saying.</p>
        </div>
        <motion.div variants={container} initial="hidden" whileInView="show" viewport={{ once: true }} className="mt-10 grid grid-cols-1 gap-6 md:grid-cols-3">
          {testimonials.map((t) => (
            <motion.figure key={t.name} variants={item} className="rounded-2xl border bg-white p-6 shadow-md dark:border-neutral-800 dark:bg-neutral-900">
              <blockquote className="text-sm leading-relaxed">“{t.quote}”</blockquote>
              <figcaption className="mt-4 flex items-center gap-3 text-sm">
                <div className="grid h-9 w-9 place-items-center rounded-full bg-emerald-500 font-semibold text-white">{t.name.split(" ")[0][0]}</div>
                <div>
                  <div className="font-medium">{t.name}</div>
                  <div className="opacity-70">{t.role}</div>
                </div>
              </figcaption>
            </motion.figure>
          ))}
        </motion.div>
        <p className="mt-6 text-center text-xs opacity-60">Testimonials are examples from pilot users; individual results will vary.</p>
      </section>

      <section id="faq" className="bg-neutral-25/40 py-20 dark:bg-neutral-950">
        <div className="mx-auto max-w-6xl px-6">
          <div className="mx-auto max-w-2xl text-center">