export default function ManoirLandingPage() {
  const inquiryFields = [
    "Company Name",
    "Contact Person",
    "Email Address",
    "Phone / WhatsApp",
    "Project Type",
    "Required Ring Size",
    "Material Grade",
    "Annual Demand",
    "Technical Requirements",
  ];
  const applications = [
    {
      title: "Offshore Wind",
      text: "Where maintenance access is expensive and failure is unacceptable.",
      image:
        "https://images.unsplash.com/photo-1509391366360-2e959784a276?q=80&w=1400&auto=format&fit=crop",
    },
    {
      title: "Mining Systems",
      text: "Built for continuous shock load and extreme operating environments.",
      image:
        "https://images.unsplash.com/photo-1513828583688-c52646db42da?q=80&w=1400&auto=format&fit=crop",
    },
    {
      title: "Gearbox Systems",
      text: "Precision-forged rings engineered for fatigue resistance under critical load.",
      image:
        "https://images.unsplash.com/photo-1565043589221-1a6fd9ae45c7?q=80&w=1400&auto=format&fit=crop",
    },
    {
      title: "Energy Infrastructure",
      text: "Manufacturing confidence for mission-critical industrial systems.",
      image:
        "https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1400&auto=format&fit=crop",
    },
  ];

  const trustCards = [
    {
      title: "Controlled Metallurgy",
      text: "Optimized forging ratios and controlled thermal processes for structural integrity under extreme load conditions.",
    },
    {
      title: "Full Traceability",
      text: "Every forging linked to certified material records, inspection reports, and process history.",
    },
    {
      title: "Advanced NDT Inspection",
      text: "Comprehensive UT, MT, and dimensional verification for mission-critical applications.",
    },
    {
      title: "Engineered Stability",
      text: "Manufactured for industries where replacement is difficult, costly, or impossible.",
    },
  ];

  return (
    <div className="bg-[#0b0b0b] text-white font-sans overflow-x-hidden">
      {/* TOP NAVIGATION */}
      <header className="fixed top-0 left-0 right-0 z-50 bg-black/90 backdrop-blur-xl border-b border-white/10">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between gap-6">
          <div>
            <div className="text-2xl font-black tracking-tight">
              MANOIR WORKS
            </div>
            <div className="text-xs uppercase tracking-[0.25em] text-gray-500 mt-1">
              Heavy Ring Forging
            </div>
          </div>

          <div className="hidden lg:flex items-center gap-10 text-sm text-gray-300">
            <div className="flex flex-col">
              <span className="text-gray-500 uppercase tracking-[0.2em] text-[11px] mb-1">
                Phone
              </span>
              <span className="select-all font-semibold tracking-wide">
                +86-1358928128
              </span>
            </div>

            <div className="w-px h-10 bg-white/10" />

            <div className="flex flex-col">
              <span className="text-gray-500 uppercase tracking-[0.2em] text-[11px] mb-1">
                Email
              </span>
              <span className="select-all font-semibold tracking-wide">
                info@manoirworks.com
              </span>
            </div>
          </div>

          <div className="hidden md:flex items-center gap-4">
            <button className="border border-white/10 hover:border-orange-500 px-5 py-3 rounded-2xl text-sm font-semibold transition-all bg-white/5">
              Upload Drawing
            </button>

            <button className="bg-orange-500 hover:bg-orange-600 px-5 py-3 rounded-2xl text-sm font-bold transition-all shadow-xl shadow-orange-500/20">
              Request Evaluation
            </button>
          </div>
        </div>

        <div className="lg:hidden border-t border-white/5 px-6 py-3 flex flex-col gap-2 bg-black/70">
          <div className="text-xs text-gray-500 uppercase tracking-[0.2em]">
            Contact Information
          </div>

          <div className="text-sm text-gray-300 select-all">
            +86-1358928128
          </div>

          <div className="text-sm text-gray-300 select-all">
            info@manoirworks.com
          </div>
        </div>
      </header>
      {/* HERO */}
      <section className="relative min-h-screen flex items-center justify-center pt-32">
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{
            backgroundImage:
              "url('https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=1800&auto=format&fit=crop')",
          }}
        />

        <div className="absolute inset-0 bg-black/70" />

        <div className="relative z-10 max-w-7xl mx-auto px-6 py-24 text-center">
          <div className="inline-block border border-orange-500/40 rounded-full px-4 py-2 text-sm tracking-[0.25em] uppercase text-orange-400 mb-8">
            Heavy Ring Forging / Seamless Rolled Rings
          </div>

          <h1 className="text-5xl md:text-8xl font-black leading-none tracking-tight mb-8">
            Forged for
            <br />
            <span className="text-orange-500">Zero Failure.</span>
          </h1>

          <p className="max-w-3xl mx-auto text-lg md:text-2xl text-gray-300 leading-relaxed mb-12">
            Large seamless rolled rings engineered for critical systems where downtime,
            failure, and uncertainty are unacceptable.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-16">
            <button className="bg-orange-500 hover:bg-orange-600 transition-all px-8 py-4 rounded-2xl text-lg font-semibold shadow-2xl shadow-orange-500/20">
              Request Engineering Evaluation
            </button>

            <button className="border border-white/20 hover:border-orange-500 transition-all px-8 py-4 rounded-2xl text-lg font-semibold bg-white/5 backdrop-blur-sm">
              Upload Drawing
            </button>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-5 gap-4 max-w-5xl mx-auto">
            {[
              "Up to 10m Diameter",
              "Mission-Critical Applications",
              "Full Material Traceability",
              "UT / MT / HT Certified",
              "Global Supply Experience",
            ].map((item, index) => (
              <div
                key={index}
                className="bg-white/5 border border-white/10 rounded-2xl p-4 text-sm text-gray-300 backdrop-blur-sm"
              >
                {item}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAILURE SECTION */}
      <section className="py-24 bg-[#101010]">
        <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <img
              src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=1400&auto=format&fit=crop"
              alt="Industrial failure"
              className="rounded-3xl shadow-2xl w-full h-[500px] object-cover"
            />
          </div>

          <div>
            <div className="text-orange-500 uppercase tracking-[0.3em] text-sm mb-6">
              Mission-Critical Reliability
            </div>

            <h2 className="text-4xl md:text-6xl font-black leading-tight mb-8">
              When Failure
              <br />
              Is Not an Option
            </h2>

            <p className="text-xl text-gray-300 leading-relaxed mb-8">
              A single ring failure can stop an entire industrial system.
            </p>

            <div className="grid grid-cols-2 gap-4 mb-10">
              {[
                "Downtime",
                "Project Delays",
                "Insurance Exposure",
                "Operational Risk",
              ].map((item, idx) => (
                <div
                  key={idx}
                  className="bg-black/40 border border-white/10 rounded-2xl p-5 text-lg"
                >
                  {item}
                </div>
              ))}
            </div>

            <p className="text-lg text-gray-400 leading-relaxed">
              That is why critical industries demand more than forging capacity.
              <br />
              <span className="text-white font-semibold">They demand certainty.</span>
            </p>
          </div>
        </div>
      </section>

      {/* TRUST SECTION */}
      <section className="py-24 bg-black">
        <div className="max-w-7xl mx-auto px-6">
          <div className="max-w-3xl mb-16">
            <div className="text-orange-500 uppercase tracking-[0.3em] text-sm mb-6">
              Engineering Confidence System
            </div>

            <h2 className="text-4xl md:text-6xl font-black mb-8">
              Why Engineers
              <br />
              Trust Manoir
            </h2>

            <p className="text-xl text-gray-400 leading-relaxed">
              Mission-critical applications require more than production capability.
              They require process discipline, traceability, and long-term reliability.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {trustCards.map((card, index) => (
              <div
                key={index}
                className="bg-[#141414] border border-white/10 rounded-[32px] p-10 hover:border-orange-500/40 transition-all duration-300"
              >
                <div className="w-16 h-16 rounded-2xl bg-orange-500/10 border border-orange-500/20 flex items-center justify-center text-orange-500 text-2xl mb-8">
                  0{index + 1}
                </div>

                <h3 className="text-3xl font-bold mb-6">{card.title}</h3>

                <p className="text-gray-400 leading-relaxed text-lg">{card.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* APPLICATIONS */}
      <section className="py-24 bg-[#0d0d0d]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center max-w-4xl mx-auto mb-20">
            <div className="text-orange-500 uppercase tracking-[0.3em] text-sm mb-6">
              High Consequence Industries
            </div>

            <h2 className="text-4xl md:text-6xl font-black mb-8">
              Designed for Systems
              <br />
              That Cannot Fail
            </h2>

            <p className="text-xl text-gray-400 leading-relaxed">
              Large seamless rolled rings for environments where reliability is mission-critical.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {applications.map((app, index) => (
              <div
                key={index}
                className="relative overflow-hidden rounded-[32px] border border-white/10 group h-[450px]"
              >
                <img
                  src={app.image}
                  alt={app.title}
                  className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-all duration-700"
                />

                <div className="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent" />

                <div className="absolute bottom-0 p-8 z-10">
                  <h3 className="text-3xl font-black mb-4">{app.title}</h3>
                  <p className="text-gray-300 text-lg leading-relaxed">{app.text}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section className="py-24 bg-black">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center max-w-4xl mx-auto mb-20">
            <div className="text-orange-500 uppercase tracking-[0.3em] text-sm mb-6">
              Controlled Process Discipline
            </div>

            <h2 className="text-4xl md:text-6xl font-black mb-8">
              Engineered Through
              <br />
              Controlled Manufacturing
            </h2>
          </div>

          <div className="grid md:grid-cols-4 gap-6">
            {[
              "Raw Material Verification",
              "Ring Rolling",
              "Controlled Heat Treatment",
              "NDT Inspection",
              "Precision Machining",
              "Dimensional Validation",
              "Documentation Review",
              "Global Shipment",
            ].map((step, index) => (
              <div
                key={index}
                className="bg-[#121212] border border-white/10 rounded-3xl p-8"
              >
                <div className="text-orange-500 text-5xl font-black mb-6">
                  {index + 1}
                </div>

                <div className="text-xl font-semibold leading-snug">{step}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TRUST PROOF */}
      <section className="py-24 bg-[#0d0d0d]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <div className="text-orange-500 uppercase tracking-[0.3em] text-sm mb-6">
                Industrial Trust Architecture
              </div>

              <h2 className="text-4xl md:text-6xl font-black mb-8">
                Confidence Built
                <br />
                Through Evidence
              </h2>

              <div className="space-y-6">
                {[
                  "UT / MT Inspection Reports",
                  "Material Certificates & Heat Numbers",
                  "Controlled Heat Treatment Records",
                  "Dimensional Inspection Documentation",
                  "Global Shipment Capability",
                ].map((item, idx) => (
                  <div
                    key={idx}
                    className="flex items-center gap-4 bg-black/30 border border-white/10 rounded-2xl p-5"
                  >
                    <div className="w-4 h-4 rounded-full bg-orange-500" />
                    <div className="text-lg text-gray-300">{item}</div>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <img
                src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=1400&auto=format&fit=crop"
                alt="Shipment"
                className="rounded-[32px] w-full h-[600px] object-cover shadow-2xl"
              />
            </div>
          </div>
        </div>
      </section>

      {/* ENGINEERING INQUIRY FORM */}
      <section className="py-24 bg-black border-t border-white/5">
        <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-start">
          <div>
            <div className="text-orange-500 uppercase tracking-[0.3em] text-sm mb-6">
              Technical Inquiry Submission
            </div>

            <h2 className="text-4xl md:text-6xl font-black leading-tight mb-8">
              Start With
              <br />
              Engineering Discussion
            </h2>

            <p className="text-xl text-gray-400 leading-relaxed mb-10">
              Submit your project requirements, drawings, or specifications for engineering evaluation.
            </p>
          </div>

          <div className="bg-[#121212] border border-white/10 rounded-[36px] p-8 md:p-10 shadow-2xl">
            <div className="flex items-center justify-between mb-10">
              <div>
                <div className="text-3xl font-black mb-2">
                  Request Engineering Evaluation
                </div>
                <div className="text-gray-500">
                  Critical Forging Project Submission
                </div>
              </div>
            </div>

            <form className="space-y-6">
              <div className="grid md:grid-cols-2 gap-5">
                {inquiryFields.map((field, index) => (
                  <div
                    key={index}
                    className={field === "Technical Requirements" ? "md:col-span-2" : ""}
                  >
                    <label className="block text-sm uppercase tracking-[0.15em] text-gray-500 mb-3">
                      {field}
                    </label>

                    {field === "Technical Requirements" ? (
                      <textarea
                        rows={6}
                        placeholder={`Enter ${field.toLowerCase()}`}
                        className="w-full bg-black border border-white/10 focus:border-orange-500 rounded-2xl px-5 py-4 text-white outline-none transition-all"
                      />
                    ) : (
                      <input
                        type="text"
                        placeholder={`Enter ${field.toLowerCase()}`}
                        className="w-full bg-black border border-white/10 focus:border-orange-500 rounded-2xl px-5 py-4 text-white outline-none transition-all"
                      />
                    )}
                  </div>
                ))}
              </div>

              <div>
                <label className="block text-sm uppercase tracking-[0.15em] text-gray-500 mb-3">
                  Upload Drawing / Specification
                </label>

                <div className="border-2 border-dashed border-white/10 hover:border-orange-500/40 transition-all rounded-3xl p-10 text-center bg-black/40">
                  <div className="text-xl font-semibold mb-3">
                    Drag & Drop Technical Files
                  </div>

                  <div className="text-gray-500 mb-6">
                    PDF / STEP / DWG / JPG / PNG
                  </div>

                  <button
                    type="button"
                    className="bg-white/5 hover:bg-white/10 border border-white/10 px-6 py-3 rounded-2xl transition-all"
                  >
                    Select Files
                  </button>
                </div>
              </div>

              <div className="flex flex-col md:flex-row gap-4 pt-4">
                <button className="flex-1 bg-orange-500 hover:bg-orange-600 transition-all py-5 rounded-2xl text-xl font-black shadow-2xl shadow-orange-500/20">
                  Submit Engineering Inquiry
                </button>

                <button
                  type="button"
                  className="flex-1 border border-white/10 hover:border-orange-500 transition-all py-5 rounded-2xl text-xl font-bold bg-white/5"
                >
                  Upload Technical Drawing
                </button>
              </div>
            </form>
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="relative py-32 overflow-hidden">
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{
            backgroundImage:
              "url('https://images.unsplash.com/photo-1489515217757-5fd1be406fef?q=80&w=1800&auto=format&fit=crop')",
          }}
        />

        <div className="absolute inset-0 bg-black/80" />

        <div className="relative z-10 max-w-5xl mx-auto px-6 text-center">
          <div className="text-orange-500 uppercase tracking-[0.3em] text-sm mb-6">
            Critical Forging Projects
          </div>

          <h2 className="text-5xl md:text-7xl font-black leading-tight mb-10">
            The Ring You
            <br />
            Never Worry About.
          </h2>

          <p className="text-xl md:text-2xl text-gray-300 leading-relaxed max-w-3xl mx-auto mb-14">
            Because critical systems deserve forging partners engineered for certainty.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button className="bg-orange-500 hover:bg-orange-600 transition-all px-10 py-5 rounded-2xl text-xl font-bold shadow-2xl shadow-orange-500/20">
              Discuss Your Project
            </button>

            <button className="border border-white/20 hover:border-orange-500 transition-all px-10 py-5 rounded-2xl text-xl font-bold bg-white/5 backdrop-blur-sm">
              Upload Technical Drawing
            </button>
          </div>
        </div>
      </section>

      {/* STICKY MOBILE CTA */}
      <div className="fixed bottom-0 left-0 right-0 z-50 md:hidden bg-black/95 backdrop-blur-xl border-t border-white/10 p-4">
        <button className="w-full bg-orange-500 py-4 rounded-2xl text-lg font-bold shadow-xl">
          Upload Drawing for Evaluation
        </button>
      </div>
    </div>
  );
}