LandingPage.tsx

import { Link } from 'react-router-dom'
import {
  Scissors,
  Shield,
  Minimize2,
  ScanText,
  Image,
  Merge,
  ArrowRight,
  Layers,
  Upload,
  Wand2,
  Download,
  Gem,
  Pen,
  FileOutput,
} from 'lucide-react'

const tools = [
  { icon: Merge, name: 'Merge', desc: 'Combine multiple documents into one' },
  { icon: Scissors, name: 'Split', desc: 'Extract pages or divide by range' },
  { icon: Minimize2, name: 'Compress', desc: 'Shrink file size, keep quality' },
  { icon: Shield, name: 'Protect', desc: 'Encrypt with password protection' },
  { icon: ScanText, name: 'OCR', desc: 'Extract text from scanned pages' },
  { icon: Image, name: 'Convert', desc: 'PDF to image, image to PDF' },
  { icon: Pen, name: 'Annotate', desc: 'Draw, highlight, and add text' },
  { icon: FileOutput, name: 'Export', desc: 'Word, image, and format tools' },
]

const steps = [
  { num: '01', icon: Upload, title: 'Upload', body: 'Drop any PDF into your workspace. Stored securely under your account.' },
  { num: '02', icon: Wand2, title: 'Process', body: 'Pick a tool — merge, split, compress, protect, annotate, convert, and more.' },
  { num: '03', icon: Download, title: 'Download', body: 'Every operation creates a new file. Your originals are never modified.' },
]

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-[#050e18] text-slate-200 relative overflow-x-hidden">
      {/* ── CSS ─────────────────────────────────────────────── */}
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&display=swap');

        @keyframes reveal {
          from { opacity: 0; transform: translateY(24px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes fade {
          from { opacity: 0; }
          to   { opacity: 1; }
        }
        @keyframes rotate-slow {
          from { transform: rotate(0deg); }
          to   { transform: rotate(360deg); }
        }

        .anim-reveal { animation: reveal .8s cubic-bezier(.16,1,.3,1) both; }
        .anim-d1 { animation-delay: .08s; }
        .anim-d2 { animation-delay: .16s; }
        .anim-d3 { animation-delay: .24s; }
        .anim-d4 { animation-delay: .36s; }
        .anim-fade { animation: fade .6s ease both; }

        /* Dot grid texture */
        .dot-grid {
          background-image: radial-gradient(rgba(148,163,184,.07) 1px, transparent 1px);
          background-size: 24px 24px;
        }

        /* Crystal prism */
        .prism {
          width: clamp(240px, 75vw, 340px);
          height: clamp(240px, 75vw, 340px);
          position: relative;
        }
        .prism::before {
          content: '';
          position: absolute;
          inset: 0;
          background: conic-gradient(
            from 160deg,
            rgba(45,98,255,.18),
            rgba(96,165,250,.12),
            rgba(56,189,248,.08),
            rgba(45,98,255,.04),
            rgba(96,165,250,.14),
            rgba(45,98,255,.18)
          );
          clip-path: polygon(50% 4%, 93% 28%, 93% 72%, 50% 96%, 7% 72%, 7% 28%);
          animation: rotate-slow 40s linear infinite;
        }
        .prism::after {
          content: '';
          position: absolute;
          inset: 20px;
          background: conic-gradient(
            from 220deg,
            rgba(96,165,250,.1),
            transparent,
            rgba(56,189,248,.06),
            transparent,
            rgba(96,165,250,.1)
          );
          clip-path: polygon(50% 6%, 91% 29%, 91% 71%, 50% 94%, 9% 71%, 9% 29%);
          animation: rotate-slow 60s linear infinite reverse;
        }

        /* Feature card */
        .tool-card {
          background: rgba(255,255,255,.02);
          border: 1px solid rgba(255,255,255,.05);
          transition: all .25s ease;
        }
        .tool-card:hover {
          background: rgba(255,255,255,.04);
          border-color: rgba(96,165,250,.18);
          transform: translateY(-2px);
          box-shadow: 0 16px 48px -12px rgba(0,0,0,.5), 0 0 0 1px rgba(96,165,250,.08);
        }
      `}</style>

      {/* ── Ambient glow ───────────────────────────────────── */}
      <div className="fixed inset-0 pointer-events-none overflow-hidden" aria-hidden>
        <div className="absolute -top-[30%] left-1/2 -translate-x-1/2 w-[min(900px,100vw)] h-[min(900px,100vw)] rounded-full"
          style={{ background: 'radial-gradient(circle, rgba(45,98,255,.1) 0%, transparent 65%)' }} />
        <div className="absolute top-[55%] -right-[10%] w-[min(500px,80vw)] h-[min(500px,80vw)] rounded-full"
          style={{ background: 'radial-gradient(circle, rgba(56,189,248,.05) 0%, transparent 65%)' }} />
      </div>

      {/* ── Nav ────────────────────────────────────────────── */}
      <nav className="sticky top-0 z-50 backdrop-blur-xl border-b border-white/[.04]"
        style={{ background: 'rgba(5,14,24,.75)' }}>
        <div className="max-w-6xl mx-auto flex items-center justify-between px-4 sm:px-6 h-16">
          <Link to="/" className="flex items-center gap-2 sm:gap-2.5 group">
            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-400 flex items-center justify-center
                            shadow-lg shadow-brand-500/20 group-hover:shadow-brand-500/40 transition-shadow shrink-0">
              <Gem size={14} className="text-white" />
            </div>
            <span className="font-display text-base sm:text-lg font-semibold tracking-tight text-white">
              Crystal<span className="text-blue-400">PDF</span>
            </span>
          </Link>
          <div className="flex items-center gap-1.5 sm:gap-2">
            <Link to="/login"
              className="text-xs sm:text-sm text-slate-400 hover:text-white px-2.5 sm:px-4 py-2 transition-colors">
              Sign in
            </Link>
            <Link to="/register"
              className="text-xs sm:text-sm font-medium text-blue-300 bg-brand-500/15 hover:bg-brand-500/25
                         border border-brand-500/25 hover:border-brand-500/40
                         px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg transition-all whitespace-nowrap">
              Get started
            </Link>
          </div>
        </div>
      </nav>

      {/* ── Hero ───────────────────────────────────────────── */}
      <section className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6
                          pt-12 pb-16 md:pt-32 md:pb-36
                          grid md:grid-cols-[1fr,auto] items-center gap-8 md:gap-12">
        {/* Text column */}
        <div className="max-w-2xl text-center md:text-left mx-auto md:mx-0">
          <h1 className="font-display font-semibold tracking-tight leading-[1.1]
                         text-[clamp(2.2rem,5.5vw,4.8rem)] text-white anim-reveal">
            Every<br className="hidden sm:block" /> PDF tool<br className="hidden sm:block" /> you'll ever{' '}
            <em className="not-italic text-blue-400">need.</em>
          </h1>

          <p className="mt-5 sm:mt-7 text-[clamp(0.95rem,1.8vw,1.2rem)] leading-relaxed
                        text-slate-400 max-w-md mx-auto md:mx-0 anim-reveal anim-d2">
            Merge, split, compress, protect, convert, and annotate&nbsp;&mdash;
            from one elegant workspace. No subscriptions, no upload limits.
          </p>

          <div className="mt-8 sm:mt-10 flex flex-col sm:flex-row items-stretch sm:items-center justify-center md:justify-start gap-3 anim-reveal anim-d3">
            <Link to="/register"
              className="inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-xl text-[15px] font-medium
                         text-white bg-gradient-to-b from-brand-500 to-brand-600
                         shadow-[0_2px_24px_rgba(45,98,255,.35)]
                         hover:shadow-[0_4px_32px_rgba(45,98,255,.5)]
                         hover:-translate-y-px active:translate-y-0 transition-all">
              Start for free <ArrowRight size={15} strokeWidth={2.2} />
            </Link>
            <Link to="/login"
              className="inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-xl text-[15px] font-medium
                         text-slate-300 border border-white/10 hover:border-white/20
                         hover:bg-white/[.03] transition-all">
              Sign in to workspace
            </Link>
          </div>
        </div>

        {/* Crystal visual */}
        <div className="flex items-center justify-center my-4 md:my-0 anim-fade anim-d4">
          <div className="prism">
            {/* Inner facets */}
            <div className="absolute inset-0 flex items-center justify-center">
              <Layers size={40} className="text-blue-400/30 md:w-12 md:h-12" strokeWidth={1} />
            </div>
          </div>
        </div>
      </section>

      {/* ── Tools grid ─────────────────────────────────────── */}
      <section className="relative z-10 dot-grid">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-24 md:py-32">
          {/* Section header */}
          <div className="max-w-lg mb-10 sm:mb-14 text-center md:text-left mx-auto md:mx-0">
            <p className="text-xs font-medium tracking-[.15em] uppercase text-brand-400 mb-3 sm:mb-4">
              Toolkit
            </p>
            <h2 className="font-display text-[clamp(1.8rem,4.5vw,3.5rem)] font-semibold
                           tracking-tight leading-[1.05] text-white">
              Everything in<br className="hidden sm:block" /> one workspace
            </h2>
            <p className="mt-3 sm:mt-4 text-slate-500 leading-relaxed text-sm sm:text-[15px]">
              Every operation produces a new file — your originals stay untouched.
            </p>
          </div>

          {/* Grid: 1 col on small phones, 2 on mobile, 4 on desktop */}
          <div className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4">
            {tools.map((t) => (
              <div key={t.name} className="tool-card rounded-2xl p-4 sm:p-5 cursor-default group">
                <div className="w-10 h-10 rounded-xl bg-blue-400/[.08] border border-blue-400/[.12]
                                flex items-center justify-center mb-3 sm:mb-4
                                group-hover:bg-blue-400/[.12] group-hover:border-blue-400/[.2]
                                transition-colors">
                  <t.icon size={18} className="text-blue-400" strokeWidth={1.8} />
                </div>
                <p className="text-[15px] font-semibold text-white tracking-tight mb-1">
                  {t.name}
                </p>
                <p className="text-[13px] text-slate-500 leading-snug">
                  {t.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── How it works ───────────────────────────────────── */}
      <section className="relative z-10 border-t border-white/[.04]">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 py-16 sm:py-24 md:py-32">
          <div className="text-center max-w-lg mx-auto mb-12 sm:mb-16">
            <p className="text-xs font-medium tracking-[.15em] uppercase text-brand-400 mb-3 sm:mb-4">
              How it works
            </p>
            <h2 className="font-display text-[clamp(1.8rem,4.5vw,3.5rem)] font-semibold
                           tracking-tight leading-[1.05] text-white">
              Three steps, that's it
            </h2>
          </div>

          <div className="flex flex-col gap-0">
            {steps.map((s, i) => (
              <div key={s.num}>
                {/* Step row */}
                <div className="flex items-start gap-4 sm:gap-5">
                  {/* Left: number + icon */}
                  <div className="flex flex-col items-center">
                    <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl flex items-center justify-center
                                    bg-brand-500/10 border border-brand-500/20 shrink-0">
                      <s.icon size={18} className="text-blue-400 sm:w-5 sm:h-5" strokeWidth={1.6} />
                    </div>
                  </div>

                  {/* Right: text */}
                  <div className="pt-0.5 sm:pt-1">
                    <p className="text-xs font-medium text-brand-400/60 tracking-wider mb-1">
                      Step {s.num}
                    </p>
                    <h3 className="text-base font-semibold text-white tracking-tight mb-1.5">
                      {s.title}
                    </h3>
                    <p className="text-sm text-slate-500 leading-relaxed max-w-sm">
                      {s.body}
                    </p>
                  </div>
                </div>

                {/* Connector between steps */}
                {i < steps.length - 1 && (
                  <div className="flex items-stretch gap-4 sm:gap-5 py-1">
                    <div className="w-10 sm:w-12 flex justify-center shrink-0">
                      <div className="w-px h-8 bg-gradient-to-b from-brand-500/20 to-transparent" />
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CTA ────────────────────────────────────────────── */}
      <section className="relative z-10 border-t border-white/[.04]">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-20 sm:py-28 md:py-36 text-center">
          {/* Soft top glow */}
          <div className="absolute inset-x-0 top-0 h-64 pointer-events-none"
            style={{ background: 'radial-gradient(ellipse 50% 100% at 50% 0%, rgba(45,98,255,.06), transparent)' }} />

          <p className="text-xs sm:text-sm text-slate-500 mb-3 sm:mb-4 relative">
            Free to use. No credit card required.
          </p>
          <h2 className="font-display text-[clamp(2rem,5.5vw,4.5rem)] font-semibold
                         tracking-tight leading-[1.0] text-white mb-8 sm:mb-10 relative">
            Start working with<br />
            your PDFs today.
          </h2>
          <div className="relative flex flex-col sm:flex-row justify-center items-center gap-3 max-w-sm sm:max-w-none mx-auto">
            <Link to="/register"
              className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl text-[15px] font-medium
                         text-white bg-gradient-to-b from-brand-500 to-brand-600
                         shadow-[0_2px_24px_rgba(45,98,255,.35)]
                         hover:shadow-[0_4px_32px_rgba(45,98,255,.5)]
                         hover:-translate-y-px transition-all">
              Create free account <ArrowRight size={15} strokeWidth={2.2} />
            </Link>
            <Link to="/login"
              className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl text-[15px] font-medium
                         text-slate-400 hover:text-slate-200 transition-colors">
              or sign in
            </Link>
          </div>
        </div>
      </section>

      {/* ── Footer ─────────────────────────────────────────── */}
      <footer className="relative z-10 border-t border-white/[.04]">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-6 sm:py-8 flex flex-col sm:flex-row items-center justify-between text-center sm:text-left gap-3 sm:gap-4">
          <span className="font-display text-sm font-semibold text-slate-600">
            Crystal<span className="text-blue-400/50">PDF</span>
          </span>
          <p className="text-xs text-slate-700">
            Secure, server-side processing. Your files never leave your account.
          </p>
        </div>
      </footer>
    </div>
  )
}