import React, { useEffect, useRef, useState } from 'react';
import { createRoot } from 'react-dom/client';

const DEADLINE_PRIMARY = new Date('2027-04-26');
const DEADLINE_SECONDARY = new Date('2028-04-26');

function getDeadlineBadge(now = new Date()) {
  if (now < DEADLINE_PRIMARY) {
    const days = Math.ceil((DEADLINE_PRIMARY - now) / 86400000);
    return `ADA Title II deadline: ${days} days away`;
  }
  if (now < DEADLINE_SECONDARY) {
    return 'The April 2027 deadline has passed. Smaller entities: April 2028.';
  }
  return 'ADA Title II deadlines have passed. Are you compliant?';
}

function FadeIn({ children, delay = 0, as: Tag = 'div', className = '', ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            el.classList.add('is-visible');
            obs.disconnect();
          }
        });
      },
      { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return (
    <Tag
      ref={ref}
      className={`fade-in ${className}`}
      style={{ transitionDelay: `${delay}ms` }}
      {...rest}
    >
      {children}
    </Tag>
  );
}

function Nav() {
  const [open, setOpen] = useState(false);
  const links = [
    { href: '#services', label: 'Services' },
    { href: '#how-it-works', label: 'How It Works' },
    { href: '#contact', label: 'Contact' },
  ];
  return (
    <header className="fixed top-0 left-0 right-0 z-[100]">
      <a href="#main-content" className="skip-link">Skip to main content</a>
      <div className="bg-black/80 backdrop-blur-xl border-b border-white/[0.06]">
        <nav className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between" aria-label="Primary">
          <a href="#top" className="text-xl font-bold tracking-[-0.03em] text-white">EvenForm</a>
          <div className="hidden md:flex items-center gap-8">
            {links.map((l) => (
              <a
                key={l.href}
                href={l.href}
                className="text-sm text-white/60 hover:text-white transition-colors duration-200"
              >
                {l.label}
              </a>
            ))}
            <a
              href="#contact"
              className="bg-white/[0.08] border border-white/[0.15] rounded-full px-5 py-2 text-sm font-medium text-white hover:bg-white/[0.12] transition-colors duration-200"
            >
              Get Started
            </a>
          </div>
          <button
            type="button"
            aria-expanded={open}
            aria-controls="mobile-menu"
            aria-label="Menu"
            onClick={() => setOpen((o) => !o)}
            className="md:hidden flex items-center justify-center w-10 h-10 rounded-full text-white/70 hover:text-white transition-colors"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              {open ? (
                <>
                  <line x1="5" y1="5" x2="19" y2="19" />
                  <line x1="19" y1="5" x2="5" y2="19" />
                </>
              ) : (
                <>
                  <line x1="4" y1="8" x2="20" y2="8" />
                  <line x1="4" y1="16" x2="20" y2="16" />
                </>
              )}
            </svg>
          </button>
        </nav>
      </div>
      <div
        id="mobile-menu"
        inert={open ? undefined : ""}
        className={`md:hidden mobile-menu ${open ? 'is-open' : ''} bg-black/80 backdrop-blur-xl border-b border-white/[0.06]`}
      >
        <div className="max-w-6xl mx-auto px-6 py-6 flex flex-col gap-5">
          {links.map((l) => (
            <a
              key={l.href}
              href={l.href}
              onClick={() => setOpen(false)}
              className="text-base text-white/70 hover:text-white transition-colors"
            >
              {l.label}
            </a>
          ))}
          <a
            href="#contact"
            onClick={() => setOpen(false)}
            className="bg-white/[0.08] border border-white/[0.15] rounded-full px-5 py-2.5 text-sm font-medium text-white text-center hover:bg-white/[0.12] transition-colors"
          >
            Get Started
          </a>
        </div>
      </div>
    </header>
  );
}

function useDeadlineCopy() {
  const [copy, setCopy] = useState(() => getDeadlineBadge());
  useEffect(() => {
    const tick = () => setCopy(getDeadlineBadge());
    tick();
    const id = setInterval(tick, 60 * 60 * 1000);
    return () => clearInterval(id);
  }, []);
  return copy;
}

function DeadlineBadge() {
  const copy = useDeadlineCopy();
  return (
    <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-red-500/10 border border-red-500/20 text-red-400 text-[13px] font-medium">
      <span className="dot-pulse inline-block w-1.5 h-1.5 rounded-full bg-red-400" aria-hidden="true" />
      <span>{copy}</span>
    </div>
  );
}

