industries/components/Ecosystem.tsx

"use client";

import { motion } from "framer-motion";

const fade = {
  initial: { opacity: 0, y: 20 },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true },
};

// Small image strip under the Foundation prose. Files live in
// /public/ecosystem/<slug>.jpg — drop replacements there to swap.
// Falls back to /placeholder.svg if a file is missing.
const ecosystemImages = [
  { slug: "bear", alt: "Bear", emoji: "🐻" },
  { slug: "drought", alt: "Drought / dry tree", emoji: "🌳" },
  { slug: "lake", alt: "Lake", emoji: "🏞️" },
  { slug: "eagle", alt: "Eagle in flight", emoji: "🦅" },
  { slug: "forest", alt: "Forest", emoji: "🌲" },
  { slug: "whale", alt: "Whale tail", emoji: "🐋" },
];

export default function Ecosystem() {
  return (
    <section className="py-20 px-4 md:px-8">
      <div className="max-w-7xl mx-auto">
        {/* ── Foundation header ───────────────────────────── */}
        <motion.div {...fade} transition={{ duration: 0.5 }} className="mb-10">
          <span className="pill pill-rainbow text-2xl md:text-4xl">
            FOUNDATION
          </span>
        </motion.div>

        <motion.div
          {...fade}
          transition={{ duration: 0.5, delay: 0.1 }}
          className="mb-12"
        >
          <h3 className="text-2xl md:text-3xl font-extrabold underline underline-offset-4 mb-6">
            Charity &amp; Funding Portal
          </h3>
          <div className="grid md:grid-cols-2 gap-8 text-base md:text-lg">
            <div className="space-y-5">
              <p className="font-bold">
                Zoo Foundation donates all proceeds to Verified Charities and
                Non-Profits, Supporting the preservation of animals, endangered
                species, and scientific research.
              </p>
              <p>
                Zoo works with charities to fund projects/research related to
                the preservation of life and also specifically AI safety.
              </p>
              <p>
                A seamless DeFi layer will allow our foundation to fund compute
                costs, cover operational expenses, and support animal
                preservation.
              </p>
            </div>
            <div className="space-y-5 italic">
              <p>
                Zoo Labs started as a crypto-game that reached notoriety and a
                nearly $3 billion USD marketcap at all-time high.
              </p>
              <p>
                Our charity was legally approved on 06/02/2025, with our
                corporation formed on 04/22/2022, and now Zoo Labs Foundation
                is revenue tax exempt. EIN 88-3538992
              </p>
            </div>
          </div>
        </motion.div>

        {/* ── Image strip ─────────────────────────────────── */}
        <motion.div
          {...fade}
          transition={{ duration: 0.5, delay: 0.12 }}
          className="grid grid-cols-3 sm:grid-cols-6 gap-3 sm:gap-4 mb-14"
        >
          {ecosystemImages.map((img) => (
            <div
              key={img.slug}
              className="relative aspect-square border-2 border-black shadow-[6px_6px_0_0_#000] bg-white overflow-hidden"
            >
              <img
                src={`/ecosystem/${img.slug}.jpg`}
                alt={img.alt}
                loading="lazy"
                onError={(e) => {
                  (e.currentTarget as HTMLImageElement).style.display = "none";
                }}
                className="w-full h-full object-cover"
              />
              <span
                aria-hidden
                className="absolute inset-0 flex items-center justify-center text-3xl sm:text-4xl pointer-events-none"
              >
                {img.emoji}
              </span>
            </div>
          ))}
        </motion.div>

        {/* ── Three category blocks ───────────────────────── */}
        <div className="grid md:grid-cols-3 gap-10">
          {/* $ZOO Network */}
          <motion.div {...fade} transition={{ duration: 0.5, delay: 0.15 }}>
            <div className="mb-6 flex items-center gap-2">
              <span className="pill pill-green text-lg md:text-xl">
                $ZOO NETWORK
              </span>
              <span aria-label="USA" className="text-2xl">🇺🇸</span>
            </div>
            <div className="space-y-3 mb-6 text-base font-medium">
              <p>
                Now <u>anyone</u> can buy pre-IPO stocks on chain, legally and
                securely.
              </p>
              <p className="underline">USA backed compliance is a win win.</p>
            </div>
            <div className="panel panel-green space-y-4">
              <p className="font-bold">
                Exclusive access to regulated tokenization infrastructure
              </p>
              <p>
                Through , ZOO can bring GPU-backed AI
                infrastructure into a regulated market structure, leveraging
                broker-dealer, ATS, transfer agency, and blockchain settlement
                rails to reach accredited and institutional capital beyond
                crypto-native investors.
              </p>
            </div>
          </motion.div>

          {/* Zoo Industries */}
          <motion.div {...fade} transition={{ duration: 0.5, delay: 0.25 }}>
            <div className="mb-6">
              <span className="pill pill-pink text-lg md:text-xl">
                ZOO INDUSTRIES
              </span>
            </div>
            <div className="space-y-3 mb-6 text-base font-medium">
              <p className="underline">Selling &amp; Mining AI Compute</p>
            </div>
            <div className="panel panel-pink space-y-4 text-white">
              <p className="font-bold">
                To truly democratize data and computation in AI, we must
                leverage blockchain to decentralize compute and knowledge.
              </p>
              <p>
                We will also generate revenue by charging users for AI and
                compute usage, creating another highly profitable revenue
                stream.
              </p>
              <p>
                Creating a token backed by AI tokens will give the AI token
                real economic value. We can further democratize the system and
                reduce plutocratic influence.
              </p>
            </div>
          </motion.div>

          {/* Zoo Labs */}
          <motion.div {...fade} transition={{ duration: 0.5, delay: 0.35 }}>
            <div className="mb-6">
              <span className="pill pill-blue text-lg md:text-xl text-white">
                ZOO LABS
              </span>
            </div>
            <div className="space-y-3 mb-6 text-base font-medium">
              <p className="underline">Our Future Research</p>
            </div>
            <div className="panel panel-blue space-y-4 text-white">
              <p className="font-bold">
                To further promote our mission to save endangered species, Zoo
                will introduce an engaging haptic sensory Lab in the Bay Area.
              </p>
              <p>
                We can ensure monetization through a physical location and
                research laboratory with exciting multi-haptic experiences to
                ultimately enhance your live cognition and memory.
              </p>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}