rtrips-online/src/app/page.tsx

import Link from 'next/link'

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
      {/* Nav */}
      <nav className="border-b border-slate-700/50 backdrop-blur-sm">
        <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-gradient-to-br from-teal-400 to-cyan-500 rounded-lg flex items-center justify-center font-bold text-slate-900 text-sm">
              rT
            </div>
            <span className="font-semibold text-lg">rTrips</span>
          </div>
          <div className="flex items-center gap-4">
            <Link
              href="/demo"
              className="text-sm text-slate-300 hover:text-white transition-colors"
            >
              Demo
            </Link>
            <Link
              href="/trips"
              className="text-sm text-slate-300 hover:text-white transition-colors"
            >
              My Trips
            </Link>
            <Link
              href="/trips/new"
              className="text-sm px-4 py-2 bg-teal-600 hover:bg-teal-500 rounded-lg transition-colors font-medium"
            >
              Plan a Trip
            </Link>
          </div>
        </div>
      </nav>

      {/* Hero */}
      <section className="max-w-6xl mx-auto px-6 pt-20 pb-16">
        <div className="text-center max-w-3xl mx-auto">
          <h1 className="text-5xl font-bold mb-6 bg-gradient-to-r from-teal-300 via-cyan-300 to-blue-300 bg-clip-text text-transparent">
            Plan Your Trip, Naturally
          </h1>
          <p className="text-xl text-slate-300 mb-8 leading-relaxed">
            Describe your dream trip in plain language. We&apos;ll structure it into
            itineraries, budgets, and bookings &mdash; then give you a collaborative
            canvas to plan together in real-time.
          </p>
          <div className="flex items-center justify-center gap-4">
            <Link
              href="/trips/new"
              className="px-6 py-3 bg-teal-600 hover:bg-teal-500 rounded-xl text-lg font-medium transition-all shadow-lg shadow-teal-900/30"
            >
              Start Planning
            </Link>
            <Link
              href="/trips"
              className="px-6 py-3 bg-slate-700 hover:bg-slate-600 rounded-xl text-lg font-medium transition-all border border-slate-600"
            >
              My Trips
            </Link>
          </div>
        </div>
      </section>

      {/* How it Works */}
      <section className="max-w-6xl mx-auto px-6 py-16">
        <h2 className="text-3xl font-bold text-center mb-12">How It Works</h2>
        <div className="grid md:grid-cols-3 gap-8">
          {/* Describe */}
          <div className="bg-slate-800/50 rounded-2xl p-6 border border-slate-700/50">
            <div className="w-12 h-12 bg-teal-500/20 rounded-xl flex items-center justify-center mb-4">
              <svg className="w-6 h-6 text-teal-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
              </svg>
            </div>
            <h3 className="text-lg font-semibold mb-2">Describe It</h3>
            <p className="text-slate-400 text-sm leading-relaxed">
              Tell us about your trip in natural language. &ldquo;Fly from Toronto to Bali
              for 2 weeks in March, budget $3000.&rdquo; We parse it into structured data
              you can refine.
            </p>
          </div>

          {/* Structure */}
          <div className="bg-slate-800/50 rounded-2xl p-6 border border-slate-700/50">
            <div className="w-12 h-12 bg-cyan-500/20 rounded-xl flex items-center justify-center mb-4">
              <svg className="w-6 h-6 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
              </svg>
            </div>
            <h3 className="text-lg font-semibold mb-2">We Structure It</h3>
            <p className="text-slate-400 text-sm leading-relaxed">
              AI extracts destinations, dates, budgets, and bookings into organized views.
              Edit itineraries, track expenses, manage packing lists &mdash; all structured
              and searchable.
            </p>
          </div>

          {/* Collaborate */}
          <div className="bg-slate-800/50 rounded-2xl p-6 border border-slate-700/50">
            <div className="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center mb-4">
              <svg className="w-6 h-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
            </div>
            <h3 className="text-lg font-semibold mb-2">Collaborate on Canvas</h3>
            <p className="text-slate-400 text-sm leading-relaxed">
              Open the collaborative canvas to plan visually with your travel partners.
              Drag destinations, connect itineraries, and brainstorm together in real-time
              or async.
            </p>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="max-w-6xl mx-auto px-6 py-16 text-center">
        <h2 className="text-3xl font-bold mb-4">Ready to plan your next adventure?</h2>
        <p className="text-slate-400 mb-8 max-w-lg mx-auto">
          Just describe where you want to go. We&apos;ll handle the rest.
        </p>
        <Link
          href="/trips/new"
          className="inline-block px-8 py-4 bg-teal-600 hover:bg-teal-500 rounded-xl text-lg font-medium transition-all shadow-lg shadow-teal-900/30"
        >
          Plan a Trip
        </Link>
      </section>

      {/* Footer */}
      <footer className="border-t border-slate-700/50 py-8">
        <div className="max-w-6xl mx-auto px-6">
          <div className="flex flex-wrap items-center justify-center gap-4 text-sm text-slate-500 mb-4">
            <span className="font-medium text-slate-400">r* Ecosystem</span>
            <a href="https://rspace.online" className="hover:text-slate-300 transition-colors">🌌 rSpace</a>
            <a href="https://rmaps.online" className="hover:text-slate-300 transition-colors">🗺️ rMaps</a>
            <a href="https://rnotes.online" className="hover:text-slate-300 transition-colors">📝 rNotes</a>
            <a href="https://rvote.online" className="hover:text-slate-300 transition-colors">🗳️ rVote</a>
            <a href="https://rfunds.online" className="hover:text-slate-300 transition-colors">💰 rFunds</a>
            <a href="https://rtrips.online" className="hover:text-slate-300 transition-colors font-medium text-slate-300">✈️ rTrips</a>
            <a href="https://rcart.online" className="hover:text-slate-300 transition-colors">🛒 rCart</a>
            <a href="https://rwallet.online" className="hover:text-slate-300 transition-colors">💼 rWallet</a>
            <a href="https://rfiles.online" className="hover:text-slate-300 transition-colors">📁 rFiles</a>
            <a href="https://rinbox.online" className="hover:text-slate-300 transition-colors">✉️ rInbox</a>
            <a href="https://rnetwork.online" className="hover:text-slate-300 transition-colors">🌐 rNetwork</a>
          </div>
          <p className="text-center text-xs text-slate-600">
            Part of the r* ecosystem — collaborative tools for communities.
          </p>
        </div>
      </footer>
    </div>
  )
}