import { Link } from 'react-router-dom';
import { ArrowRight, Shield } from 'lucide-react';

const AI_TOOLS = [
  { name: 'Claude', color: 'bg-orange-100 text-orange-700' },
  { name: 'Codex', color: 'bg-green-100 text-green-700' },
  { name: 'Cursor', color: 'bg-blue-100 text-blue-700' },
  { name: 'AI Agents', color: 'bg-purple-100 text-purple-700' },
];

export default function Hero() {
  return (
    <section className="pt-32 pb-20 px-4">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col lg:flex-row items-center gap-16">
          {/* Left: copy */}
          <div className="flex-1 max-w-xl">
            <div className="inline-flex items-center gap-2 bg-brand-50 text-brand-700 text-xs font-medium px-3 py-1.5 rounded-full mb-6">
              <Shield size={12} />
              Secure MCP Server for Odoo
            </div>
            <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 leading-tight mb-4">
              Connect your Odoo ERP to{' '}
              <span className="text-gradient">Claude, Codex, and AI agents</span>
            </h1>
            <p className="text-lg text-gray-600 mb-8">
              A secure hosted MCP server for Odoo. Subscribe, connect your Odoo
              instance, and instantly use your ERP data inside your favorite AI tools.
            </p>
            <div className="flex flex-wrap gap-3 mb-8">
              <Link to="/signup"
                className="inline-flex items-center gap-2 gradient-brand text-white px-6 py-3 rounded-xl font-semibold hover:opacity-90 transition-opacity">
                Start Free Trial <ArrowRight size={16} />
              </Link>
              <Link to="#how-it-works"
                className="inline-flex items-center gap-2 border border-gray-200 text-gray-700 px-6 py-3 rounded-xl font-semibold hover:bg-gray-50 transition-colors">
                View Setup Guide
              </Link>
            </div>
            <p className="text-xs text-gray-500">No credit card required · 7-day free trial · Cancel anytime</p>
          </div>

          {/* Right: diagram */}
          <div className="flex-1 flex justify-center lg:justify-end">
            <div className="bg-white border border-gray-100 rounded-2xl shadow-xl p-8 w-full max-w-md">
              {/* Odoo ERP → OdooMCP → AI Tools */}
              <div className="flex items-center justify-between gap-4">
                <div className="flex flex-col items-center gap-2">
                  <div className="w-16 h-16 bg-purple-50 rounded-xl flex items-center justify-center">
                    <span className="text-2xl">🗄️</span>
                  </div>
                  <span className="text-xs font-medium text-gray-600">Odoo ERP</span>
                </div>
                <div className="flex-1 border-t-2 border-dashed border-brand-200 relative">
                  <div className="absolute -top-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-brand-400 rounded-full" />
                </div>
                <div className="flex flex-col items-center gap-2">
                  <div className="w-16 h-16 gradient-brand rounded-xl flex items-center justify-center shadow-lg">
                    <span className="text-white text-xs font-bold">MCP</span>
                  </div>
                  <span className="text-xs font-medium text-brand-700">GetOdooMCP</span>
                </div>
                <div className="flex-1 border-t-2 border-dashed border-brand-200 relative">
                  <div className="absolute -top-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-brand-400 rounded-full" />
                </div>
                <div className="flex flex-col gap-2">
                  {AI_TOOLS.map((t) => (
                    <div key={t.name}
                      className={`text-xs font-medium px-2.5 py-1 rounded-lg ${t.color}`}>
                      {t.name}
                    </div>
                  ))}
                </div>
              </div>
              {/* MCP endpoint badge */}
              <div className="mt-8 bg-gray-50 rounded-xl p-4">
                <p className="text-xs text-gray-500 mb-1">Your MCP Endpoint</p>
                <p className="text-xs font-mono text-brand-600 break-all">
                  https://api.getodoomcp.com/mcp/sse
                </p>
                <div className="flex gap-4 mt-3 text-xs text-gray-600">
                  <span className="flex items-center gap-1">
                    <span className="w-2 h-2 bg-green-400 rounded-full" /> Active
                  </span>
                  <span>Tools: 24 enabled</span>
                  <span>Claude: Connected</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}