"use client";

import React from "react";
import { motion } from "framer-motion";
import { Shield, Sparkles, Cpu, Eye, Code, Compass } from "lucide-react";

export default function About() {
  const pillars = [
    {
      icon: Shield,
      title: "Radical Autonomy",
      description:
        "We are 100% self-directed. Every hour in our studio is dedicated to original research, bespoke engineering, and crafting immersive experiences.",
      badge: "Sovereign IP",
      accent: "from-cyan-500/20 to-blue-500/10",
      border: "border-cyan-500/30",
    },
    {
      icon: Cpu,
      title: "Relentless Engineering",
      description:
        "From low-latency native algorithms to custom GLSL shaders and responsive spatial architectures, our software is engineered for speed, stability, and longevity.",
      badge: "Deep Tech",
      accent: "from-purple-500/20 to-indigo-500/10",
      border: "border-purple-500/30",
    },
    {
      icon: Sparkles,
      title: "Artistic Depth",
      description:
        "Games and software shouldn't just be functional—they should carry soul. We handcraft atmospheric aesthetics, celestial soundscapes, and intuitive interaction rituals.",
      badge: "Bespoke Art",
      accent: "from-pink-500/20 to-rose-500/10",
      border: "border-pink-500/30",
    },
    {
      icon: Eye,
      title: "Long-Horizon Vision",
      description:
        "We build digital artifacts that endure. Rather than following transient hype cycles or rushed deliverables, we invest in foundational systems and timeless experiences.",
      badge: "Decade Mindset",
      accent: "from-indigo-500/20 to-cyan-500/10",
      border: "border-indigo-500/30",
    },
  ];

  return (
    <section id="about" className="relative py-28 overflow-hidden">
      {/* Background radial accent */}
      <div className="absolute top-1/2 left-0 w-96 h-96 bg-indigo-600/10 rounded-full blur-[140px] pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Section Header */}
        <div className="flex flex-col items-center text-center max-w-3xl mx-auto mb-20 space-y-4">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full glass-panel border border-indigo-500/30 text-xs font-mono text-indigo-300">
            <Compass className="w-3.5 h-3.5 text-indigo-400" />
            <span>ORIGIN & MISSION</span>
          </div>

          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-white">
            Forged in the Pursuit of <br />
            <span className="text-gradient-nebula">Creative Sovereignty.</span>
          </h2>

          <p className="text-base sm:text-lg text-slate-400 leading-relaxed pt-2">
            Aghatis Studio was established with a singular conviction: the most resonant 
            software and interactive worlds are crafted with unwavering focus, deep curiosity,
            and total creative sovereignty.
          </p>
        </div>

        {/* Narrative Feature Row: Manifesto statement */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch mb-16">
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7 }}
            className="lg:col-span-7 glass-panel-glow p-8 sm:p-10 rounded-3xl relative overflow-hidden flex flex-col justify-between"
          >
            <div className="absolute top-0 right-0 p-8 opacity-10 pointer-events-none">
              <Code className="w-48 h-48 text-cyan-400" />
            </div>

            <div className="space-y-6 relative z-10">
              <div className="text-xs font-mono tracking-widest text-cyan-400 uppercase">
                // THE STUDIO NARRATIVE
              </div>
              <h3 className="text-2xl sm:text-3xl font-bold text-white leading-snug">
                The Craft of an Independent Product Lab.
              </h3>
              <p className="text-slate-300 leading-relaxed text-sm sm:text-base">
                At <span className="text-cyan-300 font-semibold">Aghatis Studio</span>, our mission is purposeful: 
                we design, build, and publish our own digital products. By channeling our entire team&apos;s energy 
                into in-house intellectual property, we maintain complete creative control over every mechanic, interface, and artistic decision.
              </p>
              <p className="text-slate-400 leading-relaxed text-sm sm:text-base">
                Every line of code, geometric asset, and algorithmic pipeline we author belongs to a cohesive creative ecosystem.
                This focused environment grants us the freedom to polish mechanics until they shine, engineer tools with 
                uncompromising standards, and publish digital experiences that leave a lasting impression.
              </p>
            </div>

            <div className="mt-8 pt-6 border-t border-white/10 flex items-center justify-between text-xs font-mono text-slate-400">
              <span>FOUNDED IN INDEPENDENCE</span>
              <span className="text-cyan-400">PURE IN-HOUSE IP</span>
            </div>
          </motion.div>

          {/* Right Quote / Philosophy card */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7, delay: 0.1 }}
            className="lg:col-span-5 glass-card p-8 sm:p-10 rounded-3xl flex flex-col justify-between border-indigo-500/20 bg-gradient-to-b from-indigo-950/30 to-purple-950/10"
          >
            <div className="space-y-4">
              <div className="w-10 h-10 rounded-xl bg-cyan-400/10 border border-cyan-400/30 flex items-center justify-center text-cyan-400">
                <Sparkles className="w-5 h-5" />
              </div>
              <blockquote className="text-lg sm:text-xl font-medium text-slate-200 italic leading-relaxed">
                &ldquo;We measure our success by the elegance of our architecture, the atmosphere of our worlds, and the enduring quality of the software and games we release into the universe.&rdquo;
              </blockquote>
            </div>

            <div className="mt-8 pt-6 border-t border-white/10 flex items-center gap-3">
              <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-cyan-400 to-indigo-500 flex items-center justify-center text-slate-950 font-bold text-xs">
                AS
              </div>
              <div>
                <div className="text-xs font-mono font-bold text-white tracking-wider">
                  AGHATIS CORE LAB
                </div>
                <div className="text-[11px] font-mono text-slate-400">
                  CREATIVE ARCHITECTURE COUNCIL
                </div>
              </div>
            </div>
          </motion.div>
        </div>

        {/* Pillars Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {pillars.map((pillar, i) => {
            const Icon = pillar.icon;
            return (
              <motion.div
                key={pillar.title}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: i * 0.1 }}
                className="glass-card p-6 sm:p-7 rounded-2xl flex flex-col justify-between group hover:border-cyan-400/40 relative overflow-hidden"
              >
                <div className={`absolute top-0 right-0 w-28 h-28 bg-gradient-to-bl ${pillar.accent} rounded-bl-full pointer-events-none opacity-40 group-hover:opacity-100 transition-opacity`} />
                
                <div className="space-y-4 relative z-10">
                  <div className="flex items-center justify-between">
                    <div className="w-10 h-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center text-cyan-400 group-hover:scale-110 transition-transform">
                      <Icon className="w-5 h-5" />
                    </div>
                    <span className="text-[10px] font-mono uppercase px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-slate-400">
                      {pillar.badge}
                    </span>
                  </div>

                  <h4 className="text-lg font-bold text-white group-hover:text-cyan-300 transition-colors">
                    {pillar.title}
                  </h4>

                  <p className="text-xs sm:text-sm text-slate-400 leading-relaxed">
                    {pillar.description}
                  </p>
                </div>

                <div className="mt-6 pt-4 border-t border-white/5 flex items-center justify-between text-[11px] font-mono text-slate-400">
                  <span>PILLAR 0{i + 1}</span>
                  <span className="text-cyan-400 font-mono">NOMINAL</span>
                </div>
              </motion.div>
            );
          })}
        </div>

      </div>
    </section>
  );
}