import React from 'react';
import { TerminalBlock } from '../components/TerminalBlock';
import { Mail, MessageSquare, Code } from 'lucide-react';

export const HireUs: 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 grid grid-cols-1 lg:grid-cols-2 gap-16">
        
        {/* Left Column: Context */}
        <div>
          <h1 className="font-serif text-4xl md:text-5xl text-ink leading-tight mb-8">
            Work With Us
          </h1>
          <p className="font-serif text-lg text-subtle leading-relaxed mb-12">
            We are currently accepting new engagements for Q4 2025. We look for partners who have clear technical hurdles in their AI roadmap, rather than open-ended exploration.
          </p>

          <div className="space-y-12">
            <div>
              <h3 className="font-sans font-bold text-sm uppercase tracking-widest text-ink mb-4">Engagement Models</h3>
              <ul className="space-y-6 border-l-2 border-gray-200 pl-6">
                <li>
                  <h4 className="font-serif font-bold text-lg mb-2">Strategic Sprint (4-6 Weeks)</h4>
                  <p className="text-subtle font-serif text-sm">Best for MVPs, Feasibility Studies, and Architecture Audits. We ship a working artifact and a technical roadmap.</p>
                </li>
                <li>
                  <h4 className="font-serif font-bold text-lg mb-2">Quarterly Retainer</h4>
                  <p className="text-subtle font-serif text-sm">For teams needing ongoing specialized ML expertise to augment their core engineering staff. Includes weekly syncs and code review.</p>
                </li>
              </ul>
            </div>

            <div>
              <h3 className="font-sans font-bold text-sm uppercase tracking-widest text-ink mb-4">What we need from you</h3>
              <div className="prose prose-sm text-subtle font-serif">
                <p>
                  To ensure we are a good fit, please provide technical details in your inquiry. 
                  Mention your current stack (e.g., AWS, Python, Vercel), specific model constraints, and the primary metric you are trying to improve (latency, accuracy, cost).
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Right Column: Form */}
        <div className="bg-white p-8 md:p-12 border border-gray-200 shadow-sm">
          <form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">Name</label>
                <input type="text" id="name" className="w-full border-gray-300 border p-3 text-sm focus:ring-ink focus:border-ink outline-none bg-gray-50" placeholder="Jane Doe" />
              </div>
              <div>
                <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">Work Email</label>
                <input type="email" id="email" className="w-full border-gray-300 border p-3 text-sm focus:ring-ink focus:border-ink outline-none bg-gray-50" placeholder="jane@company.com" />
              </div>
            </div>

            <div>
              <label htmlFor="company" className="block text-sm font-medium text-gray-700 mb-1">Company / Organization</label>
              <input type="text" id="company" className="w-full border-gray-300 border p-3 text-sm focus:ring-ink focus:border-ink outline-none bg-gray-50" placeholder="Acme Corp" />
            </div>

            <div>
              <label htmlFor="type" className="block text-sm font-medium text-gray-700 mb-1">Project Type</label>
              <select id="type" className="w-full border-gray-300 border p-3 text-sm focus:ring-ink focus:border-ink outline-none bg-gray-50">
                <option>MVP Development</option>
                <option>System Audit</option>
                <option>Model Fine-Tuning</option>
                <option>Other / Consulting</option>
              </select>
            </div>

            <div>
              <label htmlFor="details" className="block text-sm font-medium text-gray-700 mb-1">Technical Context</label>
              <textarea 
                id="details" 
                rows={6} 
                className="w-full border-gray-300 border p-3 text-sm focus:ring-ink focus:border-ink outline-none bg-gray-50 font-mono" 
                placeholder="Describe your stack, the models you are experimenting with, and the specific bottlenecks you are facing..."
              ></textarea>
            </div>

            <button type="submit" className="w-full bg-ink text-white font-bold py-4 hover:bg-gray-800 transition-colors uppercase tracking-widest text-xs">
              Request Consultation
            </button>
          </form>

          <div className="mt-8 pt-8 border-t border-gray-100 flex items-center justify-center space-x-8 text-subtle">
            <a href="#" className="flex items-center text-xs uppercase tracking-wider hover:text-ink">
              <Mail size={16} className="mr-2" /> hello@pradit.app
            </a>
            <a href="#" className="flex items-center text-xs uppercase tracking-wider hover:text-ink">
              <Code size={16} className="mr-2" /> GitHub
            </a>
          </div>
        </div>

      </div>
    </div>
  );
};