export default function TradeSourceLandingPage() {
  return (
    <div className="min-h-screen bg-slate-50 text-slate-900">
      {/* Sticky Header */}
      <header className="sticky top-0 z-50 border-b border-slate-200 bg-white/95 backdrop-blur">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
          <div>
            <div className="text-2xl font-bold tracking-tight text-slate-900">TradeSource<span className="text-orange-500">.uk</span></div>
            <div className="text-xs uppercase tracking-[0.2em] text-slate-500">Dealer demand sourcing • Trade buyers only</div>
          </div>
          <div className="hidden gap-3 md:flex">
            <button className="rounded-2xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-100">
              Get Matched
            </button>
            <button className="rounded-2xl bg-orange-500 px-5 py-2 text-sm font-semibold text-white shadow-lg transition hover:opacity-90">
              WhatsApp My Buy List
            </button>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
        <div className="absolute inset-0 opacity-10" style={{ backgroundImage: "radial-gradient(circle at 20% 20%, #f97316 0, transparent 25%), radial-gradient(circle at 80% 30%, #38bdf8 0, transparent 20%)" }} />
        <div className="relative mx-auto grid max-w-7xl gap-12 px-6 py-20 md:grid-cols-2 md:items-center md:py-28">
          <div>
            <div className="mb-4 inline-flex rounded-full border border-orange-400/30 bg-orange-500/10 px-4 py-1 text-sm font-medium text-orange-300">
              Built for independent motor dealers
            </div>
            <h1 className="max-w-2xl text-4xl font-bold leading-tight md:text-6xl">
              Stop hunting.<br />
              Send your buy list.<br />
              <span className="text-orange-400">I’ll source what you actually need.</span>
            </h1>
            <p className="mt-6 max-w-xl text-lg leading-8 text-slate-300">
              TradeSource.uk is a dealer-facing sourcing desk for independent forecourt dealers and home-based traders in Reading, Berkshire and Hampshire.
              You tell me your criteria. I return matched vehicles with all-in trade prices you can accept or ignore.
            </p>

            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
              <button className="rounded-2xl bg-orange-500 px-6 py-4 text-base font-semibold text-white shadow-xl transition hover:opacity-90">
                WhatsApp My Buy List
              </button>
              <button className="rounded-2xl border border-white/20 bg-white/10 px-6 py-4 text-base font-semibold text-white transition hover:bg-white/15">
                Get Matched in 30 Seconds
              </button>
            </div>

            <div className="mt-8 grid max-w-xl grid-cols-2 gap-3 text-sm text-slate-300 md:grid-cols-3">
              <div className="rounded-2xl border border-white/10 bg-white/5 p-3">Demand-sourcing</div>
              <div className="rounded-2xl border border-white/10 bg-white/5 p-3">All-in trade price</div>
              <div className="rounded-2xl border border-white/10 bg-white/5 p-3">Trade buyers only</div>
              <div className="rounded-2xl border border-white/10 bg-white/5 p-3">No subscriptions</div>
              <div className="rounded-2xl border border-white/10 bg-white/5 p-3">No spam stock alerts</div>
              <div className="rounded-2xl border border-white/10 bg-white/5 p-3">Fast WhatsApp replies</div>
            </div>
          </div>

          <div className="rounded-[2rem] border border-white/10 bg-white/10 p-6 shadow-2xl backdrop-blur">
            <div className="mb-4 text-sm font-semibold uppercase tracking-[0.2em] text-orange-300">WhatsApp Buy List Example</div>
            <div className="rounded-3xl bg-slate-950 p-5 text-sm text-slate-100 shadow-inner">
              <p className="font-semibold text-green-400">BUY LIST</p>
              <div className="mt-4 space-y-2 text-slate-300">
                <p>1) Postcode: RG1</p>
                <p>2) Buying: Hybrid hatch / small SUV</p>
                <p>3) Budget: £6,000–£11,000</p>
                <p>4) Max miles: 85k</p>
                <p>5) Must-haves: FSH, 2 keys, ULEZ</p>
                <p>6) Avoid list: French diesel, CAT S</p>
              </div>
            </div>
            <div className="mt-5 rounded-3xl bg-white p-5 text-sm text-slate-700 shadow-lg">
              <p className="font-semibold text-slate-900">✅ Match Found</p>
              <div className="mt-3 space-y-2">
                <p>2019 Toyota Corolla Hybrid Auto</p>
                <p>68k miles • FSH • 2 keys • ULEZ</p>
                <p className="text-lg font-bold text-orange-500">All-in trade: £10,400</p>
                <p className="text-slate-500">Reply: YES / PASS / TIGHTEN</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Problem Section */}
      <section className="mx-auto max-w-7xl px-6 py-20">
        <div className="mx-auto max-w-4xl text-center">
          <div className="text-sm font-semibold uppercase tracking-[0.25em] text-orange-500">The real problem</div>
          <h2 className="mt-4 text-3xl font-bold md:text-5xl">You don’t have a stock problem.<br />You have a time-and-noise problem.</h2>
          <p className="mx-auto mt-6 max-w-3xl text-lg leading-8 text-slate-600">
            Most dealers waste hours on sourcing theatre — scrolling auctions for near-misses, chasing vague sellers, and getting buried in stock alerts that do not match what they actually retail.
          </p>
        </div>

        <div className="mt-12 grid gap-6 md:grid-cols-3">
          {[
            ["Auction noise", "Too many cars. Too few real fits."],
            ["Time drain", "Hours lost to maybes and near-misses."],
            ["Margin fog", "Bad stock burns time and squeezes profit."],
          ].map(([title, body]) => (
            <div key={title} className="rounded-[2rem] border border-slate-200 bg-white p-8 shadow-sm">
              <h3 className="text-xl font-semibold">{title}</h3>
              <p className="mt-3 text-slate-600">{body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Mechanism */}
      <section className="bg-white py-20">
        <div className="mx-auto grid max-w-7xl gap-10 px-6 md:grid-cols-2 md:items-center">
          <div>
            <div className="text-sm font-semibold uppercase tracking-[0.25em] text-orange-500">The mechanism</div>
            <h2 className="mt-4 text-3xl font-bold md:text-5xl">You set the buying rules.<br />I source inside them.</h2>
            <p className="mt-6 text-lg leading-8 text-slate-600">
              You send one message with criteria, budget, must-haves and your avoid list. TradeSource uses a trade supply route to find vehicles that fit your actual demand.
            </p>
            <div className="mt-8 space-y-4">
              {[
                "3-second summary of each match",
                "All-in trade price for fast yes/no decisions",
                "No random stock dumps or long-winded pitches",
              ].map((item) => (
                <div key={item} className="flex items-start gap-3">
                  <div className="mt-1 h-3 w-3 rounded-full bg-orange-500" />
                  <p className="text-slate-700">{item}</p>
                </div>
              ))}
            </div>
          </div>
          <div className="rounded-[2rem] border border-slate-200 bg-slate-50 p-8 shadow-lg">
            <div className="grid gap-4 md:grid-cols-3">
              {[
                ["1", "Send buy list"],
                ["2", "Receive matches"],
                ["3", "YES or PASS"],
              ].map(([num, label]) => (
                <div key={num} className="rounded-3xl bg-white p-6 text-center shadow-sm">
                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-orange-500 text-lg font-bold text-white">{num}</div>
                  <div className="mt-4 font-semibold text-slate-900">{label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Benefits */}
      <section className="mx-auto max-w-7xl px-6 py-20">
        <div className="flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
          <div>
            <div className="text-sm font-semibold uppercase tracking-[0.25em] text-orange-500">Why it works</div>
            <h2 className="mt-3 text-3xl font-bold md:text-5xl">Why hard negotiators stick with this model</h2>
          </div>
          <p className="max-w-2xl text-lg text-slate-600">
            This is built for dealers who value speed, control and margin. Not chatter. Not fluff. Not random cars.
          </p>
        </div>

        <div className="mt-12 grid gap-6 md:grid-cols-2 xl:grid-cols-3">
          {[
            ["Less waste", "You stop drowning in irrelevant stock."],
            ["Cleaner decisions", "A number and a decision point. Nothing more."],
            ["Margin-first", "If it does not stack after prep, you ignore it."],
            ["Control", "You define spec, mileage, fuel, history and avoid list."],
            ["No list spam", "Only cars that match your criteria get sent."],
            ["Local awareness", "Tuned to what sells in your area."],
          ].map(([title, body]) => (
            <div key={title} className="rounded-[2rem] border border-slate-200 bg-white p-8 shadow-sm">
              <h3 className="text-xl font-semibold">{title}</h3>
              <p className="mt-3 text-slate-600">{body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Objections */}
      <section className="bg-slate-900 py-20 text-white">
        <div className="mx-auto max-w-7xl px-6">
          <div className="text-sm font-semibold uppercase tracking-[0.25em] text-orange-400">Objections answered</div>
          <h2 className="mt-4 text-3xl font-bold md:text-5xl">Straight answers for hardened buyers</h2>

          <div className="mt-12 grid gap-6 md:grid-cols-2">
            {[
              ["Are you just adding money on?", "You get one all-in trade price. If the margin works, buy. If not, pass."],
              ["Will you spam me with random cars?", "No. This is demand sourcing. Only matches to your criteria."],
              ["How fast can you source?", "Common stock can often be same day or within 48 hours. Niche stock takes longer."],
              ["What if the car isn’t as described?", "Ask the questions before committing. You stay in control throughout."],
            ].map(([q, a]) => (
              <div key={q} className="rounded-[2rem] border border-white/10 bg-white/5 p-8 backdrop-blur">
                <h3 className="text-xl font-semibold text-white">{q}</h3>
                <p className="mt-3 text-slate-300">{a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="relative overflow-hidden bg-white py-24">
        <div className="mx-auto max-w-5xl px-6 text-center">
          <div className="inline-flex rounded-full border border-orange-200 bg-orange-50 px-4 py-1 text-sm font-semibold uppercase tracking-[0.2em] text-orange-600">
            Final step
          </div>
          <h2 className="mt-6 text-4xl font-bold md:text-6xl">If you’re serious about stock,<br />send your buy list now.</h2>
          <p className="mx-auto mt-6 max-w-3xl text-lg leading-8 text-slate-600">
            You already know what you need. The fastest win is to send your criteria and let TradeSource do the hunting.
          </p>

          <div className="mt-10 rounded-[2rem] border border-slate-200 bg-slate-50 p-8 shadow-lg">
            <div className="grid gap-6 md:grid-cols-2">
              <div className="rounded-[1.5rem] bg-white p-6 text-left shadow-sm">
                <h3 className="text-xl font-semibold">Dealer Standards</h3>
                <ul className="mt-4 space-y-3 text-slate-600">
                  <li>• I don’t waste your time</li>
                  <li>• I don’t send irrelevant stock</li>
                  <li>• I don’t argue with your margin maths</li>
                  <li>• I send the number and let you decide</li>
                </ul>
              </div>
              <div className="rounded-[1.5rem] bg-slate-900 p-6 text-left text-white shadow-sm">
                <h3 className="text-xl font-semibold">Contact TradeSource</h3>
                <div className="mt-4 space-y-3 text-slate-300">
                  <p>WhatsApp: Your number here</p>
                  <p>Email: hello@tradesource.uk</p>
                  <p>Location: Reading, Berkshire</p>
                  <p className="pt-2 text-sm text-slate-400">Trade buyers only • Fast replies • No subscriptions</p>
                </div>
                <button className="mt-6 w-full rounded-2xl bg-orange-500 px-5 py-4 text-base font-semibold text-white shadow-xl transition hover:opacity-90">
                  WhatsApp My Buy List
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}