// MarketSeven Premium Corporate Website
// Next.js + React + TailwindCSS
// Ready for Cloudflare Pages Deployment

export default function MarketSevenWebsite() {

  const logoUrl =
    "https://pub-57133e2e090a48599ca090d2b642ef86.r2.dev/ChatGPT%20Image%209%20may%202026%2C%2012_21_15.png";

  return (
    <div className="bg-white text-zinc-900 font-sans overflow-x-hidden">

      {/* HERO SECTION */}
      <section className="relative min-h-screen flex items-center justify-center px-6 overflow-hidden bg-zinc-950">

        {/* BACKGROUND IMAGE */}
        <div
          className="absolute inset-0 opacity-30"
          style={{
            backgroundImage:
              "url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1920&auto=format&fit=crop')",
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        />

        {/* OVERLAY */}
        <div className="absolute inset-0 bg-gradient-to-b from-black/70 to-black"></div>

        {/* CONTENT */}
        <div className="relative z-10 max-w-7xl mx-auto w-full">

          {/* TOP LOGO */}
          <div className="absolute top-[-90px] left-0 md:left-4">
            <img
              src={logoUrl}
              alt="MarketSeven Logo"
              className="w-[115px] md:w-[150px] object-contain"
            />
          </div>

          {/* HERO CARD */}
          <div className="max-w-3xl mt-32 bg-white/10 backdrop-blur-xl border border-white/10 rounded-[40px] p-10 md:p-14 shadow-2xl">

            <p className="text-[14px] tracking-[0.3em] uppercase text-orange-300 mb-6">
              AI Commerce • Global Expansion
            </p>

            <h1 className="text-5xl md:text-7xl font-black text-white leading-tight mb-8">
              Building the Future of Digital Commerce in Latin America
            </h1>

            <p className="text-[14px] md:text-[15px] text-gray-300 leading-[2] max-w-2xl">
              MarketSeven develops scalable digital ecosystems powered by artificial intelligence,
              performance marketing, automation and modern ecommerce infrastructure designed for
              emerging Latin American markets.
            </p>

            <div className="flex flex-col sm:flex-row gap-5 mt-10">

              <button className="bg-orange-500 hover:bg-orange-400 transition-all duration-300 text-white px-8 py-4 rounded-2xl font-semibold shadow-xl">
                Strategic Partnerships
              </button>

              <button className="border border-white/20 hover:bg-white/10 transition-all duration-300 text-white px-8 py-4 rounded-2xl font-semibold">
                Investor Overview
              </button>

            </div>
          </div>
        </div>
      </section>

      {/* VISION SECTION */}
      <section className="py-28 px-6 bg-white">

        <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">

          {/* IMAGE */}
          <div>
            <img
              src="https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=1400&auto=format&fit=crop"
              className="rounded-[40px] shadow-2xl w-full h-[650px] object-cover"
            />
          </div>

          {/* CONTENT */}
          <div>

            <h2 className="text-5xl md:text-6xl font-black text-slate-900 leading-tight mb-10">
              MarketSeven Vision
            </h2>

            <div className="space-y-6">

              <div className="bg-zinc-100 rounded-[30px] p-8 shadow-lg border border-zinc-200">
                <p className="text-[14px] leading-relaxed text-zinc-700">
                  MarketSeven combines artificial intelligence, digital media systems,
                  automation and ecommerce strategies into scalable online business infrastructure.
                </p>
              </div>

              <div className="bg-zinc-100 rounded-[30px] p-8 shadow-lg border border-zinc-200">
                <p className="text-[14px] leading-relaxed text-zinc-700">
                  The company focuses on long-term digital opportunities across Ecuador,
                  Peru, Argentina and additional emerging Latin American markets.
                </p>
              </div>

              <div className="bg-zinc-100 rounded-[30px] p-8 shadow-lg border border-zinc-200">
                <p className="text-[14px] leading-relaxed text-zinc-700">
                  MarketSeven is structured to connect international investment,
                  scalable commerce systems and regional digital expansion.
                </p>
              </div>

            </div>
          </div>
        </div>
      </section>

      {/* INFRASTRUCTURE */}
      <section className="py-28 px-6 bg-zinc-100">

        <div className="max-w-7xl mx-auto">

          <div className="text-center mb-20">
            <h2 className="text-5xl md:text-6xl font-black text-slate-900">
              Digital Infrastructure
            </h2>
          </div>

          <div className="grid md:grid-cols-2 gap-10">

            {/* CARD 1 */}
            <div className="bg-white rounded-[35px] overflow-hidden shadow-2xl border border-zinc-200">

              <img
                src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=1400&auto=format&fit=crop"
                className="h-72 w-full object-cover"
              />

              <div className="p-10">

                <h3 className="text-3xl font-black text-slate-900 mb-6">
                  AI Media Systems
                </h3>

                <p className="text-[14px] leading-relaxed text-zinc-700">
                  Automated production of digital content, advertising creatives,
                  viral media assets and scalable acquisition campaigns.
                </p>

              </div>
            </div>

            {/* CARD 2 */}
            <div className="bg-white rounded-[35px] overflow-hidden shadow-2xl border border-zinc-200">

              <img
                src="https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?q=80&w=1400&auto=format&fit=crop"
                className="h-72 w-full object-cover"
              />

              <div className="p-10">

                <h3 className="text-3xl font-black text-slate-900 mb-6">
                  Ecommerce Growth
                </h3>

                <p className="text-[14px] leading-relaxed text-zinc-700">
                  Scalable ecommerce ecosystems supported by automation,
                  international payments and performance marketing infrastructure.
                </p>

              </div>
            </div>

            {/* CARD 3 */}
            <div className="bg-white rounded-[35px] overflow-hidden shadow-2xl border border-zinc-200">

              <img
                src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=1400&auto=format&fit=crop"
                className="h-72 w-full object-cover"
              />

              <div className="p-10">

                <h3 className="text-3xl font-black text-slate-900 mb-6">
                  International Strategy
                </h3>

                <p className="text-[14px] leading-relaxed text-zinc-700">
                  Connecting Latin American digital expansion opportunities
                  with strategic investors and global partnerships.
                </p>

              </div>
            </div>

            {/* CARD 4 */}
            <div className="bg-white rounded-[35px] overflow-hidden shadow-2xl border border-zinc-200">

              <img
                src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1400&auto=format&fit=crop"
                className="h-72 w-full object-cover"
              />

              <div className="p-10">

                <h3 className="text-3xl font-black text-slate-900 mb-6">
                  Digital Expansion
                </h3>

                <p className="text-[14px] leading-relaxed text-zinc-700">
                  Long-term positioning focused on scalable audience acquisition,
                  branding and modern technology infrastructure.
                </p>

              </div>
            </div>

          </div>
        </div>
      </section>

      {/* ROADMAP */}
      <section className="py-28 px-6 bg-white">

        <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">

          {/* CONTENT */}
          <div>

            <h2 className="text-5xl md:text-6xl font-black text-slate-900 leading-tight mb-10">
              Expansion Roadmap
            </h2>

            <div className="bg-zinc-100 rounded-[35px] p-10 shadow-xl border border-zinc-200">

              <p className="text-[14px] leading-[2] text-zinc-700">
                MarketSeven begins by developing AI-driven content systems,
                digital acquisition infrastructure and scalable online commerce strategies.
                The first stage focuses on audience growth, media positioning and
                monetization through modern digital ecosystems. The second phase expands
                into automated ecommerce operations, international payment systems and
                performance marketing. Long-term objectives include regional expansion
                throughout Latin America, strategic partnerships with international
                investors and the development of proprietary digital infrastructure
                capable of supporting scalable global operations.
              </p>

            </div>
          </div>

          {/* IMAGE */}
          <div>
            <img
              src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?q=80&w=1400&auto=format&fit=crop"
              className="rounded-[40px] shadow-2xl w-full h-[650px] object-cover"
            />
          </div>

        </div>
      </section>

      {/* INVESTMENT */}
      <section className="py-28 px-6 bg-zinc-950 text-white">

        <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">

          {/* IMAGE */}
          <div>
            <img
              src="https://images.unsplash.com/photo-1526628953301-3e589a6a8b74?q=80&w=1400&auto=format&fit=crop"
              className="rounded-[40px] shadow-2xl w-full h-[650px] object-cover"
            />
          </div>

          {/* CONTENT */}
          <div>

            <h2 className="text-5xl md:text-6xl font-black text-white leading-tight mb-10">
              Strategic Support
            </h2>

            <div className="space-y-6">

              <div className="bg-white/5 backdrop-blur-md border border-white/10 rounded-[30px] p-8 shadow-xl">
                <p className="text-[14px] leading-relaxed text-gray-300">
                  MarketSeven welcomes strategic support from investors,
                  partners and contributors interested in scalable AI commerce infrastructure.
                </p>
              </div>

              <div className="bg-white/5 backdrop-blur-md border border-white/10 rounded-[30px] p-8 shadow-xl">
                <p className="text-[14px] leading-relaxed text-gray-300">
                  USDT contributions simplify international participation while supporting
                  technology development, digital infrastructure and expansion operations.
                </p>
              </div>

              <div className="bg-black border border-white/10 rounded-[30px] p-8 shadow-xl">

                <h3 className="text-2xl font-black text-orange-400 mb-6">
                  USDT Wallet
                </h3>

                <div className="bg-zinc-900 border border-white/10 rounded-2xl p-6 break-all text-[14px] text-gray-300 leading-relaxed">
                  TRC20 Wallet Address:
                  <br /><br />
                  TXf4ExampleWalletAddressReplaceLater7890
                </div>

              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CONTACT */}
      <section className="py-24 px-6 bg-white">

        <div className="max-w-5xl mx-auto text-center">

          <h2 className="text-5xl md:text-6xl font-black text-slate-900 mb-10">
            Contact MarketSeven
          </h2>

          <div className="bg-zinc-100 border border-zinc-200 rounded-[35px] p-12 shadow-xl">

            <p className="text-[14px] leading-relaxed text-zinc-700 mb-10 max-w-2xl mx-auto">
              MarketSeven is open to international strategic partnerships,
              investment conversations and long-term business collaborations.
            </p>

            <div className="flex flex-col md:flex-row gap-5 justify-center">

              <button className="bg-slate-900 text-white px-8 py-4 rounded-2xl font-semibold hover:scale-105 transition-all duration-300">
                hello@marketseven.com
              </button>

              <button className="border border-zinc-300 px-8 py-4 rounded-2xl font-semibold hover:bg-zinc-200 transition-all duration-300">
                Investor Presentation
              </button>

            </div>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="bg-zinc-950 border-t border-white/10 py-16 px-6">

        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-10">

          <div>

            <p className="text-gray-500 text-sm tracking-[0.2em] uppercase">
              AI Commerce • Latin America • International Expansion
            </p>

            <p className="text-gray-600 text-sm mt-4">
              © 2026 MarketSeven. All rights reserved.
            </p>

          </div>

          {/* FOOTER LOGO */}
          <div className="flex items-end justify-end">

            <img
              src={logoUrl}
              alt="MarketSeven Logo"
              className="w-[90px] md:w-[120px] object-contain opacity-95"
            />

          </div>

        </div>
      </footer>
    </div>
  );
}