function Hero() {
  return (
    <section id="top" aria-label="Hero" className="pt-40 pb-24 px-6">
      <div className="max-w-4xl mx-auto text-center">
        <FadeIn>
          <DeadlineBadge />
        </FadeIn>
        <FadeIn delay={60}>
          <h1 className="mt-8 text-[40px] md:text-7xl font-bold tracking-[-0.04em] leading-[1.05] text-white">
            PDF Accessibility. Solved.
          </h1>
        </FadeIn>
        <FadeIn delay={120}>
          <p className="mt-8 text-lg text-white/60 max-w-2xl mx-auto leading-relaxed">
            AI-powered document remediation that makes your PDFs compliant with ADA Title II, Section 508, WCAG 2.1 AA, and PDF/UA-1 — fast, accurate, and at scale.
          </p>
        </FadeIn>
        <FadeIn delay={180}>
          <div className="mt-10 flex flex-col md:flex-row gap-3 md:gap-4 justify-center">
            <a
              href="#contact"
              className="bg-white text-black rounded-full px-8 py-3.5 text-[15px] font-semibold hover:bg-white/90 transition-colors duration-200"
            >
              Request a Quote
            </a>
            <a
              href="#how-it-works"
              className="bg-white/5 border border-white/[0.15] rounded-full px-8 py-3.5 text-[15px] font-medium text-white hover:bg-white/10 hover:border-white/25 transition-all duration-200"
            >
              See How It Works
            </a>
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

function SectionLabel({ children }) {
  return (
    <div className="text-xs uppercase tracking-[0.1em] text-white/40 font-semibold">
      {children}
    </div>
  );
}

function Problem() {
  return (
    <section aria-label="Problem" className="py-24 px-6">
      <div className="max-w-3xl mx-auto">
        <FadeIn>
          <SectionLabel>The Problem</SectionLabel>
        </FadeIn>
        <FadeIn delay={60}>
          <h2 className="mt-6 text-3xl md:text-5xl font-bold tracking-[-0.03em] leading-[1.2] text-white">
            Deadlines are real. Manual remediation doesn't scale.
          </h2>
        </FadeIn>
        <FadeIn delay={120}>
          <p className="mt-8 text-lg text-white/60 leading-relaxed">
            Government entities face ADA Title II deadlines to make digital content accessible — April 2027 for entities serving populations of 50,000 or more, April 2028 for smaller public entities and special districts. Manual PDF remediation is slow, expensive, and can't keep up with the document volumes public agencies actually produce.
          </p>
        </FadeIn>
      </div>
    </section>
  );
}

const SERVICES = [
  {
    title: 'Automated PDF Remediation',
    body: 'AI-powered tagging, alt text generation, and reading order correction. Every document gets the structural fixes accessibility tools require.',
    icon: (
      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
        <path d="M14 2v6h6" />
        <path d="M8 13h8" />
        <path d="M8 17h5" />
      </svg>
    ),
  },
  {
    title: 'Compliance Validation',
    body: 'WCAG 2.1 AA, Section 508, and PDF/UA-1 verification with detailed reports. Know exactly where each document stands before it ships.',
    icon: (
      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M12 2 4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z" />
        <path d="m9 12 2 2 4-4" />
      </svg>
    ),
  },
  {
    title: 'Bulk Processing',
    body: 'Handle hundreds of documents efficiently with consistent quality. Built for the document volumes public agencies actually produce.',
    icon: (
      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <rect x="3" y="3" width="7" height="7" rx="1" />
        <rect x="14" y="3" width="7" height="7" rx="1" />
        <rect x="3" y="14" width="7" height="7" rx="1" />
        <rect x="14" y="14" width="7" height="7" rx="1" />
      </svg>
    ),
  },
  {
    title: 'PDF/UA-1 Validation',
    body: 'Independent verification against the PDF/UA-1 (ISO 14289-1) standard via veraPDF Matterhorn Protocol. Every Compliance+ deliverable includes the full validator report. No black box.',
    icon: (
      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <circle cx="11" cy="11" r="7" />
        <path d="m20 20-4.35-4.35" />
      </svg>
    ),
  },
];

function Services() {
  return (
    <section id="services" aria-label="Services" className="py-24 px-6">
      <div className="max-w-4xl mx-auto">
        <FadeIn>
          <SectionLabel>What We Do</SectionLabel>
        </FadeIn>
        <FadeIn delay={60}>
          <h2 className="mt-6 text-3xl md:text-5xl font-bold tracking-[-0.03em] leading-[1.2] text-white">
            Services built for government-scale documents.
          </h2>
        </FadeIn>
        <div className="mt-16 grid md:grid-cols-2 gap-5">
          {SERVICES.map((s, i) => (
            <FadeIn key={s.title} delay={i * 60}>
              <article className="bg-[#0a0a0a] border border-white/[0.08] rounded-3xl p-10 hover:border-white/[0.16] hover:bg-[#111] transition-all duration-200 h-full">
                <div className="text-white/50">{s.icon}</div>
                <h3 className="mt-8 text-xl font-bold tracking-[-0.02em] text-white">{s.title}</h3>
                <p className="mt-4 text-[15px] text-white/50 leading-relaxed">{s.body}</p>
              </article>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

const STEPS = [
  { title: 'Upload', body: 'Send us your PDFs — a single document or a folder of thousands.' },
  { title: 'Process', body: 'Our AI pipeline remediates tags, reading order, alt text, and metadata, then validates each document.' },
  { title: 'Deliver', body: 'Receive fully compliant, accessible PDFs with compliance reports and unfixable-issue guidance.' },
];

function HowItWorks() {
  return (
    <section id="how-it-works" aria-label="How it works" className="py-24 px-6">
      <div className="max-w-4xl mx-auto">
        <FadeIn>
          <SectionLabel>How It Works</SectionLabel>
        </FadeIn>
        <FadeIn delay={60}>
          <h2 className="mt-6 text-3xl md:text-5xl font-bold tracking-[-0.03em] leading-[1.2] text-white">
            Three steps. No procurement theater.
          </h2>
        </FadeIn>
        <div className="mt-16 grid md:grid-cols-3 gap-8">
          {STEPS.map((s, i) => (
            <FadeIn key={s.title} delay={i * 60}>
              <div className="h-full">
                <div className="text-white/30 text-sm font-mono">
                  {String(i + 1).padStart(2, '0')}
                </div>
                <h3 className="mt-4 text-xl font-bold tracking-[-0.02em] text-white">{s.title}</h3>
                <p className="mt-3 text-[15px] text-white/50 leading-relaxed">{s.body}</p>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

const REASONS = [
  'Full veraPDF PDF/UA-1 Matterhorn Protocol validation report included with every deliverable. Acrobat Accessibility Checker and PAC 2024 reports available on request.',
  'Built by accessibility practitioners, not just developers',
  'Designed for government-scale document volumes',
  '50–80% less than manual remediation services — with faster turnaround',
  'WCAG 2.1 AA, Section 508, and PDF/UA-1 compliant',
  'Validated against a benchmark of over 2,500 PDFs at 99%+ PDF/UA-1 compliance on remediable documents via veraPDF Matterhorn Protocol (April 2026). Source-level defects and ISO scope-excluded formats are documented per-document in the Unfixable Report.',
  'Zero API data retention — your documents are never used for AI training',
  'Unfixable document reports tell you exactly what needs source-level fixes and why',
];

function WhyEvenForm() {
  return (
    <section aria-label="Why EvenForm" className="py-24 px-6">
      <div className="max-w-4xl mx-auto">
        <FadeIn>
          <SectionLabel>Why EvenForm</SectionLabel>
        </FadeIn>
        <FadeIn delay={60}>
          <h2 className="mt-6 text-3xl md:text-5xl font-bold tracking-[-0.03em] leading-[1.2] text-white">
            Built for the work. Priced for the budget.
          </h2>
        </FadeIn>
        <ul className="mt-16 grid md:grid-cols-2 gap-x-8 gap-y-5">
          {REASONS.map((r, i) => (
            <FadeIn key={r} as="li" delay={i * 40} className="flex items-start gap-3">
              <svg
                width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="#4ade80" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                className="mt-0.5 shrink-0" aria-hidden="true"
              >
                <polyline points="20 6 9 17 4 12" />
              </svg>
              <span className="text-[15px] text-white/60 leading-relaxed">{r}</span>
            </FadeIn>
          ))}
        </ul>
        <FadeIn delay={80}>
          <div className="mt-12">
            <h3 className="text-xl font-bold tracking-[-0.02em] text-white">
              What "remediable" means
            </h3>
            <p className="mt-4 text-[15px] text-white/50 leading-relaxed">
              Remediable documents exclude source-level defects that require the original author to re-export from the authoring tool (such as font embedding issues or corrupted font programs) and ISO PDF/UA-1 scope exclusions per Matterhorn Protocol §6.1.1 (XFA Dynamic Forms, PDF Association).
            </p>
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

function Contact() {
  const copy = useDeadlineCopy();
  return (
    <section id="contact" aria-label="Contact" className="py-24 px-6">
      <div className="max-w-3xl mx-auto text-center">
        <FadeIn>
          <h2 className="text-3xl md:text-5xl font-bold tracking-[-0.03em] leading-[1.2] text-white">
            Ready to meet your accessibility deadline?
          </h2>
        </FadeIn>
        <FadeIn delay={60}>
          <p className="mt-6 text-lg text-white/60 leading-relaxed">
            {copy} Tell us about your document volume and we'll send a scoped quote — usually within two business days.
          </p>
        </FadeIn>
        <FadeIn delay={120}>
          <div className="mt-10 flex flex-col md:flex-row gap-3 md:gap-4 justify-center items-center">
            <a
              href="mailto:tony@evenform.io?subject=EvenForm%20Quote%20Request"
              className="bg-white text-black rounded-full px-8 py-3.5 text-[15px] font-semibold hover:bg-white/90 transition-colors duration-200"
            >
              Email tony@evenform.io
            </a>
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="border-t border-white/[0.06] py-12 px-6">
      <div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-white/30">
        <div>EvenForm LLC · © 2026</div>
        <div className="flex items-center gap-6">
          <a href="#services" className="hover:text-white/60 transition-colors">Services</a>
          <a href="#how-it-works" className="hover:text-white/60 transition-colors">How It Works</a>
          <a href="mailto:tony@evenform.io" className="hover:text-white/60 transition-colors">Contact</a>
        </div>
      </div>
    </footer>
  );
}

function App() {
  return (
    <>
      <Nav />
      <main id="main-content">
        <Hero />
        <Problem />
        <Services />
        <HowItWorks />
        <WhyEvenForm />
        <Contact />
      </main>
      <Footer />
    </>
  );
}

const root = createRoot(document.getElementById('root'));
root.render(<App />);