import React from 'react';
import { Cpu, Compass, Target } from 'lucide-react';

export const Audience: React.FC = () => {
  return (
    <section className="py-32 bg-background relative">
      <div className="max-w-4xl mx-auto px-4 text-center">
        <div className="flex justify-center mb-12">
           <div className="p-4 rounded-2xl bg-white/5 border border-white/10">
              <Cpu className="w-12 h-12 text-gray-400" strokeWidth={1} />
           </div>
        </div>
        <h2 className="text-4xl md:text-7xl font-bold text-white mb-8 tracking-tighter leading-tight">
          Built for <br/>
          <span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-600">Systems Thinkers</span>.
        </h2>
        <p className="text-xl md:text-2xl text-gray-400 mb-16 max-w-2xl mx-auto leading-relaxed">
          You treat your body like an engineering project. We handle the fuel calculations so you can just <span className="text-white font-semibold">fly the plane</span>.
        </p>
        
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 text-left max-w-3xl mx-auto">
           {[
             { icon: Target, title: "Precision", desc: "No vague advice. Specific macronutrient targets based on exertion." },
             { icon: Compass, title: "Direction", desc: "Always know the next move. Remove decision fatigue from your diet." },
             { icon: Cpu, title: "Automation", desc: "Algorithms that adapt to your metabolism over time." }
           ].map((item, i) => (
             <div key={i} className="p-8 rounded-3xl bg-surfaceHighlight border border-white/5 hover:border-white/20 transition-all duration-300 group">
               <item.icon className="w-8 h-8 text-gray-500 group-hover:text-primary-400 transition-colors mb-6" strokeWidth={1.5} />
               <h3 className="text-white text-lg font-bold mb-3">{item.title}</h3>
               <p className="text-sm text-gray-400 leading-relaxed">{item.desc}</p>
             </div>
           ))}
        </div>
      </div>
    </section>
  );
};