import React from "react";
import { motion } from "framer-motion";
import { ArrowRight, Leaf, HeartHandshake, Users2, Sparkles, Microscope, BookOpen, ShieldCheck, Building2, Trees, Coins, Star, Globe2, MapPin, Mail, Phone, ChevronRight, PlayCircle, BadgeCheck } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Progress } from "@/components/ui/progress";
import { toast } from "sonner";
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from "recharts";

/**
 * Pangea One — Single‑file React landing experience
 * TailwindCSS + shadcn/ui + lucide-react + framer-motion + recharts
 *
 * Notes for deployment:
 * - Replace placeholder links (e.g., #, example@pangea.one) with live endpoints.
 * - Wire up the contact form to your backend/email service.
 * - Swap the stock imagery with your portfolio renders of New Pangea.
 * - Optional: split sections into components and add routing.
 */

const proceedsData = [
  { name: "Land & Habitat", value: 32 },
  { name: "Learning Arts Campus", value: 24 },
  { name: "Renewables & Water", value: 18 },
  { name: "Housing & Makerspaces", value: 16 },
  { name: "Community Fund", value: 10 },
];

const COLORS = ["#0ea5e9", "#22c55e", "#a78bfa", "#f59e0b", "#ef4444"];

const Pillar = ({ icon: Icon, title, children }: any) => (
  <Card className="h-full border-0 shadow-xl bg-white/70 backdrop-blur-md">
    <CardHeader>
      <div className="flex items-center gap-3">
        <span className="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-black/5">
          <Icon className="h-5 w-5" />
        </span>
        <CardTitle className="text-lg">{title}</CardTitle>
      </div>
    </CardHeader>
    <CardContent className="text-sm leading-relaxed text-black/70">
      {children}
    </CardContent>
  </Card>
);

const Stat = ({ label, value }: { label: string; value: string }) => (
  <div className="text-center">
    <div className="text-3xl font-semibold tracking-tight">{value}</div>
    <div className="text-xs uppercase tracking-wider text-black/60 mt-1">{label}</div>
  </div>
);

const Section = ({ id, eyebrow, title, kicker, children }: any) => (
  <section id={id} className="py-20 md:py-28">
    <div className="mx-auto max-w-7xl px-6">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5 }}
        className="mb-10 md:mb-14"
      >
        {eyebrow && (
          <div className="mb-3">
            <Badge variant="secondary" className="rounded-full px-3 py-1">
              {eyebrow}
            </Badge>
          </div>
        )}
        <h2 className="text-3xl md:text-5xl font-semibold tracking-tight leading-tight">
          {title}
        </h2>
        {kicker && (
          <p className="mt-4 max-w-3xl text-black/70 leading-relaxed">{kicker}</p>
        )}
      </motion.div>
      {children}
    </div>
  </section>
);

