import React from 'react';
import { TerminalBlock } from '../components/TerminalBlock';
import { Check, ArrowRight } from 'lucide-react';
import { Link } from 'react-router-dom';

export const Services: React.FC = () => {
  return (
    <div className="bg-paper min-h-screen pt-24 pb-24">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <header className="max-w-3xl mb-24">
          <h1 className="font-serif text-4xl md:text-5xl text-ink leading-tight mb-8">
            Services
          </h1>
          <p className="font-serif text-xl text-subtle leading-relaxed border-l-4 border-ink pl-6">
            We operate at the intersection of software engineering and machine learning research. Our engagements are typically project-based or retainer-style for high-growth technical teams who need to ship, not just explore.
          </p>
        </header>

        <div className="space-y-32">
          {/* Service Block 1: MVP */}
          <section className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center border-t border-gray-200 pt-16">
            <div>
              <div className="flex items-center gap-4 mb-4">
                 <span className="font-sans font-bold text-xs uppercase tracking-widest text-accent">01 — Prototyping</span>
                 <div className="h-px bg-gray-200 flex-grow"></div>
              </div>
              
              <h3 className="font-serif text-3xl text-ink mb-6">Accelerated MVP</h3>
              <p className="font-serif text-lg text-subtle leading-relaxed mb-8">
                We help founders and technical leads validate AI hypotheses quickly. Instead of spending months hiring a full ML team, we deliver a production-ready prototype in 4-6 weeks.
              </p>
              
              <ul className="space-y-4 font-sans text-sm text-gray-600 mb-8">
                {[
                  "Full stack implementation (React + Python/Node)",
                  "Model selection (Gemini, Claude, OpenAI) & prompt engineering",
                  "Basic evaluation pipeline setup",
                  "Deployment to your cloud (AWS/GCP)"
                ].map((item, i) => (
                  <li key={i} className="flex items-start">
                    <Check className="w-5 h-5 text-green-600 mr-3 shrink-0" />
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
            
            <div className="relative">
              <div className="absolute -inset-4 bg-gray-100 rounded-lg transform rotate-2 z-0"></div>
              <TerminalBlock 
                title="api/routes.py"
                lines={[
                  "@app.post('/generate')",
                  "async def generate_insight(ctx: Context):",
                  "    # Production-ready guardrails",
                  "    if not guardrails.check(ctx.prompt):",
                  "        raise SecurityException('Injection detected')",
                  "",
                  "    # Structured output with retries",
                  "    response = await llm.generate(",
                  "        model='gemini-2.5-flash',",
                  "        prompt=build_prompt(ctx),",
                  "        schema=InsightSchema",
                  "    )",
                  "    return response"
                ]}
                className="relative z-10 shadow-2xl"
              />
            </div>
          </section>

          {/* Service Block 2: Audit */}
          <section className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center border-t border-gray-200 pt-16">
            <div className="lg:order-2">
               <div className="flex items-center gap-4 mb-4">
                 <span className="font-sans font-bold text-xs uppercase tracking-widest text-accent">02 — Architecture</span>
                 <div className="h-px bg-gray-200 flex-grow"></div>
              </div>

              <h3 className="font-serif text-3xl text-ink mb-6">RAG & System Audit</h3>
              <p className="font-serif text-lg text-subtle leading-relaxed mb-8">
                Your retrieval system is likely the bottleneck. We perform a rigorous audit of your embedding strategies, chunking logic, and reranking stages to improve context relevance and reduce hallucinations.
              </p>
              
               <ul className="space-y-4 font-sans text-sm text-gray-600 mb-8">
                {[
                  "Vector Database Indexing Strategy Review",
                  "Embedding Latency & Cost Analysis",
                  "Context Window Optimization",
                  "Security & Prompt Injection Vulnerability Scan"
                ].map((item, i) => (
                  <li key={i} className="flex items-start">
                    <Check className="w-5 h-5 text-green-600 mr-3 shrink-0" />
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
            
            <div className="lg:order-1 relative">
               <div className="absolute -inset-4 bg-gray-100 rounded-lg transform -rotate-1 z-0"></div>
               <TerminalBlock 
                title="audit_report.json"
                lines={[
                  "{",
                  "  'system_health': 'DEGRADED',",
                  "  'metrics': {",
                  "    'retrieval_precision_at_5': 0.42,",
                  "    'average_latency_ms': 1250,",
                  "    'hallucination_rate': '15%'",
                  "  },",
                  "  'critical_findings': [",
                  "    'Embedding dimension mismatch in legacy index',",
                  "    'Missing semantic cache for frequent queries'",
                  "  ],",
                  "  'recommendation': 'Migrate to hybrid search'",
                  "}"
                ]}
                className="relative z-10 shadow-2xl"
              />
            </div>
          </section>

          {/* Service Block 3: Integration */}
          <section className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center border-t border-gray-200 pt-16">
            <div>
               <div className="flex items-center gap-4 mb-4">
                 <span className="font-sans font-bold text-xs uppercase tracking-widest text-accent">03 — Fine-tuning</span>
                 <div className="h-px bg-gray-200 flex-grow"></div>
              </div>
              <h3 className="font-serif text-3xl text-ink mb-6">Custom Model Integration</h3>
              <p className="font-serif text-lg text-subtle leading-relaxed mb-8">
                When prompt engineering hits a wall, we fine-tune open weights (Llama 3, Mistral, Gemma) on your proprietary data. We handle the data cleaning, training runs (LoRA/QLoRA), and deployment optimization.
              </p>
               <ul className="space-y-4 font-sans text-sm text-gray-600 mb-8">
                {[
                  "Dataset curation and cleaning pipelines",
                  "Parameter-Efficient Fine-Tuning (LoRA)",
                  "Evaluation against base model benchmarks",
                  "Private cloud deployment (AWS/GCP/Azure)"
                ].map((item, i) => (
                  <li key={i} className="flex items-start">
                    <Check className="w-5 h-5 text-green-600 mr-3 shrink-0" />
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
            
            <div className="relative">
              <div className="absolute -inset-4 bg-gray-100 rounded-lg transform rotate-1 z-0"></div>
              <TerminalBlock 
                title="train_lora.sh"
                lines={[
                  "$ torchrun --nproc_per_node=8 train.py \\",
                  "    --model_name 'mistralai/Mistral-7B' \\",
                  "    --data_path './proprietary_docs' \\",
                  "    --output_dir './finetuned_weights' \\",
                  "    --use_lora True \\",
                  "    --lora_r 16 \\",
                  "    --lora_alpha 32 \\",
                  "    --quantization '4bit'",
                  "",
                  "# Training started...",
                  "# Epoch 1: loss=0.45",
                  "# Epoch 2: loss=0.32"
                ]}
                className="relative z-10 shadow-2xl"
              />
            </div>
          </section>

           <section className="bg-ink text-white p-12 md:p-16 rounded-sm mt-12 text-center relative overflow-hidden">
            <div className="relative z-10">
              <h3 className="font-serif text-3xl mb-6">Ready to build?</h3>
              <p className="font-sans text-gray-300 mb-10 max-w-lg mx-auto text-lg">
                We take on a limited number of clients per quarter to ensure deep technical focus on every project.
              </p>
              <a href="mailto:hello@pradit.app" className="inline-flex items-center bg-white text-ink font-bold py-4 px-10 hover:bg-gray-100 transition-colors rounded-sm">
                Schedule Consultation <ArrowRight className="ml-2 w-5 h-5" />
              </a>
            </div>
            {/* Background decoration */}
             <div className="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
                <div className="grid grid-cols-12 h-full">
                  {[...Array(12)].map((_, i) => (
                     <div key={i} className="border-r border-white/20 h-full"></div>
                  ))}
                </div>
             </div>
          </section>
        </div>
      </div>
    </div>
  );
};