import React from 'react';
import { 
  Terminal, 
  Workflow, 
  ShieldCheck, 
  TrendingUp, 
  ArrowRight, 
  Lock, 
  Network
} from 'lucide-react';

export default function App() {
  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 font-sans selection:bg-cyan-900 selection:text-cyan-50">
      
      {/* Navigation */}
      <nav className="fixed w-full z-50 top-0 border-b border-white/5 bg-slate-950/80 backdrop-blur-md">
        <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Terminal className="w-6 h-6 text-cyan-500" />
            <span className="text-xl font-bold tracking-tight text-white">ActOperator<span className="text-cyan-500">.com</span></span>
          </div>
          <div className="hidden md:flex gap-8 text-sm font-medium text-slate-400">
            <a href="#strategic-analysis" className="hover:text-white transition-colors">Asset Analysis</a>
            <a href="#market-context" className="hover:text-white transition-colors">Market Context</a>
            <a href="#acquisition" className="hover:text-white transition-colors">Acquisition</a>
          </div>
          <a href="#acquisition" className="px-5 py-2.5 rounded-full bg-white text-slate-900 text-sm font-semibold hover:bg-cyan-50 transition-colors shadow-[0_0_15px_rgba(255,255,255,0.1)]">
            Submit Inquiry
          </a>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="relative pt-40 pb-24 overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-cyan-900/20 via-slate-950 to-slate-950"></div>
        
        {/* Abstract Grid Background */}
        <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"></div>

        <div className="max-w-7xl mx-auto px-6 relative z-10 text-center">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-cyan-950/50 border border-cyan-800/50 text-cyan-400 text-xs font-semibold tracking-wide uppercase mb-8">
            <span className="w-2 h-2 rounded-full bg-cyan-500 animate-pulse"></span>
            Premium Digital Asset Available
          </div>
          
          <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight text-white mb-6">
            ActOperator<span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-600">.com</span>
          </h1>
          
          <p className="text-xl md:text-2xl text-slate-400 max-w-3xl mx-auto font-light leading-relaxed mb-10">
            The definitive brand asset for Level 3 Autonomous Agentic AI. 
            Secure the foundation for the <span className="text-white font-medium">Observe, Plan, Act</span> paradigm.
          </p>
          
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <a href="#acquisition" className="px-8 py-4 rounded-full bg-gradient-to-r from-cyan-600 to-blue-600 text-white font-semibold hover:from-cyan-500 hover:to-blue-500 transition-all shadow-[0_0_30px_rgba(8,145,178,0.3)] flex items-center gap-2 w-full sm:w-auto justify-center">
              Acquire Domain <ArrowRight className="w-4 h-4" />
            </a>
            <a href="#strategic-analysis" className="px-8 py-4 rounded-full bg-white/5 text-white font-semibold hover:bg-white/10 transition-all border border-white/10 w-full sm:w-auto justify-center flex">
              View Asset Prospectus
            </a>
          </div>
        </div>
      </section>

      {/* Strategic Asset Analysis */}
      <section id="strategic-analysis" className="py-24 bg-slate-900/50 border-y border-white/5">
        <div className="max-w-7xl mx-auto px-6">
          <div className="mb-16">
            <h2 className="text-3xl font-bold text-white mb-4">Strategic Asset Analysis</h2>
            <p className="text-slate-400 max-w-2xl text-lg">
              ActOperator.com represents a rare convergence of industry-standard nomenclature and the highest-funded technological trajectory of the decade.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-6">
            <div className="bg-slate-950 border border-white/5 rounded-2xl p-8 hover:border-cyan-500/30 transition-colors">
              <div className="w-12 h-12 rounded-lg bg-cyan-950/50 flex items-center justify-center mb-6">
                <Workflow className="w-6 h-6 text-cyan-500" />
              </div>
              <h3 className="text-xl font-semibold text-white mb-3">Level 3 AI Standard</h3>
              <p className="text-slate-400 leading-relaxed text-sm">
                Perfectly aligns with the "Observe, Plan, Act" framework defining fully autonomous AI capable of maintaining state and triggering enterprise workflows without human prompting.
              </p>
            </div>

            <div className="bg-slate-950 border border-white/5 rounded-2xl p-8 hover:border-blue-500/30 transition-colors">
              <div className="w-12 h-12 rounded-lg bg-blue-950/50 flex items-center justify-center mb-6">
                <TrendingUp className="w-6 h-6 text-blue-500" />
              </div>
              <h3 className="text-xl font-semibold text-white mb-3">High-Value Trajectory</h3>
              <p className="text-slate-400 leading-relaxed text-sm">
                Agentic AI is the highest-funded sub-sector. With foundational models pivoting to deep tool integration, this domain's future value projection sharply increases as terminology solidifies.
              </p>
            </div>

            <div className="bg-slate-950 border border-white/5 rounded-2xl p-8 hover:border-indigo-500/30 transition-colors">
              <div className="w-12 h-12 rounded-lg bg-indigo-950/50 flex items-center justify-center mb-6">
                <ShieldCheck className="w-6 h-6 text-indigo-500" />
              </div>
              <h3 className="text-xl font-semibold text-white mb-3">Defensive Moat</h3>
              <p className="text-slate-400 leading-relaxed text-sm">
                An essential acquisition for heavily funded startups or enterprise SaaS giants to secure as a primary brand marker, product portal, or central developer documentation hub.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Target Acquirer Profile */}
      <section id="market-context" className="py-24 relative">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div>
              <h2 className="text-3xl font-bold text-white mb-6">Market Context & Industry Shift</h2>
              <div className="space-y-6 text-slate-400 text-lg leading-relaxed">
                <p>
                  The artificial intelligence paradigm has decisively shifted away from reactive, conversational chatbots toward fully autonomous, "agentic" systems.
                </p>
                <p>
                  Major foundation model developers and enterprise software giants have explicitly adopted the <strong>Operator</strong> terminology. The open-source engineering community is actively building infrastructure around this exact nomenclature.
                </p>
                <ul className="space-y-4 mt-8">
                  {[
                    "Foundation Model Builders deploying internal 'Operator' agents.",
                    "AI Infrastructure Platforms categorizing Level 3 autonomy.",
                    "Enterprise Orchestration Systems requiring premium product spin-offs."
                  ].map((item, i) => (
                    <li key={i} className="flex items-start gap-3 text-sm">
                      <ShieldCheck className="w-5 h-5 text-cyan-500 shrink-0 mt-0.5" />
                      <span className="text-slate-300">{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
            
            <div className="relative">
              <div className="absolute inset-0 bg-gradient-to-tr from-cyan-500/10 to-blue-500/10 rounded-3xl blur-3xl"></div>
              <div className="relative bg-slate-900 border border-white/10 rounded-3xl p-8 shadow-2xl">
                <div className="flex items-center gap-4 border-b border-white/10 pb-6 mb-6">
                  <Network className="w-8 h-8 text-white" />
                  <div>
                    <h3 className="text-white font-semibold">Asset Status</h3>
                    <p className="text-cyan-400 text-sm">Available for Transfer</p>
                  </div>
                </div>
                
                <div className="space-y-4">
                  <div className="flex justify-between items-center text-sm">
                    <span className="text-slate-400">Domain Length</span>
                    <span className="text-white font-medium">11 Characters</span>
                  </div>
                  <div className="flex justify-between items-center text-sm">
                    <span className="text-slate-400">Extension</span>
                    <span className="text-white font-medium">.COM (Premium)</span>
                  </div>
                  <div className="flex justify-between items-center text-sm">
                    <span className="text-slate-400">Category</span>
                    <span className="text-white font-medium">AI / Enterprise SaaS</span>
                  </div>
                  <div className="flex justify-between items-center text-sm">
                    <span className="text-slate-400">Projected Valuation</span>
                    <span className="text-white font-medium">$78,000 - $90,000</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Acquisition Form */}
      <section id="acquisition" className="py-24 bg-black border-t border-white/5">
        <div className="max-w-3xl mx-auto px-6">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-white mb-4">Acquire ActOperator.com</h2>
            <p className="text-slate-400">
              Submit a formal inquiry to initiate acquisition discussions. All submissions are strictly confidential.
            </p>
          </div>

          <div className="bg-slate-900/50 border border-white/10 rounded-2xl p-8 md:p-12 backdrop-blur-sm text-center">
            <div className="w-16 h-16 bg-cyan-500/10 rounded-full flex items-center justify-center mx-auto mb-6">
              <Lock className="w-8 h-8 text-cyan-500" />
            </div>
            <h3 className="text-2xl font-semibold text-white mb-4">Direct Brokerage Contact</h3>
            <p className="text-slate-400 mb-8 max-w-lg mx-auto">
              To submit a formal offer or request additional details regarding the transfer of this digital asset, please contact our brokerage team directly via email.
            </p>
            <a 
              href="mailto:info@scalarassets.com?subject=Inquiry:%20ActOperator.com%20Acquisition"
              className="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-full bg-white text-slate-900 font-semibold hover:bg-slate-200 transition-all shadow-[0_0_20px_rgba(255,255,255,0.1)]"
            >
              Email info@scalarassets.com <ArrowRight className="w-4 h-4" />
            </a>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-950 py-8 border-t border-white/5 text-center px-6">
        <div className="flex items-center justify-center gap-2 mb-4">
          <Terminal className="w-5 h-5 text-slate-600" />
          <span className="text-lg font-bold text-slate-600">ActOperator.com</span>
        </div>
        <p className="text-slate-500 text-sm">
          © {new Date().getFullYear()} Scalar Assets London. All rights reserved. <br/>
          This digital asset is represented by an exclusive brokerage.
        </p>
      </footer>
    </div>
  );
}