import React from "react";

export default function NeurolytixWebsite() {
  return (
    <div className="min-h-screen bg-gray-50 text-gray-900 font-sans">
      {/* Header */}
      <header className="bg-white shadow-sm sticky top-0 z-30">
        <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-gradient-to-r from-indigo-600 to-teal-400 flex items-center justify-center text-white font-bold">N</div>
            <div>
              <h1 className="text-lg font-semibold">NeurolytixSolutions</h1>
              <p className="text-xs text-gray-500">AI • Web • Cloud • Security</p>
            </div>
          </div>
          <nav className="hidden md:flex gap-6 text-sm">
            <a href="#services" className="hover:text-indigo-600">Services</a>
            <a href="#portfolio" className="hover:text-indigo-600">Portfolio</a>
            <a href="#about" className="hover:text-indigo-600">About</a>
            <a href="#contact" className="hover:text-indigo-600">Contact</a>
          </nav>
          <a href="#contact" className="hidden md:inline-block bg-indigo-600 text-white px-4 py-2 rounded-md text-sm">Get in touch</a>
        </div>
      </header>

      {/* Hero */}
      <section className="max-w-6xl mx-auto px-6 py-16 flex flex-col md:flex-row items-center gap-10">
        <div className="flex-1">
          <h2 className="text-3xl md:text-4xl font-extrabold leading-tight">Aapke business ke liye tailored IT & AI solutions</h2>
          <p className="mt-4 text-gray-600">NeurolytixSolutions — hum AI, web & cloud se complex problems ko simple banate hain. Product development, automation aur data driven decisions mein hum aapke saath hain.</p>
          <div className="mt-6 flex gap-3">
            <a href="#contact" className="inline-block bg-teal-500 text-white px-5 py-3 rounded-md">Free Consultation</a>
            <a href="#services" className="inline-block border border-gray-200 px-5 py-3 rounded-md">Our Services</a>
          </div>

          <div className="mt-8 grid grid-cols-2 sm:grid-cols-3 gap-4 text-sm text-gray-600">
            <div className="p-3 bg-white rounded-lg shadow-sm">
              <div className="text-xs font-semibold">Clients</div>
              <div className="text-xl font-bold">25+</div>
            </div>
            <div className="p-3 bg-white rounded-lg shadow-sm">
              <div className="text-xs font-semibold">Projects</div>
              <div className="text-xl font-bold">40+</div>
            </div>
            <div className="p-3 bg-white rounded-lg shadow-sm">
              <div className="text-xs font-semibold">Avg. Delivery</div>
              <div className="text-xl font-bold">6–8 weeks</div>
            </div>
          </div>
        </div>

        <div className="flex-1">
          <div className="rounded-2xl bg-gradient-to-br from-indigo-600 to-teal-400 p-6 text-white shadow-lg">
            <h3 className="text-xl font-bold">Demo: AI-driven Insights</h3>
            <p className="mt-3 text-sm opacity-90">Real-time analytics dashboard, predictive models, and automation pipelines — sab ek saath.</p>
            <div className="mt-6 grid grid-cols-2 gap-4">
              <div className="bg-white bg-opacity-10 p-4 rounded-lg">
                <div className="text-xs">Accuracy</div>
                <div className="text-2xl font-bold">92%</div>
              </div>
              <div className="bg-white bg-opacity-10 p-4 rounded-lg">
                <div className="text-xs">Uptime</div>
                <div className="text-2xl font-bold">99.9%</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Services */}
      <section id="services" className="max-w-6xl mx-auto px-6 py-12">
        <h3 className="text-2xl font-bold">Services</h3>
        <p className="text-gray-600 mt-2">Humari core services — practical, scalable aur cost-effective.</p>
        <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="p-6 bg-white rounded-xl shadow hover:shadow-md">
            <h4 className="font-semibold">AI & Machine Learning</h4>
            <p className="mt-2 text-sm text-gray-600">Custom ML models, NLP, computer vision, recommendation engines.</p>
          </div>
          <div className="p-6 bg-white rounded-xl shadow hover:shadow-md">
            <h4 className="font-semibold">Web & Mobile Development</h4>
            <p className="mt-2 text-sm text-gray-600">React/Next.js, React Native, backend APIs, CMS integrations.</p>
          </div>
          <div className="p-6 bg-white rounded-xl shadow hover:shadow-md">
            <h4 className="font-semibold">Cloud, DevOps & Security</h4>
            <p className="mt-2 text-sm text-gray-600">AWS/GCP, CI/CD, containerization, monitoring, security audits.</p>
          </div>
          <div className="p-6 bg-white rounded-xl shadow hover:shadow-md">
            <h4 className="font-semibold">Data Analytics & BI</h4>
            <p className="mt-2 text-sm text-gray-600">Dashboards, ETL pipelines, KPI tracking and automation.</p>
          </div>
          <div className="p-6 bg-white rounded-xl shadow hover:shadow-md">
            <h4 className="font-semibold">Product Strategy & Consulting</h4>
            <p className="mt-2 text-sm text-gray-600">Roadmaps, MVPs, technical architecture and scaling plans.</p>
          </div>
          <div className="p-6 bg-white rounded-xl shadow hover:shadow-md">
            <h4 className="font-semibold">Cybersecurity</h4>
            <p className="mt-2 text-sm text-gray-600">Vulnerability assessment, secure coding reviews, compliance checks.</p>
          </div>
        </div>
      </section>

      {/* Portfolio */}
      <section id="portfolio" className="max-w-6xl mx-auto px-6 py-12">
        <h3 className="text-2xl font-bold">Portfolio (Samples)</h3>
        <p className="text-gray-600 mt-2">Kuch examples jo humne banaye — prototype ke roop mein.</p>
        <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white rounded-xl shadow overflow-hidden">
            <div className="p-6">
              <h4 className="font-semibold">Retail Demand Forecasting</h4>
              <p className="text-sm text-gray-600 mt-2">ML model for inventory optimization — 30% reduce in stockouts.</p>
            </div>
          </div>
          <div className="bg-white rounded-xl shadow overflow-hidden">
            <div className="p-6">
              <h4 className="font-semibold">Fintech Dashboard</h4>
              <p className="text-sm text-gray-600 mt-2">Real-time KPIs, alerts and user behaviour analytics.</p>
            </div>
          </div>
          <div className="bg-white rounded-xl shadow overflow-hidden">
            <div className="p-6">
              <h4 className="font-semibold">Healthcare Image Classifier</h4>
              <p className="text-sm text-gray-600 mt-2">Prototype for fast triage and risk-scoring.</p>
            </div>
          </div>
        </div>
      </section>

      {/* About */}
      <section id="about" className="max-w-6xl mx-auto px-6 py-12">
        <h3 className="text-2xl font-bold">About NeurolytixSolutions</h3>
        <p className="text-gray-600 mt-2">Hum chhoti teams se lekar mid-size enterprises tak technology solutions provide karte hain. Focus: measurable impact aur sustainable growth.</p>
        <ul className="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4 text-sm text-gray-700">
          <li className="bg-white p-4 rounded-lg shadow">Experienced engineers & data scientists</li>
          <li className="bg-white p-4 rounded-lg shadow">Agile product delivery</li>
          <li className="bg-white p-4 rounded-lg shadow">Transparent pricing & timelines</li>
        </ul>
      </section>

      {/* Contact */}
      <section id="contact" className="max-w-3xl mx-auto px-6 py-12">
        <h3 className="text-2xl font-bold">Contact</h3>
        <p className="text-gray-600 mt-2">Project discuss karne ke liye form bharein ya sidha email/phone karein.</p>
        <div className="mt-6 bg-white p-6 rounded-xl shadow">
          <form action="#" className="grid grid-cols-1 gap-4">
            <input placeholder="Aapka naam" className="w-full p-3 border rounded" />
            <input placeholder="Email" className="w-full p-3 border rounded" />
            <input placeholder="Phone (optional)" className="w-full p-3 border rounded" />
            <textarea placeholder="Project ka short description" className="w-full p-3 border rounded h-28" />
            <div className="flex gap-3">
              <button type="submit" className="bg-indigo-600 text-white px-4 py-2 rounded">Send Message</button>
              <a href="mailto:hello@neurolytixsolutions.com" className="px-4 py-2 border rounded">Email: hello@neurolytixsolutions.com</a>
            </div>
          </form>
        </div>
      </section>

      {/* Footer */}
      <footer className="mt-12 bg-white border-t">
        <div className="max-w-6xl mx-auto px-6 py-6 flex flex-col md:flex-row justify-between items-center text-sm text-gray-600">
          <div>© {new Date().getFullYear()} NeurolytixSolutions — All rights reserved.</div>
          <div className="flex gap-4 mt-3 md:mt-0">
            <a href="#">Terms</a>
            <a href="#">Privacy</a>
            <a href="#">Sitemap</a>
          </div>
        </div>
      </footer>
    </div>
  );
}