const FEATURES = [
  {
    title: 'Agents Are Native',
    description:
      'The agent is built into the platform, not duct-taped onto a text editor. It participates in defined modes with explicit boundaries — not as an afterthought extension.',
    icon: '⬡',
  },
  {
    title: 'Full Observability',
    description:
      'Every tool call, file operation, and reasoning step is visible in real-time. No black boxes. No surprises. You see what the agent is doing, always.',
    icon: '◉',
  },
  {
    title: 'Workspace Guardrails',
    description:
      'Mode-based workspace locking prevents destructive concurrent operations. The agent can\'t edit files you\'re editing. You can\'t delete directories the agent is working in.',
    icon: '◧',
  },
  {
    title: 'Your Infrastructure',
    description:
      'Self-hosted. No telemetry. No data harvesting. Your code never leaves your network. Zero third-party trust required. Deploy on your terms.',
    icon: '⬢',
  },
  {
    title: 'Open Source',
    description:
      'Apache 2.0 license. Fork it. Own it. Extend it. No vendor lock-in, no seat licenses, no enterprise tiers. The code is yours.',
    icon: '⟐',
  },
  {
    title: 'Choose Your Compute',
    description:
      'Ollama, OpenAI, Gab AI, or any OpenAI-compatible API. Route different models to different tasks. Your agents, your compute, your choice.',
    icon: '⬡',
  },
];

export default function GadgetCodeSection() {
  return (
    <section id="gadget-code" className="py-20 px-6">
      <div className="max-w-6xl mx-auto">
        {/* Section Header */}
        <div className="text-center mb-16">
          <span className="text-xs font-mono tracking-widest text-brand mb-3 block">
            SOLUTION
          </span>
          <h2 className="text-3xl md:text-4xl font-mono font-bold tracking-tight text-text-primary">
            Engineering, Not Vibes
          </h2>
          <p className="mt-4 text-text-secondary max-w-2xl mx-auto">
            Gadget Code is a self-hosted, open source Agentic Engineering Platform.
            The AI agent isn't a bolt-on extension — it's a first-class participant
            with guardrails, audit trails, and full observability.
          </p>
        </div>

        {/* Feature Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
          {FEATURES.map((feature) => (
            <div
              key={feature.title}
              className="feature-card bg-bg-secondary border border-border-default rounded-lg p-5"
            >
              {/* Icon + Title */}
              <div className="flex items-center gap-3 mb-3">
                <span className="text-brand text-lg font-mono">{feature.icon}</span>
                <h3 className="font-mono text-sm font-bold tracking-wide text-text-primary">
                  {feature.title.toUpperCase()}
                </h3>
              </div>

              {/* Description */}
              <p className="text-sm text-text-secondary leading-relaxed">
                {feature.description}
              </p>
            </div>
          ))}
        </div>

        {/* CTA */}
        <div className="mt-12 text-center">
          <a
            href="https://git.g4dge7.com"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 px-8 py-3 text-sm font-mono tracking-wider border border-brand bg-brand hover:bg-brand-light text-white rounded transition-all shadow-lg shadow-brand/20"
          >
            GET THE SOURCE CODE
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" className="ml-1">
              <path d="M1 7h12M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" />
            </svg>
          </a>
          <p className="mt-3 text-xs font-mono text-text-muted">
            Free & Open Source · Apache 2.0 · No account required
          </p>
        </div>
      </div>
    </section>
  );
}
