import React from 'react'

// Eros Technologies - Single-file React component (Tailwind CSS required in your project)
// Default export: <ErosLanding />

export default function ErosLanding() {
  return (
    <div className="min-h-screen bg-gray-50 text-gray-900 font-sans">
      <header className="bg-white/60 backdrop-blur sticky top-0 z-40 shadow-sm">
        <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-orange-500 to-blue-600 flex items-center justify-center text-white font-bold">ET</div>
            <div>
              <div className="font-bold">Eros Technologies</div>
              <div className="text-xs text-gray-500">IT · Apps · SaaS · Web</div>
            </div>
          </div>

          <nav className="hidden md:flex gap-6 items-center text-sm">
            <a href="#services" className="hover:underline">Services</a>
            <a href="#about" className="hover:underline">About</a>
            <a href="#portfolio" className="hover:underline">Portfolio</a>
            <a href="#pricing" className="hover:underline">Pricing</a>
            <a href="#contact" className="text-white bg-blue-600 px-4 py-2 rounded-lg shadow">Contact</a>
          </nav>

          <button className="md:hidden p-2 rounded-lg">☰</button>
        </div>
      </header>

      <main className="max-w-6xl mx-auto p-6">
        {/* Hero */}
        <section className="grid md:grid-cols-2 gap-8 items-center py-12">
          <div>
            <h1 className="text-4xl md:text-5xl font-extrabold leading-tight">Eros Technologies — Building reliable digital products that scale</h1>
            <p className="mt-4 text-gray-600 max-w-xl">We design and develop web apps, mobile apps, and SaaS products with strong engineering, delightful UX, and proven delivery processes. From MVP to scale, we partner with startups and enterprises.</p>

            <div className="mt-6 flex gap-3">
              <a href="#contact" className="inline-block bg-blue-600 text-white px-5 py-3 rounded-lg shadow">Start a Project</a>
              <a href="#services" className="inline-block border border-gray-200 px-5 py-3 rounded-lg">Our Services</a>
            </div>

            <div className="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-3">
              <div className="p-4 bg-white rounded-lg shadow-sm">
                <div className="text-sm text-gray-500">Experience</div>
                <div className="text-2xl font-bold">10+ yrs</div>
              </div>
              <div className="p-4 bg-white rounded-lg shadow-sm">
                <div className="text-sm text-gray-500">Projects</div>
                <div className="text-2xl font-bold">150+</div>
              </div>
              <div className="p-4 bg-white rounded-lg shadow-sm">
                <div className="text-sm text-gray-500">Clients</div>
                <div className="text-2xl font-bold">50+</div>
              </div>
            </div>
          </div>

          <div className="order-first md:order-last">
            <div className="w-full rounded-2xl overflow-hidden shadow-lg border border-gray-100">
              <div className="bg-gradient-to-br from-orange-50 to-blue-50 p-8">
                <div className="h-64 bg-white/60 rounded-lg flex items-center justify-center text-gray-400">[Hero Illustration / Screenshot]</div>
              </div>
            </div>
          </div>
        </section>

        {/* Services */}
        <section id="services" className="py-12">
          <h2 className="text-2xl font-bold">Our Services</h2>
          <p className="text-gray-600 mt-2">End-to-end capabilities to launch, scale, and maintain digital products.</p>

          <div className="mt-6 grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <ServiceCard title="Custom Web Applications" desc="Scalable, secure web apps (React, Next.js, Laravel, Node) — APIs, dashboards, portals." />
            <ServiceCard title="Mobile App Development" desc="Cross-platform and native apps (Flutter, React Native, Kotlin, Swift)." />
            <ServiceCard title="SaaS Product Development" desc="SaaS architecture, multi-tenant setups, billing integrations, analytics." />
            <ServiceCard title="UI/UX & Product Design" desc="Research-led design, prototypes, and pixel-perfect UI to delight users." />
            <ServiceCard title="Cloud & DevOps" desc="AWS, DigitalOcean, Docker, CI/CD, monitoring, and cost optimization." />
            <ServiceCard title="Quality & Testing" desc="Automated tests, manual QA, performance testing and security audits." />
            <ServiceCard title="Maintenance & Support" desc="SLA-backed support, feature delivery, and technical upgrades." />
            <ServiceCard title="Consulting & Architecture" desc="Technical audits, system design, and scaling plans for complex systems." />
          </div>
        </section>

        {/* About */}
        <section id="about" className="py-12 bg-white rounded-lg p-6 shadow-sm">
          <div className="md:flex gap-8 items-center">
            <div className="md:w-1/2">
              <h3 className="text-xl font-bold">About Eros Technologies</h3>
              <p className="text-gray-600 mt-3">Eros Technologies is a full‑stack product and engineering studio. We help founders and product teams turn ideas into reliable software — fast. Our approach blends practical engineering, clear product thinking, and continuous delivery.</p>

              <ul className="mt-4 space-y-2 text-gray-700">
                <li>• Product-first engineering & rapid prototyping</li>
                <li>• Transparent pricing and predictable milestones</li>
                <li>• Cross-functional teams: product, design, engineering</li>
              </ul>

              <div className="mt-6 flex gap-3">
                <a href="#contact" className="px-4 py-2 bg-orange-500 text-white rounded">Work with us</a>
                <a href="#portfolio" className="px-4 py-2 border rounded">See work</a>
              </div>
            </div>

            <div className="md:w-1/2 mt-6 md:mt-0">
              <div className="grid grid-cols-2 gap-4">
                <div className="p-4 bg-gray-50 rounded-lg shadow"> 
                  <div className="text-sm text-gray-500">Mission</div>
                  <div className="font-semibold">Deliver transformative digital experiences</div>
                </div>
                <div className="p-4 bg-gray-50 rounded-lg shadow">
                  <div className="text-sm text-gray-500">Vision</div>
                  <div className="font-semibold">Be the trusted engineering partner for growing businesses</div>
                </div>
                <div className="p-4 bg-gray-50 rounded-lg shadow">
                  <div className="text-sm text-gray-500">Values</div>
                  <div className="font-semibold">Ownership · Quality · Empathy</div>
                </div>
                <div className="p-4 bg-gray-50 rounded-lg shadow">
                  <div className="text-sm text-gray-500">Approach</div>
                  <div className="font-semibold">Pragmatic · Iterative · Measurable</div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Portfolio */}
        <section id="portfolio" className="py-12">
          <h2 className="text-2xl font-bold">Selected Work</h2>
          <p className="text-gray-600 mt-2">Some examples of projects we've delivered — internal names for privacy.</p>

          <div className="mt-6 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <PortfolioCard title="Fintech Dashboard" desc="Real-time analytics dashboard for financial operations."/>
            <PortfolioCard title="Food Delivery App" desc="End-to-end mobile ordering and merchant portal."/>
            <PortfolioCard title="SaaS HR Platform" desc="Multi-tenant HR and payroll management platform."/>
          </div>
        </section>

        {/* Pricing */}
        <section id="pricing" className="py-12 bg-white rounded-lg p-6 shadow-sm">
          <h2 className="text-2xl font-bold">Pricing (sample)</h2>
          <p className="text-gray-600 mt-2">Flexible engagement models — pay-as-you-go, fixed-scope, or dedicated teams.</p>

          <div className="mt-6 grid sm:grid-cols-3 gap-6">
            <PriceCard title="MVP" price="₹120k+" bullets={["4-6 week delivery","Core features","1 designer + 2 devs"]} />
            <PriceCard title="Growth" price="₹400k+" bullets={["3-4 month delivery","Complete product","Product + Design + Engineering"]} />
            <PriceCard title="SaaS Scale" price="Custom" bullets={["Architecture + Migration","Multi-tenant","Support & SLA"]} />
          </div>
        </section>

        {/* Contact */}
        <section id="contact" className="py-12">
          <h2 className="text-2xl font-bold">Get in touch</h2>
          <p className="text-gray-600 mt-2">Tell us about your project — timeline, budget, and goals. We'll reply within 1 business day.</p>

          <div className="mt-6 grid md:grid-cols-2 gap-6">
            <form className="space-y-4 bg-white p-6 rounded-lg shadow">
              <div>
                <label className="text-sm text-gray-600">Your name</label>
                <input className="w-full mt-1 p-3 border rounded" placeholder="Name" />
              </div>
              <div>
                <label className="text-sm text-gray-600">Email</label>
                <input className="w-full mt-1 p-3 border rounded" placeholder="Email" />
              </div>
              <div>
                <label className="text-sm text-gray-600">Project brief</label>
                <textarea className="w-full mt-1 p-3 border rounded" rows={4} placeholder="Short summary of the project" />
              </div>
              <div className="flex gap-3">
                <button className="px-4 py-2 bg-blue-600 text-white rounded">Send</button>
                <button className="px-4 py-2 border rounded">Schedule a Call</button>
              </div>
            </form>

            <div className="space-y-4">
              <div className="p-4 bg-white rounded-lg shadow">
                <div className="text-sm text-gray-500">Email</div>
                <div className="font-medium">hello@erostech.com</div>
              </div>
              <div className="p-4 bg-white rounded-lg shadow">
                <div className="text-sm text-gray-500">Location</div>
                <div className="font-medium">Chennai, India</div>
              </div>
              <div className="p-4 bg-white rounded-lg shadow">
                <div className="text-sm text-gray-500">Phone</div>
                <div className="font-medium">+91 98xxxxxxx</div>
              </div>
            </div>
          </div>
        </section>

        {/* Footer */}
        <footer className="mt-12 border-t pt-6 pb-12 text-sm text-gray-600">
          <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center">
            <div>© {new Date().getFullYear()} Eros Technologies — All rights reserved.</div>
            <div className="flex gap-4 mt-4 md:mt-0">
              <a>Privacy</a>
              <a>Terms</a>
              <a>LinkedIn</a>
            </div>
          </div>
        </footer>
      </main>
    </div>
  )
}


/* ----------------- Subcomponents ----------------- */
function ServiceCard({ title, desc }){
  return (
    <div className="p-6 bg-white rounded-lg shadow-sm">
      <div className="font-semibold">{title}</div>
      <div className="mt-2 text-sm text-gray-600">{desc}</div>
    </div>
  )
}

function PortfolioCard({ title, desc }){
  return (
    <div className="rounded-lg overflow-hidden bg-white shadow-sm">
      <div className="h-40 flex items-center justify-center text-gray-300">[Image]</div>
      <div className="p-4">
        <div className="font-semibold">{title}</div>
        <div className="text-sm text-gray-600 mt-2">{desc}</div>
      </div>
    </div>
  )
}

function PriceCard({ title, price, bullets }){
  return (
    <div className="p-6 border rounded-lg bg-gray-50">
      <div className="font-semibold">{title}</div>
      <div className="text-xl font-bold mt-2">{price}</div>
      <ul className="mt-4 text-sm text-gray-700 space-y-1">
        {bullets.map((b,i)=>(<li key={i}>• {b}</li>))}
      </ul>
      <div className="mt-6">
        <button className="px-4 py-2 bg-blue-600 text-white rounded">Choose</button>
      </div>
    </div>
  )
}