export default function TygetaLandingPage() {
  return (
    <div className="min-h-screen bg-black text-white font-sans">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.08),transparent_35%),radial-gradient(circle_at_bottom_right,rgba(255,255,255,0.05),transparent_30%)]" />

      <div className="relative z-10 mx-auto flex min-h-screen max-w-7xl flex-col px-6 py-10 md:px-10 lg:px-16">
        <header className="flex items-center justify-between border-b border-white/10 pb-6">
          <div className="flex items-center gap-4">
            <img
              src="/tygeta-logo.png"
              alt="Tygeta logo"
              className="h-12 w-12 object-contain"
            />
            <div>
              <div className="text-xs uppercase tracking-[0.55em] text-white/55">Tygeta</div>
              <div className="text-[11px] uppercase tracking-[0.3em] text-white/35">Audio Tools</div>
            </div>
          </div>
          <a
            href="#notify"
            className="rounded-full border border-white/15 bg-white/5 px-5 py-2 text-xs uppercase tracking-[0.3em] text-white/80 transition hover:bg-white/10"
          >
            Early Access
          </a>
        </header>

        <main className="flex flex-1 items-center py-16 md:py-24">
          <div className="grid w-full gap-12 lg:grid-cols-[1.2fr_0.8fr] lg:gap-16">
            <section className="flex flex-col justify-center">
              <div className="mb-6 inline-flex w-fit items-center rounded-full border border-white/10 bg-white/5 px-4 py-2 text-[11px] uppercase tracking-[0.3em] text-white/60 backdrop-blur-sm">
                Coming Soon
              </div>

              <h1 className="max-w-4xl text-5xl font-medium leading-[1.05] tracking-tight md:text-7xl">
                Precision audio tools,
                <span className="block text-white/70">built for creators who hear the difference.</span>
              </h1>

              <p className="mt-8 max-w-2xl text-base leading-8 text-white/65 md:text-lg">
                Tygeta is a new premium platform for modern music workflows, designed for producers,
                DJs, and creators who need speed, control, and studio-grade output without the clutter.
              </p>

              <p className="mt-5 max-w-2xl text-sm leading-7 text-white/45 md:text-base">
                Built with an artist’s perspective and shaped for real-world use, Tygeta is focused on
                giving creators cleaner, faster ways to work with audio.
              </p>

              <div className="mt-10 flex flex-wrap gap-4">
                <a
                  href="#notify"
                  className="rounded-full bg-white px-6 py-3 text-sm font-medium uppercase tracking-[0.25em] text-black transition hover:opacity-90"
                >
                  Join Waitlist
                </a>
                <a
                  href="#about"
                  className="rounded-full border border-white/15 bg-white/5 px-6 py-3 text-sm uppercase tracking-[0.25em] text-white/80 transition hover:bg-white/10"
                >
                  Learn More
                </a>
              </div>

              <div className="mt-12 grid gap-4 sm:grid-cols-3">
                {[
                  ["Premium Workflow", "Fast, focused tools for serious creators."],
                  ["Private by Design", "A clean, secure experience for uploaded audio."],
                  ["Studio-Ready Output", "Built for practical, professional use."],
                ].map(([title, text]) => (
                  <div key={title} className="rounded-3xl border border-white/10 bg-white/[0.03] p-5 backdrop-blur-sm">
                    <div className="text-sm font-medium text-white">{title}</div>
                    <div className="mt-2 text-sm leading-6 text-white/50">{text}</div>
                  </div>
                ))}
              </div>
            </section>

            <aside className="flex items-center">
              <div className="w-full rounded-[2rem] border border-white/10 bg-white/[0.04] p-6 shadow-2xl backdrop-blur-xl md:p-8">
                <div className="mb-8 flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <img
                      src="/tygeta-logo.png"
                      alt="Tygeta logo"
                      className="h-12 w-12 object-contain"
                    />
                    <div>
                      <div className="text-xs uppercase tracking-[0.4em] text-white/45">Tygeta</div>
                      <div className="mt-2 text-2xl font-medium">A new standard in audio workflow.</div>
                    </div>
                  </div>
                  <div className="rounded-full border border-white/10 px-3 py-1 text-[10px] uppercase tracking-[0.3em] text-white/50">
                    Beta Soon
                  </div>
                </div>

                <div className="space-y-4">
                  {[
                    "Premium creator-focused audio tools",
                    "Designed for producers, DJs, and modern music workflows",
                    "Fast processing with polished, professional output",
                    "Early access opening soon",
                  ].map((item) => (
                    <div key={item} className="flex items-start gap-3 rounded-2xl border border-white/8 bg-black/20 px-4 py-4">
                      <div className="mt-1 h-2.5 w-2.5 rounded-full bg-white/70" />
                      <div className="text-sm leading-6 text-white/65">{item}</div>
                    </div>
                  ))}
                </div>

                <div id="notify" className="mt-8 rounded-3xl border border-white/10 bg-black/20 p-5">
                  <div className="text-xs uppercase tracking-[0.35em] text-white/45">Get notified</div>
                  <div className="mt-2 text-sm leading-6 text-white/60">
                    Join the waitlist for launch updates and early platform access.
                  </div>
                  <form className="mt-5 flex flex-col gap-3">
                    <input
                      type="email"
                      placeholder="Email address"
                      className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder:text-white/30 outline-none transition focus:border-white/30"
                    />
                    <button
                      type="button"
                      className="rounded-2xl bg-white px-4 py-3 text-sm font-medium uppercase tracking-[0.25em] text-black transition hover:opacity-90"
                    >
                      Request Access
                    </button>
                  </form>
                </div>
              </div>
            </aside>
          </div>
        </main>

        <section id="about" className="grid gap-6 border-t border-white/10 py-10 md:grid-cols-3">
          <div className="rounded-3xl border border-white/10 bg-white/[0.03] p-6">
            <div className="text-xs uppercase tracking-[0.35em] text-white/45">01</div>
            <h2 className="mt-4 text-lg font-medium">Focused</h2>
            <p className="mt-3 text-sm leading-7 text-white/55">
              Tygeta is being built around a clear idea: powerful audio tools should feel elegant,
              direct, and useful from the first click.
            </p>
          </div>

          <div className="rounded-3xl border border-white/10 bg-white/[0.03] p-6">
            <div className="text-xs uppercase tracking-[0.35em] text-white/45">02</div>
            <h2 className="mt-4 text-lg font-medium">Refined</h2>
            <p className="mt-3 text-sm leading-7 text-white/55">
              Every detail is shaped for premium creative work, from workflow speed to the quality and
              usability of the final exports.
            </p>
          </div>

          <div className="rounded-3xl border border-white/10 bg-white/[0.03] p-6">
            <div className="text-xs uppercase tracking-[0.35em] text-white/45">03</div>
            <h2 className="mt-4 text-lg font-medium">Purposeful</h2>
            <p className="mt-3 text-sm leading-7 text-white/55">
              This is not a novelty product. Tygeta is being built for creators who need dependable
              tools that fit real studio and performance workflows.
            </p>
          </div>
        </section>

        <footer className="border-t border-white/10 pt-6 text-xs uppercase tracking-[0.3em] text-white/30">
          Tygeta © 2026
        </footer>
      </div>
    </div>
  );
}