export default function Home() {
  return (
    <main className="min-h-screen">
      <nav className="border-b border-white/5 backdrop-blur sticky top-0 z-50 bg-ink-950/80">
        <div className="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-7 h-7 rounded-md bg-accent-500 grid place-items-center text-ink-950 font-bold">T</div>
            <span className="font-bold tracking-tight">TimeChat</span>
          </div>
          <a href="https://t.me/timechat_bot" className="bg-accent-500 hover:bg-accent-400 text-ink-950 font-semibold px-4 py-1.5 rounded-lg text-sm">
            Start on Telegram
          </a>
        </div>
      </nav>

      <section className="pt-24 pb-16 px-6 text-center">
        <div className="max-w-3xl mx-auto">
          <span className="inline-block px-3 py-1 rounded-full bg-accent-500/10 border border-accent-500/30 text-accent-400 text-xs font-mono mb-6">
            For freelancers who hate timesheets
          </span>
          <h1 className="text-5xl md:text-6xl font-extrabold tracking-tight mb-6">
            Type. Send.<br />Get paid.
          </h1>
          <p className="text-lg text-white/60 max-w-xl mx-auto mb-10">
            Log hours on Telegram in plain language. End of month: a PDF invoice lands in your client's inbox automatically.
          </p>

          <div className="bg-ink-800 border border-white/10 rounded-2xl p-6 max-w-md mx-auto text-left mb-8">
            <div className="space-y-3 text-sm font-mono">
              <div className="flex justify-end"><span className="bg-accent-500 text-ink-950 px-3 py-2 rounded-2xl">Acme 2.5h logo redesign</span></div>
              <div className="flex justify-start"><span className="bg-ink-700 text-white px-3 py-2 rounded-2xl">✓ Logged: 2.5h on Acme</span></div>
              <div className="flex justify-end"><span className="bg-accent-500 text-ink-950 px-3 py-2 rounded-2xl">Beta 1h call</span></div>
              <div className="flex justify-start"><span className="bg-ink-700 text-white px-3 py-2 rounded-2xl">✓ Logged: 1h on Beta</span></div>
              <div className="flex justify-start text-white/40 text-xs">[on the 1st] Invoice → client@acme.com ✉</div>
            </div>
          </div>

          <a href="https://t.me/timechat_bot" className="inline-block bg-accent-500 hover:bg-accent-400 text-ink-950 font-bold px-8 py-3 rounded-lg">
            Start free on Telegram →
          </a>
        </div>
      </section>

      <section className="py-16 px-6 bg-ink-900/40">
        <div className="max-w-5xl mx-auto grid md:grid-cols-3 gap-4">
          {[
            { icon: "💬", title: "Type, don't tap", desc: "No app, no timer, no UI. Just type into your existing Telegram." },
            { icon: "🧠", title: "Parses anything", desc: "'Acme 2.5h logo' or 'spent 90 minutes on Beta yesterday' — both work." },
            { icon: "📨", title: "Auto-invoices", desc: "1st of every month: branded PDF sent to your client. You don't lift a finger." },
          ].map((f) => (
            <div key={f.title} className="bg-ink-800/50 border border-white/10 rounded-xl p-6">
              <div className="text-3xl mb-3">{f.icon}</div>
              <h3 className="font-bold text-lg mb-2">{f.title}</h3>
              <p className="text-sm text-white/60">{f.desc}</p>
            </div>
          ))}
        </div>
      </section>

      <footer className="py-10 text-center text-white/40 text-sm border-t border-white/5">
        © {new Date().getFullYear()} TimeChat
      </footer>
    </main>
  );
}