export default function MechInvestorSite() {
  return (
    <div className="min-h-screen bg-white text-gray-900 font-sans">
      {/* Hero */}
      <section className="relative bg-gradient-to-r from-blue-900 to-blue-700 text-white overflow-hidden">
        <div className="max-w-7xl mx-auto px-6 py-24 grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <div className="inline-block px-4 py-2 bg-white/10 rounded-full text-sm mb-6">
              Dutch Innovation • U.S. Expansion • Investor Opportunity
            </div>
            <div className="flex items-center gap-6 mb-6">
              <div className="w-44 h-44 bg-transparent rounded-3xl flex items-center justify-center overflow-hidden">
                <img
                  src="/mech-logo.png"
                  alt="MECH.NL Logo"
                  className="w-full h-full object-contain"
                />
              </div>

              <div>
                <h1 className="text-5xl lg:text-7xl font-black leading-tight tracking-tight">
                  MECH.NL
                </h1>
                <div className="text-blue-100 text-lg tracking-[0.4em] uppercase mt-2">
                  make & take
                </div>
              </div>
            </div>
            <p className="text-2xl lg:text-3xl font-light mb-8 text-blue-100">
              Bringing Dutch Food & Retail Innovation to America
            </p>
            <p className="text-lg leading-relaxed text-blue-50 max-w-2xl mb-10">
              Mech.nl is positioned to connect the efficiency, logistics expertise, and food innovation culture of the Netherlands with opportunities in the rapidly evolving U.S. foodservice and retail market.
            </p>

            <div className="flex flex-wrap gap-4">
              <a
                href="#invest"
                className="bg-white text-blue-900 px-8 py-4 rounded-2xl font-bold shadow-xl hover:scale-105 transition"
              >
                Investor Information
              </a>

              <a
                href="#market"
                className="border border-white/40 px-8 py-4 rounded-2xl font-bold hover:bg-white/10 transition"
              >
                U.S. Market Potential
              </a>
            </div>
          </div>

          <div className="relative">
            <div className="bg-white/10 backdrop-blur-lg rounded-3xl p-8 border border-white/20 shadow-2xl">
              <div className="grid grid-cols-2 gap-6">
                <div className="bg-white/10 rounded-2xl p-6">
                  <div className="text-4xl font-black mb-2">#2</div>
                  <div className="text-blue-100">
                    Netherlands is the world’s second-largest agricultural exporter
                  </div>
                </div>

                <div className="bg-white/10 rounded-2xl p-6">
                  <div className="text-4xl font-black mb-2">$42B+</div>
                  <div className="text-blue-100">
                    Dutch food retail market size
                  </div>
                </div>

                <div className="bg-white/10 rounded-2xl p-6">
                  <div className="text-4xl font-black mb-2">5,800+</div>
                  <div className="text-blue-100">
                    Food companies operating in the Netherlands
                  </div>
                </div>

                <div className="bg-white/10 rounded-2xl p-6">
                  <div className="text-4xl font-black mb-2">U.S.</div>
                  <div className="text-blue-100">
                    Strategic growth and expansion focus
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* About */}
      <section className="py-24 bg-gray-50">
        <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center">
          <div>
            <h2 className="text-5xl font-black mb-8">
              Dutch Efficiency.
              <br />
              American Scale.
            </h2>

            <p className="text-lg text-gray-700 leading-relaxed mb-6">
              The Netherlands has become one of the world’s most advanced food and logistics ecosystems. Dutch companies are globally recognized for efficiency, innovation, supply chain optimization, food production, retail concepts, and private-label excellence.
            </p>

            <p className="text-lg text-gray-700 leading-relaxed mb-6">
              Mech.nl aims to leverage this European expertise for expansion opportunities in the United States — one of the world’s largest and fastest-evolving consumer markets.
            </p>

            <p className="text-lg text-gray-700 leading-relaxed">
              From food concepts and retail innovation to scalable operational systems, Mech.nl is designed to bridge European quality with American growth potential.
            </p>
          </div>

          <div className="grid gap-6">
            <div className="bg-white rounded-3xl shadow-xl p-8 border border-gray-100">
              <div className="text-blue-700 font-bold text-lg mb-2">Strategic Advantage</div>
              <h3 className="text-2xl font-black mb-4">European Innovation Platform</h3>
              <p className="text-gray-600 leading-relaxed">
                Dutch food and retail systems are internationally respected for operational efficiency, sustainability, logistics integration, and premium consumer positioning.
              </p>
            </div>

            <div className="bg-white rounded-3xl shadow-xl p-8 border border-gray-100">
              <div className="text-blue-700 font-bold text-lg mb-2">Market Timing</div>
              <h3 className="text-2xl font-black mb-4">American Consumer Shift</h3>
              <p className="text-gray-600 leading-relaxed">
                U.S. consumers increasingly demand premium experiences, healthier products, convenience, sustainability, and differentiated retail concepts.
              </p>
            </div>

            <div className="bg-white rounded-3xl shadow-xl p-8 border border-gray-100">
              <div className="text-blue-700 font-bold text-lg mb-2">Scalable Model</div>
              <h3 className="text-2xl font-black mb-4">Expansion Ready</h3>
              <p className="text-gray-600 leading-relaxed">
                The U.S. market provides significant scalability opportunities for proven European concepts, operational systems, and retail innovations.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Market Opportunity */}
      <section id="market" className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="max-w-3xl mb-16">
            <div className="text-blue-700 font-bold mb-4 uppercase tracking-widest">
              U.S. Opportunity
            </div>
            <h2 className="text-5xl font-black mb-6">
              Why America?
            </h2>
            <p className="text-xl text-gray-600 leading-relaxed">
              The American market continues to reward scalable foodservice, retail, and operational concepts that combine convenience, quality, branding, and operational excellence.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            <div className="bg-blue-50 rounded-3xl p-10 border border-blue-100">
              <div className="text-5xl mb-6">📈</div>
              <h3 className="text-2xl font-black mb-4">Massive Consumer Market</h3>
              <p className="text-gray-700 leading-relaxed">
                The United States remains one of the world’s largest food and retail economies with strong demand for differentiated concepts.
              </p>
            </div>

            <div className="bg-blue-50 rounded-3xl p-10 border border-blue-100">
              <div className="text-5xl mb-6">🚚</div>
              <h3 className="text-2xl font-black mb-4">Supply Chain Innovation</h3>
              <p className="text-gray-700 leading-relaxed">
                Dutch logistics expertise aligns well with modern American demands for efficient distribution and scalable operational systems.
              </p>
            </div>

            <div className="bg-blue-50 rounded-3xl p-10 border border-blue-100">
              <div className="text-5xl mb-6">🌍</div>
              <h3 className="text-2xl font-black mb-4">European Brand Appeal</h3>
              <p className="text-gray-700 leading-relaxed">
                European food quality, innovation, and branding continue to resonate strongly with American consumers and investors.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Investor Section */}
      <section id="invest" className="py-24 bg-gray-900 text-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="max-w-4xl mb-16">
            <div className="text-blue-400 font-bold mb-4 uppercase tracking-widest">
              Investor Relations
            </div>
            <h2 className="text-5xl font-black mb-8">
              Investment Highlights
            </h2>
          </div>

          <div className="grid lg:grid-cols-2 gap-8">
            <div className="bg-white/5 rounded-3xl p-10 border border-white/10">
              <h3 className="text-3xl font-black mb-6">Growth Drivers</h3>

              <ul className="space-y-5 text-lg text-gray-300">
                <li>• Access to U.S. consumer and retail markets</li>
                <li>• European operational expertise and efficiency</li>
                <li>• Scalable food and retail systems</li>
                <li>• Increasing demand for premium concepts</li>
                <li>• Long-term expansion opportunities</li>
                <li>• Potential strategic partnerships and franchising</li>
              </ul>
            </div>

            <div className="bg-gradient-to-br from-blue-700 to-blue-900 rounded-3xl p-10 shadow-2xl">
              <h3 className="text-3xl font-black mb-6">Investor Vision</h3>

              <p className="text-blue-100 text-lg leading-relaxed mb-8">
                Mech.nl is focused on building a scalable bridge between Dutch innovation and American growth opportunities.
              </p>

              <div className="space-y-6">
                <div className="flex justify-between border-b border-white/10 pb-4">
                  <span className="text-blue-100">Market Focus</span>
                  <span className="font-bold">United States</span>
                </div>

                <div className="flex justify-between border-b border-white/10 pb-4">
                  <span className="text-blue-100">Industry</span>
                  <span className="font-bold">Food & Retail</span>
                </div>

                <div className="flex justify-between border-b border-white/10 pb-4">
                  <span className="text-blue-100">Core Strength</span>
                  <span className="font-bold">Dutch Innovation</span>
                </div>

                <div className="flex justify-between">
                  <span className="text-blue-100">Expansion Goal</span>
                  <span className="font-bold">National Scaling</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="py-24 bg-gray-50">
        <div className="max-w-6xl mx-auto px-6">
          <div className="text-center max-w-3xl mx-auto mb-20">
            <div className="text-blue-700 font-bold mb-4 uppercase tracking-widest">
              Expansion Strategy
            </div>
            <h2 className="text-5xl font-black mb-6">
              U.S. Rollout Vision
            </h2>
          </div>

          <div className="grid md:grid-cols-4 gap-8">
            <div className="bg-white rounded-3xl p-8 shadow-lg border border-gray-100">
              <div className="text-5xl font-black text-blue-700 mb-6">01</div>
              <h3 className="text-2xl font-black mb-4">Market Entry</h3>
              <p className="text-gray-600 leading-relaxed">
                Establish strategic U.S. positioning and partnerships.
              </p>
            </div>

            <div className="bg-white rounded-3xl p-8 shadow-lg border border-gray-100">
              <div className="text-5xl font-black text-blue-700 mb-6">02</div>
              <h3 className="text-2xl font-black mb-4">Pilot Operations</h3>
              <p className="text-gray-600 leading-relaxed">
                Validate concepts and optimize operational systems.
              </p>
            </div>

            <div className="bg-white rounded-3xl p-8 shadow-lg border border-gray-100">
              <div className="text-5xl font-black text-blue-700 mb-6">03</div>
              <h3 className="text-2xl font-black mb-4">Regional Scaling</h3>
              <p className="text-gray-600 leading-relaxed">
                Expand into key metropolitan and growth markets.
              </p>
            </div>

            <div className="bg-white rounded-3xl p-8 shadow-lg border border-gray-100">
              <div className="text-5xl font-black text-blue-700 mb-6">04</div>
              <h3 className="text-2xl font-black mb-4">National Growth</h3>
              <p className="text-gray-600 leading-relaxed">
                Build long-term national brand and investor value.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-24 bg-gradient-to-r from-blue-800 to-blue-600 text-white">
        <div className="max-w-5xl mx-auto px-6 text-center">
          <h2 className="text-5xl lg:text-6xl font-black mb-8">
            Let’s Build The Next
            <br />
            European Success Story In America
          </h2>

          <p className="text-xl text-blue-100 max-w-3xl mx-auto mb-12 leading-relaxed">
            We are open to conversations with investors, strategic partners, franchise operators, and growth-focused collaborators interested in the future of food, retail, and operational innovation.
          </p>

          <div className="flex flex-wrap justify-center gap-6">
            <a
              href="mailto:Jeroen@bende.nl"
              className="bg-white text-blue-900 px-10 py-5 rounded-2xl font-black text-lg shadow-2xl hover:scale-105 transition"
            >
              Contact Jeroen
            </a>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-black text-gray-400 py-12">
        <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-8 items-center">
          <div>
            <div className="text-3xl font-black text-white mb-4">MECH.NL</div>
            <p className="max-w-xl leading-relaxed">
              Investor-focused presentation website designed for U.S. market positioning, strategic partnerships, and expansion opportunities.
            </p>
          </div>

          <div className="lg:text-right">
            <div className="text-white font-bold mb-3">Contact</div>
            <div>Jeroen@bende.nl</div>
            <div className="mt-4">
              <a
                href="https://breathbit.info/"
                className="text-blue-400 hover:text-blue-300"
              >
                Visit Related Website
              </a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}