/**
 * Design System Showcase
 *
 * This component demonstrates the Xpeditis brand colors and typography
 * Delete this file once you understand the design system
 */

export function DesignSystemShowcase() {
  return (
    <div className="min-h-screen bg-white">
      {/* Color Palette */}
      <section className="py-16 px-8">
        <h1 className="mb-8">Xpeditis Color Palette</h1>

        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
          {/* Navy Blue */}
          <div>
            <div className="bg-brand-navy h-32 rounded-lg shadow-lg mb-3"></div>
            <h4 className="mb-1">Navy Blue</h4>
            <p className="text-body-sm text-neutral-600">#10183A</p>
            <p className="text-body-xs text-neutral-500">Primary color for headers, titles</p>
          </div>

          {/* Turquoise */}
          <div>
            <div className="bg-brand-turquoise h-32 rounded-lg shadow-lg mb-3"></div>
            <h4 className="mb-1">Turquoise</h4>
            <p className="text-body-sm text-neutral-600">#34CCCD</p>
            <p className="text-body-xs text-neutral-500">Accent color for CTAs, links</p>
          </div>

          {/* Green */}
          <div>
            <div className="bg-brand-green h-32 rounded-lg shadow-lg mb-3"></div>
            <h4 className="mb-1">Green</h4>
            <p className="text-body-sm text-neutral-600">#067224</p>
            <p className="text-body-xs text-neutral-500">Success states, confirmations</p>
          </div>

          {/* Light Gray */}
          <div>
            <div className="bg-brand-gray border border-neutral-300 h-32 rounded-lg shadow-lg mb-3"></div>
            <h4 className="mb-1">Light Gray</h4>
            <p className="text-body-sm text-neutral-600">#F2F2F2</p>
            <p className="text-body-xs text-neutral-500">Backgrounds, sections</p>
          </div>

          {/* White */}
          <div>
            <div className="bg-white border border-neutral-300 h-32 rounded-lg shadow-lg mb-3"></div>
            <h4 className="mb-1">White</h4>
            <p className="text-body-sm text-neutral-600">#FFFFFF</p>
            <p className="text-body-xs text-neutral-500">Main backgrounds, cards</p>
          </div>
        </div>
      </section>

      {/* Typography - Manrope (Headings) */}
      <section className="bg-brand-gray py-16 px-8">
        <h2 className="mb-8">Typography - Manrope (Headings)</h2>

        <div className="bg-white rounded-lg p-8 shadow-md space-y-6">
          <div>
            <p className="text-label mb-2">DISPLAY LARGE (72PX)</p>
            <h1 className="text-display-lg">Shipping Excellence</h1>
          </div>

          <div>
            <p className="text-label mb-2">HEADING 1 (40PX)</p>
            <h1>Maritime Freight Solutions</h1>
          </div>

          <div>
            <p className="text-label mb-2">HEADING 2 (32PX)</p>
            <h2>Track Your Shipments</h2>
          </div>

          <div>
            <p className="text-label mb-2">HEADING 3 (24PX)</p>
            <h3>Real-Time Updates</h3>
          </div>

          <div>
            <p className="text-label mb-2">HEADING 4 (20PX)</p>
            <h4>Book Your Container</h4>
          </div>

          <div>
            <p className="text-label mb-2">HEADING 5 (18PX)</p>
            <h5>Instant Quotes</h5>
          </div>

          <div>
            <p className="text-label mb-2">HEADING 6 (16PX)</p>
            <h6>Global Coverage</h6>
          </div>
        </div>
      </section>

      {/* Typography - Montserrat (Body) */}
      <section className="py-16 px-8">
        <h2 className="mb-8">Typography - Montserrat (Body Text)</h2>

        <div className="bg-white rounded-lg p-8 shadow-md space-y-6">
          <div>
            <p className="text-label mb-2">BODY LARGE (18PX)</p>
            <p className="text-body-lg">
              Xpeditis is a B2B SaaS maritime freight booking and management platform that allows
              freight forwarders to search and compare real-time shipping rates.
            </p>
          </div>

          <div>
            <p className="text-label mb-2">BODY REGULAR (16PX)</p>
            <p className="text-body">
              Book containers online and manage shipments from a centralized dashboard with
              comprehensive tracking and reporting features.
            </p>
          </div>

          <div>
            <p className="text-label mb-2">BODY SMALL (14PX)</p>
            <p className="text-body-sm">
              Get instant quotes from multiple carriers and choose the best option for your shipping
              needs.
            </p>
          </div>

          <div>
            <p className="text-label mb-2">BODY EXTRA SMALL (12PX)</p>
            <p className="text-body-xs">
              Supporting documentation and terms of service available upon request.
            </p>
          </div>
        </div>
      </section>

      {/* Buttons */}
      <section className="bg-brand-gray py-16 px-8">
        <h2 className="mb-8">Button Styles</h2>

        <div className="bg-white rounded-lg p-8 shadow-md">
          <div className="flex flex-wrap gap-4">
            <button className="btn-primary">Primary Button</button>
            <button className="btn-secondary">Secondary Button</button>
            <button className="btn-success">Success Button</button>
            <button className="btn-outline">Outline Button</button>
          </div>

          <div className="mt-8 p-6 bg-brand-navy rounded-lg">
            <h4 className="text-white mb-4">On Dark Background</h4>
            <div className="flex flex-wrap gap-4">
              <button className="bg-brand-turquoise text-white font-heading font-semibold px-6 py-3 rounded-lg hover:bg-brand-turquoise/90 transition-colors">
                Primary on Dark
              </button>
              <button className="bg-white text-brand-navy font-heading font-semibold px-6 py-3 rounded-lg hover:bg-neutral-100 transition-colors">
                White Button
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Cards & Badges */}
      <section className="py-16 px-8">
        <h2 className="mb-8">Cards & Badges</h2>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {/* Booking Card */}
          <div className="card">
            <h3 className="card-header">Booking WCM-2024-ABC123</h3>
            <div className="space-y-3">
              <div>
                <span className="label">STATUS</span>
                <span className="badge-success ml-2">CONFIRMED</span>
              </div>
              <div>
                <span className="label">ROUTE</span>
                <p className="text-body mt-1">Le Havre → Shanghai</p>
              </div>
              <div>
                <span className="label">TRANSIT TIME</span>
                <p className="text-body mt-1">28 days</p>
              </div>
              <button className="btn-primary w-full mt-4">View Details</button>
            </div>
          </div>

          {/* Rate Quote Card */}
          <div className="card">
            <h3 className="card-header">Rate Quote</h3>
            <div className="space-y-3">
              <div>
                <span className="label">CARRIER</span>
                <p className="text-body mt-1 font-semibold">MAERSK LINE</p>
              </div>
              <div>
                <span className="label">TOTAL PRICE</span>
                <p className="text-h3 text-brand-turquoise mt-1">$1,245 USD</p>
              </div>
              <div>
                <span className="badge-info">Best Rate</span>
                <span className="badge-success ml-2">Available</span>
              </div>
              <button className="btn-secondary w-full mt-4">Book Now</button>
            </div>
          </div>

          {/* Tracking Card */}
          <div className="card">
            <h3 className="card-header">Shipment Tracking</h3>
            <div className="space-y-3">
              <div>
                <span className="label">CONTAINER</span>
                <p className="text-body mt-1 font-mono font-semibold">MSKU1234567</p>
              </div>
              <div>
                <span className="label">CURRENT LOCATION</span>
                <p className="text-body mt-1">Port of Rotterdam</p>
              </div>
              <div>
                <span className="badge-info">In Transit</span>
              </div>
              <button className="btn-primary w-full mt-4">Track</button>
            </div>
          </div>
        </div>
      </section>

      {/* Form Elements */}
      <section className="bg-brand-gray py-16 px-8">
        <h2 className="mb-8">Form Elements</h2>

        <div className="bg-white rounded-lg p-8 shadow-md max-w-2xl">
          <form className="space-y-6">
            <div>
              <label className="label">Origin Port</label>
              <input type="text" className="input w-full" placeholder="e.g., Le Havre (FRFOS)" />
            </div>

            <div>
              <label className="label">Destination Port</label>
              <input type="text" className="input w-full" placeholder="e.g., Shanghai (CNSHA)" />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="label">Volume (CBM)</label>
                <input type="number" className="input w-full" placeholder="0.00" />
              </div>
              <div>
                <label className="label">Weight (KG)</label>
                <input type="number" className="input w-full" placeholder="0.00" />
              </div>
            </div>

            <div className="flex gap-4">
              <button type="submit" className="btn-primary flex-1">
                Search Rates
              </button>
              <button type="reset" className="btn-outline">
                Reset
              </button>
            </div>
          </form>
        </div>
      </section>

      {/* Navy Section Example */}
      <section className="section-navy">
        <div className="container mx-auto px-8 text-center">
          <h2 className="text-white mb-6">Ready to Get Started?</h2>
          <p className="text-body-lg text-neutral-200 max-w-2xl mx-auto mb-8">
            Join thousands of freight forwarders who trust Xpeditis for their maritime shipping
            needs.
          </p>
          <div className="flex gap-4 justify-center">
            <button className="bg-brand-turquoise text-white font-heading font-semibold px-8 py-4 rounded-lg hover:bg-brand-turquoise/90 transition-colors text-lg">
              Start Free Trial
            </button>
            <button className="bg-white text-brand-navy font-heading font-semibold px-8 py-4 rounded-lg hover:bg-neutral-100 transition-colors text-lg">
              Contact Sales
            </button>
          </div>
        </div>
      </section>

      {/* Links */}
      <section className="py-16 px-8">
        <h2 className="mb-8">Links & Interactive Elements</h2>

        <div className="bg-white rounded-lg p-8 shadow-md space-y-4">
          <p className="text-body">
            Check out our{' '}
            <a href="#" className="link">
              documentation
            </a>{' '}
            for more information about our{' '}
            <a href="#" className="link">
              API endpoints
            </a>
            .
          </p>

          <p className="text-body">
            Need help?{' '}
            <a href="#" className="link">
              Contact our support team
            </a>{' '}
            or read our{' '}
            <a href="#" className="link">
              FAQ section
            </a>
            .
          </p>
        </div>
      </section>
    </div>
  );
}