"use client";

import React from "react";
import { motion } from "framer-motion";
import { Terminal, Gamepad2, Sparkles, Orbit, CheckCircle2, Compass } from "lucide-react";

export default function StudioCreed() {
  const softwareFocus = [
    {
      title: "Local-First & High Performance",
      desc: "We build native, low-latency tools compiled in Rust and WebGPU that respect cognitive flow and user data sovereignty.",
    },
    {
      title: "Tactile Spatial Interfaces",
      desc: "Re-imagining workstations and creative pipelines with fluid, cockpit-inspired spatial ergonomics.",
    },
    {
      title: "Zero-Bloat Engineering",
      desc: "Every binary is optimized for minimal memory footprint, instant boot times, and decades-long utility.",
    },
    {
      title: "Tools for Deep Thinkers & Creators",
      desc: "Software designed from the ground up for technical artists, developers, and focused thinkers.",
    },
  ];

  const gamesFocus = [
    {
      title: "Atmospheric & Narrative Immersion",
      desc: "Evocative interstellar worlds driven by rich speculative fiction, tactile acoustics, and memorable art direction.",
    },
    {
      title: "Kinetic & Physics-First Mechanics",
      desc: "Crafting gameplay rooted in Newtonian motion, orbital dynamics, and tactile interactive feedback.",
    },
    {
      title: "Standalone, Complete Experiences",
      desc: "Crafting finished artistic works that respect player time—no predatory loops, just pure interactive craft.",
    },
    {
      title: "Original Audiovisual Synthesis",
      desc: "Bespoke procedural audio engines and dynamic synthesizer soundtracks that react in real-time.",
    },
  ];

  return (
    <section id="creed" className="relative py-28 overflow-hidden">
      {/* Background radial glow */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[500px] bg-indigo-600/10 rounded-full blur-[180px] 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-cyan-500/30 text-xs font-mono text-cyan-300">
            <Compass className="w-3.5 h-3.5 text-cyan-400" />
            <span>STUDIO CREED & CRAFT PHILOSOPHY</span>
          </div>

          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-white">
            Where Our Energy Goes: <br />
            <span className="text-gradient-cyan">The Pursuit of Pure Craft.</span>
          </h2>

          <p className="text-base sm:text-lg text-slate-400 leading-relaxed pt-2">
            Aghatis Studio exists to invent, polish, and publish original software products and immersive interactive worlds.
            Our roadmap is driven entirely by craftsmanship, curiosity, and product excellence.
          </p>
        </div>

        {/* Side-by-side Dual Focus Arena */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-stretch">
          
          {/* Column 1: Software & Tools Focus */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="glass-panel-glow p-8 sm:p-10 rounded-3xl relative overflow-hidden flex flex-col justify-between border-cyan-500/30 bg-gradient-to-b from-cyan-950/20 via-slate-950/60 to-black/80"
          >
            <div className="space-y-6">
              <div className="flex items-center justify-between pb-4 border-b border-white/10">
                <div className="flex items-center gap-3">
                  <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">
                    <Terminal className="w-5 h-5" />
                  </div>
                  <div>
                    <h3 className="text-lg font-bold font-mono text-white">
                      SOFTWARE & CREATIVE TOOLS
                    </h3>
                    <span className="text-[11px] font-mono text-cyan-300">
                      SYSTEMS, WORKSTATIONS & PIPELINES
                    </span>
                  </div>
                </div>
                <span className="w-2.5 h-2.5 rounded-full bg-cyan-400 shadow-[0_0_10px_#38bdf8]" />
              </div>

              <div className="space-y-4">
                {softwareFocus.map((item, idx) => (
                  <div
                    key={idx}
                    className="p-4 rounded-2xl bg-white/5 border border-white/5 flex items-start gap-3.5 hover:border-cyan-400/20 transition-colors"
                  >
                    <CheckCircle2 className="w-4 h-4 text-cyan-400 shrink-0 mt-0.5" />
                    <div>
                      <h4 className="text-sm font-bold text-white font-mono">
                        {item.title}
                      </h4>
                      <p className="text-xs text-slate-300 leading-relaxed mt-1">
                        {item.desc}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="mt-8 pt-6 border-t border-white/10 text-xs font-mono text-cyan-300 flex items-center gap-2">
              <Sparkles className="w-4 h-4 text-cyan-400" />
              <span>Engineered to empower creators with speed, clarity, and precision.</span>
            </div>
          </motion.div>

          {/* Column 2: Games & Interactive Media Focus */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.1 }}
            className="glass-card p-8 sm:p-10 rounded-3xl relative overflow-hidden flex flex-col justify-between border-purple-500/30 bg-gradient-to-b from-purple-950/20 via-slate-950/60 to-black/80"
          >
            <div className="space-y-6">
              <div className="flex items-center justify-between pb-4 border-b border-white/10">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-xl bg-purple-500/10 border border-purple-500/30 flex items-center justify-center text-purple-400">
                    <Gamepad2 className="w-5 h-5" />
                  </div>
                  <div>
                    <h3 className="text-lg font-bold font-mono text-white">
                      ATMOSPHERIC GAMES
                    </h3>
                    <span className="text-[11px] font-mono text-purple-300">
                      WORLDS, PHYSICS & NARRATIVE
                    </span>
                  </div>
                </div>
                <span className="w-2.5 h-2.5 rounded-full bg-purple-400 shadow-[0_0_10px_#a855f7]" />
              </div>

              <div className="space-y-4">
                {gamesFocus.map((item, idx) => (
                  <div
                    key={idx}
                    className="p-4 rounded-2xl bg-white/5 border border-white/5 flex items-start gap-3.5 hover:border-purple-400/20 transition-colors"
                  >
                    <CheckCircle2 className="w-4 h-4 text-purple-400 shrink-0 mt-0.5" />
                    <div>
                      <h4 className="text-sm font-bold text-white font-mono">
                        {item.title}
                      </h4>
                      <p className="text-xs text-slate-300 leading-relaxed mt-1">
                        {item.desc}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="mt-8 pt-6 border-t border-white/10 text-xs font-mono text-purple-300 flex items-center gap-2">
              <Orbit className="w-4 h-4 text-purple-400" />
              <span>Handcrafted interactive universes built with artistic depth and soul.</span>
            </div>
          </motion.div>

        </div>

        {/* Central Creed Statement */}
        <motion.div
          initial={{ opacity: 0, y: 15 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="mt-12 p-8 rounded-2xl glass-panel text-center max-w-4xl mx-auto border border-white/10 relative overflow-hidden"
        >
          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-500/5 to-transparent pointer-events-none" />
          <p className="text-sm sm:text-base font-mono text-slate-200 tracking-wide leading-relaxed">
            &ldquo;Our commitment is simple: build products of enduring depth, craft experiences we are fiercely proud of, and explore the outer boundaries of software and interactive art.&rdquo;
          </p>
          <div className="mt-4 text-xs font-mono text-cyan-400 uppercase tracking-widest">
            — AGHATIS STUDIO CORE TENET
          </div>
        </motion.div>

      </div>
    </section>
  );
}