export default function EtchMachineryHomepage() {
  const products = [
    {
      title: 'PCB Etching Machine',
      desc: 'High precision automatic etching systems for double-sided and multilayer PCB manufacturing.',
      image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1200&auto=format&fit=crop',
    },
    {
      title: 'Metal Etching Machine',
      desc: 'Chemical etching solutions for stainless steel, brass, copper, and decorative metal plates.',
      image: 'https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?q=80&w=1200&auto=format&fit=crop',
    },
    {
      title: 'PCB Developing Line',
      desc: 'Automatic developing, washing, drying and stripping systems for PCB production lines.',
      image: 'https://images.unsplash.com/photo-1581092335878-2d9ff86ca2bf?q=80&w=1200&auto=format&fit=crop',
    },
    {
      title: 'UV Exposure Machine',
      desc: 'LED UV exposure equipment with CCD alignment for PCB and screen printing applications.',
      image: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1200&auto=format&fit=crop',
    },
  ];

  const advantages = [
    '20+ Years Manufacturing Experience',
    'Exported to 45+ Countries',
    'CE Certified Industrial Equipment',
    '24/7 Technical Support',
    'OEM & Custom Machine Solutions',
    'Factory Direct Pricing',
  ];

  return (
    <div className="min-h-screen bg-white text-gray-800">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold tracking-tight">Golden Eagle</h1>
            <p className="text-sm text-gray-500">PCB & Metal Etching Equipment</p>
          </div>

          <nav className="hidden md:flex items-center gap-8 text-sm font-medium">
            <a href="#" className="hover:text-blue-600">Home</a>
            <a href="#products" className="hover:text-blue-600">Products</a>
            <a href="#solutions" className="hover:text-blue-600">Solutions</a>
            <a href="#about" className="hover:text-blue-600">About</a>
            <a href="#contact" className="hover:text-blue-600">Contact</a>
          </nav>

          <button className="bg-orange-500 hover:bg-orange-600 transition text-white px-5 py-2 rounded-xl shadow-lg">
            Get Quote
          </button>
        </div>
      </header>

      {/* Hero */}
      <section className="relative overflow-hidden">
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{
            backgroundImage:
              "url('https://images.unsplash.com/photo-1565043589221-1a6fd9ae45c7?q=80&w=1600&auto=format&fit=crop')",
          }}
        />
        <div className="absolute inset-0 bg-black/60" />

        <div className="relative max-w-7xl mx-auto px-6 py-32 lg:py-44 text-white">
          <div className="max-w-3xl">
            <div className="inline-flex items-center gap-2 bg-white/10 border border-white/20 rounded-full px-4 py-2 mb-6 text-sm backdrop-blur">
              <span>✔ 20+ Years Experience</span>
              <span>•</span>
              <span>✔ CE Certified</span>
            </div>

            <h2 className="text-5xl lg:text-7xl font-bold leading-tight mb-6">
              Professional PCB & Metal Etching Machinery Manufacturer
            </h2>

            <p className="text-lg lg:text-xl text-gray-200 leading-relaxed mb-8">
              Complete etching production solutions for PCB manufacturers, metal signage factories, precision mesh filters, and industrial fabrication businesses.
            </p>

            <div className="flex flex-wrap gap-4">
              <button className="bg-orange-500 hover:bg-orange-600 transition px-8 py-4 rounded-2xl text-lg font-semibold shadow-2xl">
                Request Free Quote
              </button>

              <button className="border border-white/30 hover:bg-white/10 transition px-8 py-4 rounded-2xl text-lg font-semibold backdrop-blur">
                View Products
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="bg-gray-50 border-y border-gray-200">
        <div className="max-w-7xl mx-auto px-6 py-8 grid grid-cols-2 lg:grid-cols-4 gap-6 text-center">
          <div>
            <div className="text-4xl font-bold text-blue-600">20+</div>
            <div className="text-gray-600 mt-2">Years Experience</div>
          </div>

          <div>
            <div className="text-4xl font-bold text-blue-600">45+</div>
            <div className="text-gray-600 mt-2">Export Countries</div>
          </div>

          <div>
            <div className="text-4xl font-bold text-blue-600">300+</div>
            <div className="text-gray-600 mt-2">Machines Installed</div>
          </div>

          <div>
            <div className="text-4xl font-bold text-blue-600">24/7</div>
            <div className="text-gray-600 mt-2">Technical Support</div>
          </div>
        </div>
      </section>

      {/* Products */}
      <section id="products" className="max-w-7xl mx-auto px-6 py-24">
        <div className="max-w-3xl mb-14">
          <p className="text-blue-600 font-semibold uppercase tracking-widest mb-3">
            Main Products
          </p>
          <h3 className="text-4xl lg:text-5xl font-bold mb-5">
            Industrial Etching Equipment Solutions
          </h3>
          <p className="text-lg text-gray-600 leading-relaxed">
            Designed for precision manufacturing, stable production efficiency, and long-term industrial operation.
          </p>
        </div>

        <div className="grid md:grid-cols-2 xl:grid-cols-4 gap-8">
          {products.map((item, index) => (
            <div
              key={index}
              className="group bg-white rounded-3xl overflow-hidden shadow-lg border border-gray-100 hover:shadow-2xl transition"
            >
              <div className="h-60 overflow-hidden">
                <img
                  src={item.image}
                  alt={item.title}
                  className="w-full h-full object-cover group-hover:scale-105 transition duration-500"
                />
              </div>

              <div className="p-6">
                <h4 className="text-2xl font-bold mb-3">{item.title}</h4>
                <p className="text-gray-600 leading-relaxed mb-5">
                  {item.desc}
                </p>

                <button className="text-blue-600 font-semibold hover:translate-x-1 transition">
                  View Details →
                </button>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Why Choose Us */}
      <section id="about" className="bg-gray-900 text-white py-24">
        <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center">
          <div>
            <p className="text-orange-400 font-semibold uppercase tracking-widest mb-3">
              Why Choose Us
            </p>

            <h3 className="text-4xl lg:text-5xl font-bold leading-tight mb-6">
              Reliable Industrial Equipment Partner
            </h3>

            <p className="text-gray-300 text-lg leading-relaxed mb-8">
              Golden Eagle provides complete PCB and metal etching production solutions with professional engineering support, customized machine design, and global export experience.
            </p>

            <div className="grid sm:grid-cols-2 gap-4">
              {advantages.map((advantage, index) => (
                <div
                  key={index}
                  className="bg-white/5 border border-white/10 rounded-2xl p-4 backdrop-blur"
                >
                  <div className="font-medium">✔ {advantage}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="relative">
            <img
              src="https://images.unsplash.com/photo-1581092921461-eab62e97a780?q=80&w=1400&auto=format&fit=crop"
              alt="Industrial factory"
              className="rounded-3xl shadow-2xl"
            />

            <div className="absolute -bottom-8 -left-8 bg-orange-500 text-white p-8 rounded-3xl shadow-2xl max-w-xs">
              <div className="text-4xl font-bold mb-2">45+</div>
              <div className="text-lg font-medium">
                Countries Served Worldwide
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Applications */}
      <section id="solutions" className="max-w-7xl mx-auto px-6 py-24">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <p className="text-blue-600 font-semibold uppercase tracking-widest mb-3">
            Industry Applications
          </p>
          <h3 className="text-4xl lg:text-5xl font-bold mb-6">
            Solutions for Multiple Industries
          </h3>
          <p className="text-lg text-gray-600">
            Our equipment supports PCB production, precision metal etching, decorative panels, mesh filters, and industrial signage manufacturing.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {[
            'PCB Manufacturing',
            'Flexible Circuit Boards',
            'Metal Nameplates',
            'Decorative Metal Panels',
            'Precision Mesh Filters',
            'Industrial OEM Fabrication',
          ].map((item, index) => (
            <div
              key={index}
              className="border border-gray-200 rounded-3xl p-8 hover:shadow-xl transition bg-white"
            >
              <div className="text-2xl font-bold mb-4">{item}</div>
              <p className="text-gray-600 leading-relaxed">
                Customized production equipment and process support designed for stable industrial manufacturing.
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="bg-orange-500 text-white py-24">
        <div className="max-w-5xl mx-auto px-6 text-center">
          <h3 className="text-4xl lg:text-6xl font-bold leading-tight mb-6">
            Need a Custom Etching Production Solution?
          </h3>

          <p className="text-xl text-orange-100 leading-relaxed mb-10">
            Contact our engineering team for equipment recommendations, technical consultation, and factory-direct quotations.
          </p>

          <div className="flex flex-wrap justify-center gap-4">
            <button className="bg-white text-orange-600 px-8 py-4 rounded-2xl font-bold text-lg shadow-xl hover:scale-105 transition">
              Get Free Quote
            </button>

            <button className="border border-white/40 px-8 py-4 rounded-2xl font-bold text-lg hover:bg-white/10 transition">
              Download Catalog
            </button>
          </div>
        </div>
      </section>

      {/* Contact */}
      <section id="contact" className="max-w-7xl mx-auto px-6 py-24">
        <div className="grid lg:grid-cols-2 gap-16">
          <div>
            <p className="text-blue-600 font-semibold uppercase tracking-widest mb-3">
              Contact Us
            </p>

            <h3 className="text-4xl font-bold mb-8">
              Start Your Project Today
            </h3>

            <div className="space-y-6 text-lg">
              <div className="bg-gray-50 rounded-2xl p-6 border border-gray-200">
                <div className="font-bold mb-2">Phone / WhatsApp</div>
                <div className="text-gray-600">+86 15010608128</div>
              </div>

              <div className="bg-gray-50 rounded-2xl p-6 border border-gray-200">
                <div className="font-bold mb-2">Email</div>
                <div className="text-gray-600">etchmachinery@163.com</div>
              </div>

              <div className="bg-gray-50 rounded-2xl p-6 border border-gray-200">
                <div className="font-bold mb-2">Address</div>
                <div className="text-gray-600">
                  Building B701, Greenland Group, Xinghua Street,
                  Daxing District, Beijing, China
                </div>
              </div>
            </div>
          </div>

          <div className="bg-white border border-gray-200 rounded-3xl shadow-xl p-8">
            <h4 className="text-3xl font-bold mb-8">Request a Quote</h4>

            <div className="space-y-5">
              <input
                type="text"
                placeholder="Your Name"
                className="w-full border border-gray-300 rounded-2xl px-5 py-4 outline-none focus:ring-2 focus:ring-blue-500"
              />

              <input
                type="text"
                placeholder="Company Name"
                className="w-full border border-gray-300 rounded-2xl px-5 py-4 outline-none focus:ring-2 focus:ring-blue-500"
              />

              <input
                type="email"
                placeholder="Email Address"
                className="w-full border border-gray-300 rounded-2xl px-5 py-4 outline-none focus:ring-2 focus:ring-blue-500"
              />

              <textarea
                rows="5"
                placeholder="Tell us your machine requirements..."
                className="w-full border border-gray-300 rounded-2xl px-5 py-4 outline-none focus:ring-2 focus:ring-blue-500"
              />

              <button className="w-full bg-blue-600 hover:bg-blue-700 transition text-white py-4 rounded-2xl font-bold text-lg shadow-lg">
                Submit Inquiry
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-950 text-gray-400 py-10 border-t border-gray-800">
        <div className="max-w-7xl mx-auto px-6 flex flex-col lg:flex-row justify-between gap-6">
          <div>
            <div className="text-white text-2xl font-bold mb-2">
              Golden Eagle
            </div>
            <div>
              Professional PCB & Metal Etching Equipment Manufacturer
            </div>
          </div>

          <div className="text-sm leading-relaxed">
            © 2026 Golden Eagle Machinery. All Rights Reserved.
          </div>
        </div>
      </footer>
    </div>
  );
}