import React from "react";

export default function StartCostStudioLandingPage() {
  const topics = [
    "Starting",
    "Friction",
    "Focus",
    "Clean Stops",
    "Restart Lines",
    "Meewerkstand",
  ];

  const essays = [
    "Why You Can’t Start, Even When You Care",
    "The First Step Is Not a Mindset",
    "Focus Is Not a Virtue",
    "Return Is the Skill",
  ];

  return (
    <main className="min-h-screen bg-[#f7f1e8] text-[#171717] selection:bg-[#171717] selection:text-[#f7f1e8]">
      <header className="sticky top-0 z-50 border-b border-[#171717]/10 bg-[#f7f1e8]/90 backdrop-blur-md">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-5 md:px-8">
          <a href="#top" className="group flex items-center gap-3" aria-label="Start Cost Studio home">
            <div className="relative flex h-11 w-11 items-center justify-center border border-[#171717] bg-[#171717] text-[#f7f1e8] shadow-[5px_5px_0_#d96f32] transition-transform group-hover:-translate-y-0.5">
              <span className="font-serif text-lg italic tracking-tight">S</span>
              <span className="absolute bottom-2 left-2 h-px w-7 bg-[#f7f1e8]/80" />
            </div>
            <div className="leading-none">
              <div className="font-serif text-xl tracking-tight md:text-2xl">Start Cost Studio</div>
              <div className="mt-1 text-[10px] font-semibold uppercase tracking-[0.22em] text-[#171717]/60">
                Entry design for real life
              </div>
            </div>
          </a>

          <nav className="hidden items-center gap-8 text-sm font-medium md:flex">
            <a className="hover:text-[#d96f32]" href="#topics">Topics</a>
            <a className="hover:text-[#d96f32]" href="#books">Books</a>
            <a className="hover:text-[#d96f32]" href="#about">About</a>
            <a className="hover:text-[#d96f32]" href="#articles">Articles</a>
            <a className="rounded-full border border-[#171717] px-5 py-2 hover:bg-[#171717] hover:text-[#f7f1e8]" href="#newsletter">
              Newsletter
            </a>
          </nav>
        </div>
      </header>

      <section id="top" className="mx-auto grid max-w-7xl gap-12 px-5 py-16 md:grid-cols-[1.05fr_0.95fr] md:px-8 md:py-24">
        <div className="flex flex-col justify-center">
          <p className="mb-6 w-fit border border-[#171717]/20 bg-white/40 px-4 py-2 text-xs font-bold uppercase tracking-[0.22em] text-[#d96f32]">
            Start-Cost Engineering
          </p>
          <h1 className="max-w-4xl font-serif text-5xl leading-[0.95] tracking-[-0.055em] md:text-7xl lg:text-8xl">
            You don’t need more discipline. You need a cheaper start.
          </h1>
          <p className="mt-8 max-w-2xl text-xl leading-8 text-[#171717]/75 md:text-2xl md:leading-9">
            Start Cost Studio is an editorial and method studio for people who know what they want to do, but keep losing the first move.
          </p>
          <p className="mt-5 max-w-2xl text-lg leading-8 text-[#171717]/70">
            We design practical tools for lowering the cost of beginning, returning and staying in motion — without turning your life into another motivational courtroom.
          </p>
          <div className="mt-9 flex flex-col gap-4 sm:flex-row">
            <a href="#newsletter" className="inline-flex items-center justify-center rounded-full bg-[#171717] px-7 py-4 text-sm font-bold uppercase tracking-[0.16em] text-[#f7f1e8] shadow-[6px_6px_0_#d96f32] transition hover:-translate-y-0.5">
              Join the early list
            </a>
            <a href="#books" className="inline-flex items-center justify-center rounded-full border border-[#171717] px-7 py-4 text-sm font-bold uppercase tracking-[0.16em] transition hover:bg-white/50">
              See the first book
            </a>
          </div>
        </div>

        <aside className="relative md:pt-6">
          <div className="absolute -right-3 -top-3 h-32 w-32 rounded-full bg-[#d96f32]/20 blur-2xl" />
          <div className="relative border border-[#171717] bg-[#fffaf2] p-6 shadow-[14px_14px_0_#171717] md:p-8">
            <div className="mb-8 flex items-start justify-between gap-4">
              <div>
                <p className="text-xs font-bold uppercase tracking-[0.22em] text-[#d96f32]">Pre-launch field manual</p>
                <h2 className="mt-3 font-serif text-4xl leading-none tracking-[-0.04em] md:text-5xl">
                  Make The Start Cheap
                </h2>
              </div>
              <div className="rounded-full border border-[#171717] px-3 py-1 text-xs font-bold uppercase tracking-widest">
                Soon
              </div>
            </div>
            <div className="border-y border-[#171717]/15 py-7">
              <p className="font-serif text-2xl italic leading-8">
                A system for people who can’t just push through.
              </p>
              <p className="mt-5 text-base leading-7 text-[#171717]/72">
                The first book from Start Cost Studio shows how to make the first real move small enough to enter, visible enough to trust and clean enough to return to tomorrow.
              </p>
            </div>
            <div className="mt-7 grid gap-3 text-sm font-medium text-[#171717]/75">
              <div className="flex items-center justify-between border-b border-[#171717]/10 pb-3">
                <span>Core method</span>
                <span className="font-serif italic">Filmable Entry</span>
              </div>
              <div className="flex items-center justify-between border-b border-[#171717]/10 pb-3">
                <span>Daily tool</span>
                <span className="font-serif italic">The 60-Second Card</span>
              </div>
              <div className="flex items-center justify-between border-b border-[#171717]/10 pb-3">
                <span>Central promise</span>
                <span className="font-serif italic">Less force. More entry.</span>
              </div>
            </div>
          </div>
        </aside>
      </section>

      <section className="border-y border-[#171717] bg-[#171717] text-[#f7f1e8]">
        <div className="mx-auto grid max-w-7xl gap-8 px-5 py-12 md:grid-cols-3 md:px-8">
          <div>
            <p className="text-xs font-bold uppercase tracking-[0.22em] text-[#d96f32]">The old advice</p>
            <h3 className="mt-3 font-serif text-3xl tracking-[-0.03em]">Try harder.</h3>
          </div>
          <div>
            <p className="text-xs font-bold uppercase tracking-[0.22em] text-[#d96f32]">The better question</p>
            <h3 className="mt-3 font-serif text-3xl tracking-[-0.03em]">What made the first move expensive?</h3>
          </div>
          <div>
            <p className="text-xs font-bold uppercase tracking-[0.22em] text-[#d96f32]">The studio answer</p>
            <h3 className="mt-3 font-serif text-3xl tracking-[-0.03em]">Design the door. Don’t fight the person.</h3>
          </div>
        </div>
      </section>

      <section id="topics" className="mx-auto max-w-7xl px-5 py-20 md:px-8">
        <div className="grid gap-10 md:grid-cols-[0.8fr_1.2fr]">
          <div>
            <p className="text-xs font-bold uppercase tracking-[0.22em] text-[#d96f32]">Topics</p>
            <h2 className="mt-4 font-serif text-4xl leading-tight tracking-[-0.04em] md:text-6xl">
              The small moments where work either opens or doesn’t.
            </h2>
          </div>
          <div className="grid gap-4 sm:grid-cols-2">
            {topics.map((topic) => (
              <a key={topic} href="#articles" className="group border border-[#171717]/15 bg-white/35 p-6 transition hover:-translate-y-1 hover:border-[#171717] hover:bg-[#fffaf2]">
                <div className="flex items-center justify-between gap-4">
                  <h3 className="font-serif text-2xl tracking-[-0.03em]">{topic}</h3>
                  <span className="text-[#d96f32] transition group-hover:translate-x-1">→</span>
                </div>
                <p className="mt-3 text-sm leading-6 text-[#171717]/65">
                  Practical notes, examples and tools for reducing the cost before action.
                </p>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section id="books" className="bg-[#fffaf2]">
        <div className="mx-auto grid max-w-7xl gap-12 px-5 py-20 md:grid-cols-[0.9fr_1.1fr] md:px-8">
          <div className="border border-[#171717] bg-[#f7f1e8] p-7 shadow-[10px_10px_0_#d96f32]">
            <p className="text-xs font-bold uppercase tracking-[0.22em] text-[#d96f32]">Book 01</p>
            <h2 className="mt-4 font-serif text-5xl leading-none tracking-[-0.05em]">Make The Start Cheap</h2>
            <p className="mt-5 text-lg leading-8 text-[#171717]/72">
              The first field manual from Start Cost Studio. Coming soon.
            </p>
          </div>
          <div className="flex flex-col justify-center">
            <p className="text-xs font-bold uppercase tracking-[0.22em] text-[#d96f32]">Not another productivity book</p>
            <h3 className="mt-4 font-serif text-4xl leading-tight tracking-[-0.04em] md:text-5xl">
              For the email you can’t answer, the page you can’t begin and the routine you keep restarting from shame.
            </h3>
            <p className="mt-6 text-lg leading-8 text-[#171717]/72">
              MTSC starts from a simple reversal: you don’t fix yourself first. You fix the entry. Lower the cost, make the first move visible, leave a restart line and protect tomorrow from today’s collapse.
            </p>
            <a href="#newsletter" className="mt-8 w-fit rounded-full bg-[#171717] px-7 py-4 text-sm font-bold uppercase tracking-[0.16em] text-[#f7f1e8] shadow-[6px_6px_0_#d96f32] transition hover:-translate-y-0.5">
              Get launch updates
            </a>
          </div>
        </div>
      </section>

      <section id="articles" className="mx-auto max-w-7xl px-5 py-20 md:px-8">
        <div className="mb-10 flex flex-col justify-between gap-6 md:flex-row md:items-end">
          <div>
            <p className="text-xs font-bold uppercase tracking-[0.22em] text-[#d96f32]">Articles</p>
            <h2 className="mt-4 font-serif text-4xl tracking-[-0.04em] md:text-6xl">Start here.</h2>
          </div>
          <p className="max-w-xl text-lg leading-8 text-[#171717]/70">
            Essays for people who already know the advice — and need the doorway made smaller.
          </p>
        </div>
        <div className="grid gap-4 md:grid-cols-4">
          {essays.map((essay, index) => (
            <article key={essay} className="min-h-[230px] border border-[#171717]/15 bg-white/35 p-6 transition hover:-translate-y-1 hover:border-[#171717] hover:bg-[#fffaf2]">
              <p className="text-xs font-bold uppercase tracking-[0.22em] text-[#d96f32]">Essay 0{index + 1}</p>
              <h3 className="mt-5 font-serif text-2xl leading-tight tracking-[-0.03em]">{essay}</h3>
              <p className="mt-5 text-sm leading-6 text-[#171717]/65">Coming soon in Studio Notes.</p>
            </article>
          ))}
        </div>
      </section>

      <section id="about" className="border-y border-[#171717]/10 bg-[#fffaf2]">
        <div className="mx-auto grid max-w-7xl gap-12 px-5 py-20 md:grid-cols-[0.85fr_1.15fr] md:px-8">
          <div>
            <p className="text-xs font-bold uppercase tracking-[0.22em] text-[#d96f32]">About</p>
            <h2 className="mt-4 font-serif text-4xl leading-tight tracking-[-0.04em] md:text-6xl">
              Built by Aebe van Boven.
            </h2>
          </div>
          <div className="text-lg leading-8 text-[#171717]/74">
            <p>
              Start Cost Studio is built around the overlooked moment before action: the blink before the email, the pause before the page, the tiny escape route before the work begins.
            </p>
            <p className="mt-5">
              The studio develops essays, field manuals and practical tools for people who can’t simply bully themselves into motion — and would rather learn how to make the entry cheaper.
            </p>
          </div>
        </div>
      </section>

      <section id="newsletter" className="mx-auto max-w-4xl px-5 py-24 text-center md:px-8">
        <p className="text-xs font-bold uppercase tracking-[0.22em] text-[#d96f32]">Newsletter</p>
        <h2 className="mt-4 font-serif text-5xl leading-none tracking-[-0.05em] md:text-7xl">
          Studio Notes for cheaper starts.
        </h2>
        <p className="mx-auto mt-6 max-w-2xl text-xl leading-8 text-[#171717]/72">
          One useful note on beginning, returning and staying in motion when life is not behaving like a clean Monday.
        </p>
        <form className="mx-auto mt-9 flex max-w-xl flex-col gap-3 sm:flex-row" onSubmit={(event) => event.preventDefault()}>
          <input
            className="min-h-14 flex-1 border border-[#171717] bg-[#fffaf2] px-5 text-base outline-none placeholder:text-[#171717]/45 focus:shadow-[4px_4px_0_#d96f32]"
            type="email"
            placeholder="your@email.com"
            aria-label="Email address"
          />
          <button className="min-h-14 bg-[#171717] px-7 text-sm font-bold uppercase tracking-[0.16em] text-[#f7f1e8] shadow-[5px_5px_0_#d96f32] transition hover:-translate-y-0.5">
            Join
          </button>
        </form>
        <p className="mt-4 text-sm text-[#171717]/55">No hype. No daily guilt. Just one door at a time.</p>
      </section>

      <footer className="border-t border-[#171717]/10 px-5 py-10 md:px-8">
        <div className="mx-auto flex max-w-7xl flex-col justify-between gap-6 text-sm text-[#171717]/60 md:flex-row md:items-center">
          <p>© 2026 Start Cost Studio. All rights reserved.</p>
          <div className="flex gap-5">
            <a href="mailto:hello@startcoststudio.com" className="hover:text-[#d96f32]">hello@startcoststudio.com</a>
            <a href="#top" className="hover:text-[#d96f32]">Back to top ↑</a>
          </div>
        </div>
      </footer>
    </main>
  );
}