export default function PangeaOneLanding() {
  const handleSubscribe = (e: React.FormEvent) => {
    e.preventDefault();
    toast.success("You're on the Pangea One list — welcome home.");
  };

  const handleContact = (e: React.FormEvent) => {
    e.preventDefault();
    toast.success("Message sent. We'll be in touch soon.");
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-sky-50 via-emerald-50 to-violet-50 text-black">
      {/* NAV */}
      <header className="sticky top-0 z-50 backdrop-blur supports-[backdrop-filter]:bg-white/60 bg-white/40 border-b">
        <div className="mx-auto max-w-7xl px-6 h-16 flex items-center justify-between">
          <a href="#home" className="flex items-center gap-2">
            <svg width="28" height="28" viewBox="0 0 32 32" fill="none" aria-hidden>
              <circle cx="16" cy="16" r="14" className="fill-emerald-500/20" />
              <path d="M16 4v24M4 16h24" className="stroke-emerald-600" strokeWidth="2" />
            </svg>
            <span className="font-semibold">Pangea One</span>
          </a>
          <nav className="hidden md:flex items-center gap-6 text-sm">
            {[
              ["Vision", "vision"],
              ["Pillars", "pillars"],
              ["Habitat", "habitat"],
              ["Learning", "learning"],
              ["Governance", "governance"],
              ["Invest", "invest"],
              ["Visit & Live", "residency"],
              ["FAQ", "faq"],
              ["Contact", "contact"],
            ].map(([label, id]) => (
              <a
                key={id}
                href={`#${id}`}
                className="hover:text-emerald-700 transition-colors"
              >
                {label}
              </a>
            ))}
          </nav>
          <div className="flex items-center gap-3">
            <Button asChild className="rounded-full">
              <a href="#invest">Invest</a>
            </Button>
          </div>
        </div>
      </header>

      {/* HERO */}
      <section id="home" className="relative overflow-hidden">
        <div className="absolute inset-0">
          <img
            src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1600&auto=format&fit=crop"
            alt="Pangea One landscape"
            className="h-full w-full object-cover opacity-70"
          />
        </div>
        <div className="relative">
          <div className="mx-auto max-w-7xl px-6 pt-28 pb-20 md:pt-36 md:pb-36">
            <motion.div
              initial={{ opacity: 0, y: 16 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="max-w-3xl"
            >
              <Badge className="mb-4 rounded-full bg-black/80 text-white">Elemental Rule: Do No Harm</Badge>
              <h1 className="text-4xl md:text-6xl font-semibold leading-[1.05] tracking-tight">
                A living laboratory for creation, learning, and belonging.
              </h1>
              <p className="mt-5 text-lg md:text-xl text-black/80 max-w-2xl">
                Pangea One is an inclusive impact community where arts, science, and stewardship
                thrive together. We blend regenerative habitats, whole‑brain learning, and
                radical hospitality to build a place worthy of being called home.
              </p>
              <div className="mt-8 flex flex-wrap items-center gap-3">
                <Button size="lg" className="rounded-full" asChild>
                  <a href="#invest" className="inline-flex items-center gap-2">
                    Explore Investment <ArrowRight className="h-4 w-4" />
                  </a>
                </Button>
                <Button size="lg" variant="secondary" className="rounded-full" asChild>
                  <a href="#visit">Visit Pangea One</a>
                </Button>
                <div className="flex items-center gap-2 text-sm">
                  <Badge variant="outline" className="rounded-full">Inclusive by design</Badge>
                  <Badge variant="outline" className="rounded-full">Science‑aligned</Badge>
                  <Badge variant="outline" className="rounded-full">Artist‑led</Badge>
                </div>
              </div>
              <div className="mt-10 grid grid-cols-2 sm:grid-cols-4 gap-6 max-w-2xl">
                <Stat label="Acres under care" value="∞" />
                <Stat label="Wildlife protections" value="100%" />
                <Stat label="Learning studios" value="12+" />
                <Stat label="Resident artists" value="Growing" />
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* VISION */}
      <Section
        id="vision"
        eyebrow="Why Pangea One"
        title="Creation, science, knowledge — in service of community and the wild."
        kicker="Pangea One re‑centers human life within an ethic of care. We protect habitats, cultivate beauty, and prioritize evidence‑based practice. Our culture is shaped by performance, play, and learning that activates the whole brain."
      >
        <div className="grid md:grid-cols-3 gap-6">
          <Card className="border-0 shadow-lg">
            <CardContent className="p-6">
              <div className="flex items-center gap-3 mb-3"><Sparkles className="h-5 w-5" /><h3 className="font-semibold">Radical Hospitality</h3></div>
              <p className="text-sm text-black/70">Not mere tolerance, but joyful acceptance. We create structures where all people—trans and cis, queer and straight, Black, Indigenous, and people of color—can flourish.</p>
            </CardContent>
          </Card>
          <Card className="border-0 shadow-lg">
            <CardContent className="p-6">
              <div className="flex items-center gap-3 mb-3"><Microscope className="h-5 w-5" /><h3 className="font-semibold">Science‑Aligned Practice</h3></div>
              <p className="text-sm text-black/70">From regenerative agriculture to neuroscience‑informed pedagogy, we pursue what works—and we publish what we learn.</p>
            </CardContent>
          </Card>
          <Card className="border-0 shadow-lg">
            <CardContent className="p-6">
              <div className="flex items-center gap-3 mb-3"><BookOpen className="h-5 w-5" /><h3 className="font-semibold">A Campus for Life</h3></div>
              <p className="text-sm text-black/70">Studios, stages, labs, and trails—an ecosystem of making and meaning where education is embodied and assessment is performance.</p>
            </CardContent>
          </Card>
        </div>
      </Section>

      {/* PILLARS */}
      <Section id="pillars" eyebrow="Foundational Ethos" title="The Pangea One Pillars">
        <div className="grid md:grid-cols-3 gap-6">
          <Pillar icon={ShieldCheck} title="Elemental Rule: Do No Harm">
            Our prime directive. Decisions honor safety, dignity, and long‑term flourishing—for people, animals, and land.
          </Pillar>
          <Pillar icon={Sparkles} title="Creation">
            We celebrate invention and artistry. Making is our civic practice, from theatre premieres to open‑source tools.
          </Pillar>
          <Pillar icon={BookOpen} title="Knowledge">
            We collect, test, and share knowledge. Our library, oral histories, and research lab keep learning communal.
          </Pillar>
          <Pillar icon={Microscope} title="Science">
            We embrace evidence. From water systems to pedagogy, we iterate with transparency and peer review.
          </Pillar>
          <Pillar icon={Leaf} title="Stewardship of the Wild">
            The land welcomed us first. No killing for sport. Agriculture minimizes suffering and maximizes ecosystem health.
          </Pillar>
          <Pillar icon={HeartHandshake} title="Radical Acceptance">
            Beyond tolerance. We practice active welcome and design for access across bodies, identities, and needs.
          </Pillar>
        </div>
      </Section>

      {/* HABITAT */}
      <Section
        id="habitat"
        eyebrow="Habitat & Regeneration"
        title="A living sanctuary for the more‑than‑human world"
        kicker="We manage land as a mosaic of habitats—wild corridors, food forests, native gardens, and low‑impact dwellings—guided by biologists and local knowledge."
      >
        <div className="grid lg:grid-cols-2 gap-8 items-center">
          <div className="space-y-4">
            <div className="flex items-start gap-3"><Trees className="mt-1 h-5 w-5" /><p className="text-black/70">No sport hunting. Ethical husbandry only when necessary for human thriving, always minimizing suffering.</p></div>
            <div className="flex items-start gap-3"><Globe2 className="mt-1 h-5 w-5" /><p className="text-black/70">Wildlife corridors and water harvesting integrate with trails, amphitheaters, and outdoor classrooms.</p></div>
            <div className="flex items-start gap-3"><Building2 className="mt-1 h-5 w-5" /><p className="text-black/70">Human structures prioritize renewable power, passive cooling, and locally appropriate materials.</p></div>
            <div className="flex items-start gap-3"><BadgeCheck className="mt-1 h-5 w-5" /><p className="text-black/70">Transparent ecological metrics published in a public dashboard.</p></div>
          </div>
          <div className="rounded-3xl overflow-hidden shadow-2xl border">
            <img src="https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?q=80&w=1600&auto=format&fit=crop" alt="Habitat" />
          </div>
        </div>
      </Section>

      {/* LEARNING */}
      <Section
        id="learning"
        eyebrow="Learning by Performance"
        title="The Learning Arts Campus"
        kicker="Whole‑brain, studio‑driven education where theatre, dance, music, making, math, and science meet. Assessment becomes performance; curiosity becomes mastery."
      >
        <div className="grid lg:grid-cols-3 gap-6">
          <Card className="border-0 shadow-xl">
            <CardHeader>
              <CardTitle>Studios & Stages</CardTitle>
            </CardHeader>
            <CardContent className="text-sm text-black/70">
              Black box theatres, outdoor amphitheaters, makerspaces, and science labs designed for embodied inquiry and public sharing.
            </CardContent>
          </Card>
          <Card className="border-0 shadow-xl">
            <CardHeader>
              <CardTitle>Educator Residency</CardTitle>
            </CardHeader>
            <CardContent className="text-sm text-black/70">
              Teachers co‑design courses that culminate in showcases—history as devised theatre, physics as kinetic sculpture, biology as immersive exhibit.
            </CardContent>
          </Card>
          <Card className="border-0 shadow-xl">
            <CardHeader>
              <CardTitle>Trans‑affirming Pedagogy</CardTitle>
            </CardHeader>
            <CardContent className="text-sm text-black/70">
              Radical welcome and evidence‑based care underpin every classroom. Voice, body, and identity are honored as sites of knowledge.
            </CardContent>
          </Card>
        </div>
      </Section>

      {/* GOVERNANCE */}
      <Section id="governance" eyebrow="Trust & Transparency" title="Governance in plain language" kicker="Clear laws, open books, and community co‑design.">
        <div className="grid md:grid-cols-2 gap-8 items-start">
          <div className="space-y-6">
            <Pillar icon={ShieldCheck} title="Charter Highlights">
              <ul className="list-disc pl-5 space-y-2 text-black/70">
                <li>Elemental Rule: Do No Harm guides all decisions.</li>
                <li>Open research: publish ecological and educational data.</li>
                <li>Rights of nature respected alongside human rights.</li>
                <li>Conflict resolution favors restoration over punishment.</li>
              </ul>
            </Pillar>
            <Pillar icon={Users2} title="Community Forums">
              Monthly assemblies, rotating stewardship councils, and artist juries keep governance nimble, inclusive, and accountable.
            </Pillar>
          </div>
          <div className="rounded-3xl overflow-hidden shadow-2xl border">
            <img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?q=80&w=1600&auto=format&fit=crop" alt="Community" />
          </div>
        </div>
      </Section>

      {/* INVEST */}
      <Section id="invest" eyebrow="Impact Investment" title="Invest in a place that invests in people and the planet" kicker="Multiple vehicles ensure alignment between mission and returns. All offerings comply with applicable laws and are shared transparently with prospective investors.">
        <div className="grid lg:grid-cols-2 gap-8">
          <Card className="border-0 shadow-xl">
            <CardHeader>
              <CardTitle>Illustrative Use of Proceeds</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="h-64">
                <ResponsiveContainer width="100%" height="100%">
                  <PieChart>
                    <Pie data={proceedsData} dataKey="value" nameKey="name" outerRadius={95} label>
                      {proceedsData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                      ))}
                    </Pie>
                    <Tooltip />
                  </PieChart>
                </ResponsiveContainer>
              </div>
              <ul className="mt-4 grid sm:grid-cols-2 gap-2 text-sm text-black/70">
                {proceedsData.map((d) => (
                  <li key={d.name} className="flex items-center gap-2"><ChevronRight className="h-4 w-4" /> {d.name}</li>
                ))}
              </ul>
            </CardContent>
          </Card>

          <Tabs defaultValue="notes" className="w-full">
            <TabsList className="grid grid-cols-2">
              <TabsTrigger value="notes">Community Notes</TabsTrigger>
              <TabsTrigger value="equity">Mission‑Aligned Equity</TabsTrigger>
            </TabsList>
            <TabsContent value="notes">
              <Card className="border-0 shadow-xl">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2"><Coins className="h-5 w-5" /> Community Notes (Illustrative)</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3 text-sm text-black/70">
                  <p>Fixed‑rate notes with community benefits (e.g., residency credits, studio time), transparent reporting, and clear maturities.</p>
                  <div>
                    <div className="mb-2 flex items-center justify-between"><span>Target Raise</span><span className="font-medium">$1.2M</span></div>
                    <Progress value={62} />
                    <div className="mt-2 text-xs">62% expressed interest (soft‑circled)</div>
                  </div>
                  <div className="grid sm:grid-cols-3 gap-3 text-xs">
                    <div className="p-3 rounded-xl bg-white/60 border">8% illustrative APR</div>
                    <div className="p-3 rounded-xl bg-white/60 border">360‑day basis</div>
                    <div className="p-3 rounded-xl bg-white/60 border">Tiered terms</div>
                  </div>
                  <Button className="rounded-full" asChild>
                    <a href="#contact">Request Offering Materials</a>
                  </Button>
                </CardContent>
              </Card>
            </TabsContent>
            <TabsContent value="equity">
              <Card className="border-0 shadow-xl">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2"><Star className="h-5 w-5" /> Mission‑Aligned Equity</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3 text-sm text-black/70">
                  <p>Equity tranches prioritize long‑term stewardship and community governance. Participation may include voting rights and impact reporting.</p>
                  <ul className="list-disc pl-5 space-y-1">
                    <li>Multi‑class structure protects the Elemental Rule.</li>
                    <li>Impact benchmarks tied to habitat and education outcomes.</li>
                    <li>Liquidity explored via revenue share & buy‑back programs.</li>
                  </ul>
                  <Button className="rounded-full" asChild>
                    <a href="#contact">Speak with the Team</a>
                  </Button>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
        <p className="mt-6 text-xs text-black/60">Nothing here is an offer to sell securities. Any investment will be made only by applicable documents and in accordance with law.</p>
      </Section>

      {/* RESIDENCY & VISIT */}
      <Section id="residency" eyebrow="Visit & Live" title="Residency pathways and visiting programs" kicker="Whether you’re an artist, researcher, educator, or neighbor, there’s a door open for you.">
        <div className="grid lg:grid-cols-3 gap-6">
          <Card className="border-0 shadow-xl">
            <CardHeader>
              <CardTitle className="flex items-center gap-2"><MapPin className="h-5 w-5" /> Visiting Pangea One</CardTitle>
            </CardHeader>
            <CardContent className="text-sm text-black/70 space-y-2">
              <p>Book guided habitat walks, performance nights, and open‑studio days. Accessibility and quiet‑hour policies ensure everyone belongs.</p>
              <Button variant="secondary" className="rounded-full" asChild><a id="visit" href="#contact">Plan a Visit</a></Button>
            </CardContent>
          </Card>
          <Card className="border-0 shadow-xl">
            <CardHeader>
              <CardTitle className="flex items-center gap-2"><Users2 className="h-5 w-5" /> Artist & Scholar Residencies</CardTitle>
            </CardHeader>
            <CardContent className="text-sm text-black/70 space-y-2">
              <p>3–12 month residencies with housing options, studio access, mentorship, and public share‑outs.</p>
              <Button variant="secondary" className="rounded-full" asChild><a href="#contact">Apply</a></Button>
            </CardContent>
          </Card>
          <Card className="border-0 shadow-xl">
            <CardHeader>
              <CardTitle className="flex items-center gap-2"><Building2 className="h-5 w-5" /> Live/Work Homes</CardTitle>
            </CardHeader>
            <CardContent className="text-sm text-black/70 space-y-2">
              <p>Low‑impact dwellings clustered around shared greens, makerspaces, and trails. Community covenants uphold our Pillars.</p>
              <Button variant="secondary" className="rounded-full" asChild><a href="#contact">Register Interest</a></Button>
            </CardContent>
          </Card>
        </div>
      </Section>

      {/* MEDIA STRIP */}
      <section className="py-6">
        <div className="mx-auto max-w-7xl px-6">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            {[
              "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?q=80&w=1200&auto=format&fit=crop",
              "https://images.unsplash.com/photo-1469474968028-56623f02e42e?q=80&w=1200&auto=format&fit=crop",
              "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?q=80&w=1200&auto=format&fit=crop",
              "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=1200&auto=format&fit=crop",
            ].map((src, i) => (
              <div key={i} className="aspect-[16/10] overflow-hidden rounded-2xl border shadow">
                <img className="w-full h-full object-cover" src={src} alt="Pangea media" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <Section id="faq" eyebrow="What folks ask" title="Frequently asked questions">
        <div className="grid md:grid-cols-2 gap-6">
          <Card className="border-0 shadow-xl"><CardContent className="p-6"><h3 className="font-semibold mb-2">Is Pangea One a nonprofit, a business, or both?</h3><p className="text-sm text-black/70">We operate a hybrid model: a mission company for land, housing, and studio operations, and a nonprofit arm for education and research. Both are bound to the Pillars and publish impact metrics.</p></CardContent></Card>
          <Card className="border-0 shadow-xl"><CardContent className="p-6"><h3 className="font-semibold mb-2">How do you protect wildlife?</h3><p className="text-sm text-black/70">No sport hunting, habitat corridors, ethical husbandry, and science‑based policies co‑designed with local experts.</p></CardContent></Card>
          <Card className="border-0 shadow-xl"><CardContent className="p-6"><h3 className="font-semibold mb-2">What makes the Learning Arts Campus different?</h3><p className="text-sm text-black/70">Embodied learning and performance assessment across disciplines—students show knowledge through making and sharing.</p></CardContent></Card>
          <Card className="border-0 shadow-xl"><CardContent className="p-6"><h3 className="font-semibold mb-2">Can I invest?</h3><p className="text-sm text-black/70">Yes—subject to eligibility and local laws. Request materials below; we’ll follow up with details and timelines.</p></CardContent></Card>
        </div>
      </Section>

      {/* CONTACT */}
      <Section id="contact" eyebrow="Let’s talk" title="Get in touch">
        <div className="grid lg:grid-cols-2 gap-8">
          <Card className="border-0 shadow-xl">
            <CardHeader>
              <CardTitle>Message us</CardTitle>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleContact} className="grid gap-4">
                <Input required placeholder="Your name" />
                <Input required type="email" placeholder="Your email" />
                <Textarea required placeholder="How would you like to engage?" rows={5} />
                <Button type="submit" className="rounded-full">Send</Button>
              </form>
            </CardContent>
          </Card>
          <Card className="border-0 shadow-xl">
            <CardHeader>
              <CardTitle>Subscribe for updates</CardTitle>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubscribe} className="flex gap-3">
                <Input type="email" required placeholder="you@pangea.one" />
                <Button type="submit" className="rounded-full">Join</Button>
              </form>
              <div className="mt-6 space-y-2 text-sm text-black/70">
                <div className="flex items-center gap-2"><Mail className="h-4 w-4" /> example@pangea.one</div>
                <div className="flex items-center gap-2"><Phone className="h-4 w-4" /> (000) 000‑0000</div>
                <div className="flex items-center gap-2"><MapPin className="h-4 w-4" /> On the land we steward</div>
              </div>
            </CardContent>
          </Card>
        </div>
      </Section>

      {/* FOOTER */}
      <footer className="py-10 border-t">
        <div className="mx-auto max-w-7xl px-6 flex flex-col md:flex-row items-center justify-between gap-4">
          <div className="text-sm text-black/60">© {new Date().getFullYear()} Pangea One. Do No Harm.</div>
          <div className="flex items-center gap-3 text-sm">
            <a className="hover:text-emerald-700" href="#governance">Charter</a>
            <a className="hover:text-emerald-700" href="#invest">Impact</a>
            <a className="hover:text-emerald-700" href="#contact">Contact</a>
          </div>
        </div>
      </footer>
    </div>
  );
}