import './companies.css';
import { SiteFooter } from '../../shared/components/SiteFooter';
import { SiteNavbar } from '../../shared/components/SiteNavbar';

export function ForVirksomhederPage() {
  return (
    <div className="companies-react-root scroll-smooth bg-[#f8fafc] relative min-h-screen text-gray-600 selection:bg-teal-100 selection:text-teal-900 overflow-x-hidden flex flex-col font-normal custom-scrollbar">
      <div className="fixed top-[-15%] left-[-10%] w-[60vw] h-[60vw] rounded-full bg-gradient-to-br from-teal-400/30 to-emerald-300/10 blur-[140px] pointer-events-none z-0" />
      <div className="fixed bottom-[-15%] right-[-10%] w-[70vw] h-[70vw] rounded-full bg-gradient-to-tl from-indigo-500/20 to-purple-400/10 blur-[160px] pointer-events-none z-0" />
      <div className="fixed top-[20%] right-[15%] w-[40vw] h-[40vw] rounded-full bg-gradient-to-tr from-cyan-400/20 to-blue-300/10 blur-[130px] pointer-events-none z-0" />

      <SiteNavbar activeHowItem="companies" />

      <main className="flex-1 relative z-10 pt-16">
        <section className="relative pt-24 pb-24 px-6 lg:px-12 max-w-7xl mx-auto flex flex-col items-center text-center">
          <h1 className="text-5xl md:text-6xl font-medium tracking-tight text-gradient-subtle mb-6 leading-tight max-w-4xl drop-shadow-sm">
            Kommer snart
          </h1>

          <p className="text-lg md:text-xl text-gray-600 mb-10 max-w-3xl font-normal leading-relaxed drop-shadow-sm">
            Vi genopbygger lige nu Arbejd.com til virksomheder fra bunden. Tilmeld dig vores nyhedsbrev, og vær den første til at få besked, når den nye Arbejd.com er klar.
          </p>

          <p className="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-teal-50 text-teal-700 border border-teal-200 mb-6">
            De første 500 virksomheder får tre måneders gratis adgang.
          </p>

          <form className="w-full max-w-2xl mx-auto mt-5 md:mt-6 mb-10">
            <div className="bg-gradient-to-br from-white/70 to-white/30 backdrop-blur-xl border border-white/90 rounded-3xl p-4 md:p-5 shadow-[0_8px_30px_rgba(0,0,0,0.03)]">
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <label htmlFor="company-newsletter-name" className="sr-only">Navn</label>
                <input
                  id="company-newsletter-name"
                  type="text"
                  required
                  placeholder="Navn"
                  className="h-12 px-4 rounded-xl bg-white/90 border border-white text-gray-900 placeholder:text-gray-500 shadow-sm outline-none focus:border-teal-300 focus:ring-2 focus:ring-teal-100"
                />
                <label htmlFor="company-newsletter-email" className="sr-only">E-mail</label>
                <input
                  id="company-newsletter-email"
                  type="email"
                  required
                  placeholder="E-mail"
                  className="h-12 px-4 rounded-xl bg-white/90 border border-white text-gray-900 placeholder:text-gray-500 shadow-sm outline-none focus:border-teal-300 focus:ring-2 focus:ring-teal-100"
                />
                <label htmlFor="company-newsletter-phone" className="sr-only">Mobilnummer</label>
                <input
                  id="company-newsletter-phone"
                  type="tel"
                  required
                  placeholder="Mobilnummer"
                  className="h-12 px-4 rounded-xl bg-white/90 border border-white text-gray-900 placeholder:text-gray-500 shadow-sm outline-none focus:border-teal-300 focus:ring-2 focus:ring-teal-100"
                />
              </div>
              <div className="mt-3">
                <button
                  type="submit"
                  className="w-full h-12 px-6 rounded-xl bg-gray-900 text-white font-medium hover:bg-gray-800 transition-colors shadow-sm"
                >
                  Tilmeld nyhedsbrev
                </button>
              </div>
            </div>
          </form>
        </section>
      </main>

      <SiteFooter />
    </div>
  );
}
