import type { Metadata } from "next";
import Link from "next/link";
import {
  Activity,
  ArrowRight,
  Braces,
  Building2,
  Check,
  Clock,
  EyeOff,
  Fingerprint,
  Globe,
  Layers,
  MapPin,
  MonitorSmartphone,
  Network,
  RefreshCw,
  ShieldCheck,
  Terminal,
  Waypoints,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { CodeBlock } from "@/components/ui/code-block";
import { HeroCodeTabs } from "@/components/marketing/hero-code-tabs";
import { ArchitectureDiagram } from "@/components/marketing/architecture-diagram";
import { Reveal } from "@/components/marketing/reveal";
import { cn } from "@/lib/utils";

export const metadata: Metadata = {
  title: { absolute: "Fetcha — The web, accessible through one API." },
  description:
    "Fetcha intelligently routes every request across premium proxy networks, sessions and a managed browser to deliver reliable web access at scale. Private, invitation-only platform.",
  alternates: { canonical: "/" },
};

/* ------------------------------------------------------------------ */
/* Data                                                                */
/* ------------------------------------------------------------------ */

const SCORE_WEIGHTS = [
  { label: "Historical success", weight: 35, tone: "bg-accent" },
  { label: "Cost", weight: 20, tone: "bg-accent/80" },
  { label: "Latency", weight: 15, tone: "bg-accent/65" },
  { label: "Network health", weight: 15, tone: "bg-accent/50" },
  { label: "Geography", weight: 10, tone: "bg-accent/35" },
  { label: "Session stability", weight: 5, tone: "bg-accent/20" },
] as const;

const ESCALATION: ReadonlyArray<{ step: string; title: string; body: string; cost: string; state: "live" | "soon" }> = [
  { step: "Attempt 1", title: "Best-scored route", body: "The cheapest route with a strong success history for this domain, from the requested geography.", cost: "~$0.0005", state: "live" },
  { step: "Attempt 2", title: "Alternate route, fresh IP", body: "Blocked or timed out? Fetcha rotates the exit IP and switches to an alternate route in the same class.", cost: "~$0.0009", state: "live" },
  { step: "Attempt 3", title: "Premium network", body: "Escalates to a premium residential route pinned to the target country, with tuned headers and pacing.", cost: "~$0.002", state: "live" },
  { step: "Attempt 4", title: "Managed browser rendering", body: "When the block is a JavaScript challenge, a managed headless Chromium renders the page on the same route, solves the challenge and returns the rendered DOM.", cost: "~$0.004", state: "live" },
];

const FEATURES: Array<{ icon: React.ComponentType<{ className?: string }>; title: string; body: string; soon?: boolean; detail?: string }> = [
  { icon: Globe, title: "Global proxy network", body: "Residential exits in 45 target countries, aggregated behind one endpoint. Fetcha manages upstream capacity, so you never juggle vendors or IP pools.", detail: "residential · live" },
  { icon: Layers, title: "Session management", body: "Sticky sessions keep the same exit IP for up to 30 minutes. Create one with POST /v1/sessions and pass its id on every follow-up request.", detail: "ttl 60–1800 s" },
  { icon: MapPin, title: "Geo targeting", body: "Pin requests to a country, region or city with ISO codes. Prices, availability and search results as your users actually see them.", detail: "country · region · city" },
  { icon: RefreshCw, title: "Automatic retries", body: "Blocks, CAPTCHAs, challenges and timeouts trigger retries on a new IP, a new header profile or an alternate network, with jittered backoff, within the request timeout.", detail: "up to 5 retries" },
  { icon: MonitorSmartphone, title: "Managed browser rendering", body: "Render JavaScript-heavy pages in a managed headless Chromium with the same routing, geo and session controls. Blocked HTTP attempts escalate to it automatically; screenshots on request.", detail: "browser: true · auto-escalation" },
  { icon: Network, title: "Crawl & map", body: "Turn a whole site into Markdown, text or HTML with one asynchronous job, or list its URLs from the sitemap and links. Every page is a normal, logged request.", detail: "/v1/crawl · /v1/map" },
  { icon: Terminal, title: "Developer playground", body: "Run real requests from the dashboard, inspect attempts, modes and timings, then copy production-ready code for your language.", detail: "dashboard" },
  { icon: Activity, title: "Observability", body: "Every call carries a request id. Logs show status, network class, mode, attempts, latency and bytes, with sensitive headers redacted.", detail: "X-Fetcha-Request-ID" },
  { icon: Braces, title: "Structured extraction", body: "Turn fetched pages into typed JSON with a schema you define. The /v1/extract endpoint is on the roadmap and not yet callable.", soon: true },
  { icon: Building2, title: "Private platform", body: "Access is granted by invitation. One unlimited plan: no request quota, 200 concurrent requests, all network classes, 90-day retention, browser and crawl included. No billing.", detail: "hello@fetcha.co" },
];

const STEPS = [
  { title: "Get invited", body: "An administrator adds your email." },
  { title: "Log in", body: "Set your password, confirm your email." },
  { title: "Create a key", body: "Scoped fch_live_ or fch_test_ keys." },
  { title: "Open the Playground", body: "Try a URL and a country." },
  { title: "Run", body: "Inspect attempts, timing, bytes." },
  { title: "Copy code", body: "Generated cURL, JavaScript or Python." },
];

const SECURITY = [
  { icon: ShieldCheck, title: "SSRF protection", body: "Only http and https. Localhost, private ranges, link-local, metadata and internal hosts are refused, and every redirect is re-validated." },
  { icon: EyeOff, title: "Redacted logs", body: "Authorization, Cookie and other sensitive headers are stripped before anything is written. Response bodies are not stored by default." },
  { icon: Fingerprint, title: "Request IDs", body: "A unique req_ id on every response header and every log line, so support and audits point at exactly one call." },
  { icon: Clock, title: "90-day retention", body: "Request metadata and crawl results are kept 90 days, then deleted. Response bodies are not stored unless you enable it per project." },
];

const SESSION_SNIPPET = `# 1. Open a sticky session pinned to Canada
curl -X POST https://www.fetcha.co/v1/sessions \\
  -H "Authorization: Bearer fch_live_..." \\
  -d '{ "country": "CA", "ttl": 900, "label": "checkout-flow" }'
# → { "id": "sess_01j8x5...", "status": "active", "expires_at": "..." }

# 2. Reuse the same exit IP across requests
curl -X POST https://www.fetcha.co/v1/fetch \\
  -H "Authorization: Bearer fch_live_..." \\
  -d '{ "url": "https://shop.example/cart", "session": "sess_01j8x5..." }'`;

/* ------------------------------------------------------------------ */
/* Small presentational helpers                                        */
/* ------------------------------------------------------------------ */

function Eyebrow({ children, className }: { children: React.ReactNode; className?: string }) {
  return <p className={cn("text-[11.5px] font-semibold uppercase tracking-[0.12em] text-accent", className)}>{children}</p>;
}

function SectionHeading({ eyebrow, title, body, id, align = "left" }: { eyebrow: string; title: string; body?: string; id?: string; align?: "left" | "center" }) {
  return (
    <Reveal className={cn("max-w-2xl", align === "center" && "mx-auto text-center")}>
      <Eyebrow>{eyebrow}</Eyebrow>
      <h2 id={id} className="mt-2 text-[28px] font-semibold leading-[1.15] tracking-tight sm:text-[34px]">
        {title}
      </h2>
      {body ? <p className="mt-3 text-[15.5px] leading-relaxed text-fg-muted">{body}</p> : null}
    </Reveal>
  );
}

/* ------------------------------------------------------------------ */
/* Page                                                                */
/* ------------------------------------------------------------------ */

export default function HomePage() {
  return (
    <>
      {/* ---------------------------------------------------------------- Hero */}
      <section className="relative overflow-hidden border-b border-border" aria-labelledby="hero-title">
        <div className="absolute inset-x-0 top-0 -z-10 h-[520px] grid-bg" aria-hidden />
        <div className="container-page grid items-center gap-12 py-16 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.05fr)] lg:gap-14 lg:py-24">
          <div className="animate-fade-up">
            <Eyebrow>Intelligent web access infrastructure</Eyebrow>
            <h1 id="hero-title" className="mt-4 text-[38px] font-semibold leading-[1.05] tracking-[-0.03em] sm:text-[52px] lg:text-[56px]">
              The web, accessible through one API.
            </h1>
            <p className="mt-5 max-w-xl text-[16.5px] leading-relaxed text-fg-muted sm:text-[17.5px]">
              Fetcha intelligently routes every request across premium proxy networks, sticky sessions and a managed browser to deliver reliable web access at scale. Fetch, render, crawl.
            </p>
            <div className="mt-8 flex flex-wrap items-center gap-3">
              <Button asChild size="lg">
                <Link href="/login">
                  Log in <ArrowRight aria-hidden />
                </Link>
              </Button>
              <Button asChild size="lg" variant="outline">
                <a href="mailto:hello@fetcha.co?subject=Fetcha%20access">Request access</a>
              </Button>
              <Link href="/docs" className="text-[14px] font-medium text-fg-muted underline-offset-4 hover:text-fg hover:underline">
                View documentation
              </Link>
            </div>
            <dl className="mt-10 grid max-w-md grid-cols-3 gap-4 border-t border-border pt-6">
              {[
                ["Unlimited", "requests, one plan"],
                ["45", "target countries"],
                ["1 call", "to get a page"],
              ].map(([v, l]) => (
                <div key={l}>
                  <dt className="sr-only">{l}</dt>
                  <dd className="font-mono text-[20px] font-semibold tabular tracking-tight text-fg">{v}</dd>
                  <dd className="mt-0.5 text-[12.5px] text-fg-muted">{l}</dd>
                </div>
              ))}
            </dl>
          </div>
          <div className="min-w-0 animate-fade-up [animation-delay:120ms]">
            <HeroCodeTabs />
          </div>
        </div>
      </section>

      {/* ------------------------------------------------------------ Platform */}
      <section id="platform" className="scroll-mt-16 border-b border-border py-20 lg:py-28" aria-labelledby="platform-title">
        <div className="container-page">
          <SectionHeading eyebrow="Platform" id="platform-title" title="One request in. The right route out." body="You send a URL. Fetcha authenticates, validates and scores every available route for that domain, then fetches through the network class most likely to succeed at the lowest cost." />
          <Reveal className="mt-12" delay={0.05}>
            <ArchitectureDiagram />
          </Reveal>
        </div>
      </section>

      {/* -------------------------------------------------------- Routing split */}
      <section className="border-b border-border py-20 lg:py-28" aria-labelledby="routing-title">
        <div className="container-page grid gap-12 lg:grid-cols-2 lg:items-center lg:gap-20">
          <SectionHeading eyebrow="Intelligent routing" id="routing-title" title="Every route gets a score. The best one gets your request." body="Fetcha keeps a profile for every domain it has seen: which routes succeeded, how fast, at what price, from where. In auto mode each request is scored on six weighted signals and sent down the winning path. Circuit breakers take unhealthy routes out of rotation automatically." />
          <Reveal delay={0.05}>
            <figure className="rounded-lg border border-border bg-bg-elevated p-5 shadow-xs sm:p-6">
              <figcaption className="flex items-center justify-between text-[12px] text-fg-subtle">
                <span className="font-medium uppercase tracking-wide">Routing score weights</span>
                <span className="font-mono tabular">Σ = 100</span>
              </figcaption>
              <div className="mt-4 flex h-3 w-full overflow-hidden rounded-sm bg-bg-muted" role="img" aria-label="Score weights: historical success 35%, cost 20%, latency 15%, network health 15%, geography 10%, session stability 5%">
                {SCORE_WEIGHTS.map((w) => (
                  <div key={w.label} className={cn("h-full border-r border-bg last:border-r-0", w.tone)} style={{ width: `${w.weight}%` }} />
                ))}
              </div>
              <ol className="mt-5 grid gap-2.5 sm:grid-cols-2">
                {SCORE_WEIGHTS.map((w) => (
                  <li key={w.label} className="flex items-center justify-between gap-3 text-[13.5px]">
                    <span className="flex items-center gap-2.5 text-fg-muted">
                      <span className={cn("size-2.5 rounded-[3px]", w.tone)} aria-hidden />
                      {w.label}
                    </span>
                    <span className="font-mono tabular font-medium text-fg">{w.weight}%</span>
                  </li>
                ))}
              </ol>
              <p className="mt-5 border-t border-border pt-4 text-[12.5px] leading-relaxed text-fg-subtle">
                Scores are recomputed continuously from your own traffic and platform-wide health. Force a class with <code className="font-mono text-fg-muted">{'network: "residential"'}</code> when you need to.
              </p>
            </figure>
          </Reveal>
        </div>
      </section>

      {/* ----------------------------------------------------- Escalation split */}
      <section className="border-b border-border bg-bg-subtle/50 py-20 lg:py-28" aria-labelledby="escalation-title">
        <div className="container-page grid gap-12 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)] lg:items-start lg:gap-20">
          <Reveal>
            <ol className="relative border-l border-border pl-6" aria-label="How a request escalates">
              {ESCALATION.map((e, i) => (
                <li key={e.step} className={cn("relative pb-8 last:pb-0", e.state === "soon" && "opacity-80")}>
                  <span className={cn("absolute -left-[31px] top-0.5 flex size-[22px] items-center justify-center rounded-full border bg-bg text-[11px] font-mono font-medium tabular", e.state === "soon" ? "border-border-strong text-fg-subtle" : "border-accent text-accent")} aria-hidden>
                    {i + 1}
                  </span>
                  <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
                    <span className="font-mono text-[11.5px] uppercase tracking-wide text-fg-subtle">{e.step}</span>
                    <h3 className="text-[15.5px] font-semibold tracking-tight">{e.title}</h3>
                    {e.state === "soon" ? <Badge variant="outline">Coming soon</Badge> : null}
                  </div>
                  <p className="mt-1.5 max-w-lg text-[14px] leading-relaxed text-fg-muted">{e.body}</p>
                  <p className="mt-2 font-mono text-[12.5px] tabular text-fg-subtle">
                    Illustrative cost: <span className={e.state === "soon" ? "" : "text-fg"}>{e.cost}</span>
                  </p>
                </li>
              ))}
            </ol>
          </Reveal>
          <div className="lg:sticky lg:top-24">
            <SectionHeading eyebrow="Escalation" id="escalation-title" title="Cheap first. Premium and browser only when they earn their keep." body="A block is not a failure, it is a signal. Fetcha starts on the most economical route and escalates step by step, up to a full browser render for JavaScript challenges, so heavy infrastructure is used only for the requests that need it. A blocked target still returns 200 with success: false, the upstream status, the attempt count and the block reason, never a silent retry loop." />
            <Reveal delay={0.1} className="mt-6">
              <p className="text-[12.5px] leading-relaxed text-fg-subtle">Costs shown are illustrative upstream averages per request for a typical 200 KB HTML page, for transparency. Fetcha is a private platform with a single unlimited plan; there is no per-request billing.</p>
            </Reveal>
          </div>
        </div>
      </section>

      {/* -------------------------------------------------------- Feature grid */}
      <section className="border-b border-border py-20 lg:py-28" aria-labelledby="features-title">
        <div className="container-page">
          <SectionHeading eyebrow="Capabilities" id="features-title" title="Everything between your code and the page." body="Built for engineers who would rather ship features than babysit proxies. What is live is live; what is coming is labelled." />
          <ul className="mt-12 grid gap-px overflow-hidden rounded-lg border border-border bg-border sm:grid-cols-2 lg:grid-cols-3" role="list">
            {FEATURES.map((f) => (
              <li key={f.title} className={cn("relative flex flex-col bg-bg p-6", f.soon && "bg-bg-subtle/60")}>
                <div className="flex items-center justify-between">
                  <f.icon className={cn("size-[18px]", f.soon ? "text-fg-subtle" : "text-accent")} aria-hidden />
                  {f.soon ? <Badge variant="outline">Coming soon</Badge> : f.detail ? <span className="font-mono text-[11px] text-fg-subtle">{f.detail}</span> : null}
                </div>
                <h3 className={cn("mt-4 text-[15.5px] font-semibold tracking-tight", f.soon && "text-fg-muted")}>{f.title}</h3>
                <p className="mt-1.5 text-[13.5px] leading-relaxed text-fg-muted">{f.body}</p>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* ------------------------------------------------------- Sessions split */}
      <section className="border-b border-border py-20 lg:py-28" aria-labelledby="sessions-title">
        <div className="container-page grid gap-12 lg:grid-cols-2 lg:items-center lg:gap-20">
          <div className="order-2 lg:order-1">
            <Reveal>
              <CodeBlock code={SESSION_SNIPPET} lang="bash" title="sticky-session.sh" />
            </Reveal>
          </div>
          <div className="order-1 lg:order-2">
            <SectionHeading eyebrow="Sessions and geo" id="sessions-title" title="Same IP, same country, across a whole flow." body="Multi-step journeys need a consistent identity: log in, paginate, add to cart, read the price. Sticky sessions hold one residential exit for up to 30 minutes, pinned to the country, region or city you choose, and expire on their own when you are done." />
            <Reveal delay={0.05} className="mt-6">
              <ul className="grid gap-2 text-[14px] text-fg-muted">
                {["ISO country, region and city targeting on every request", "Sessions are scoped to your project and visible in the dashboard", "Idempotency-Key supported on session creation", "Expired sessions return SESSION_EXPIRED, never a silent new IP"].map((t) => (
                  <li key={t} className="flex items-start gap-2.5">
                    <Check className="mt-0.5 size-4 shrink-0 text-success" aria-hidden />
                    {t}
                  </li>
                ))}
              </ul>
            </Reveal>
          </div>
        </div>
      </section>

      {/* -------------------------------------------------- Developer experience */}
      <section className="border-b border-border bg-bg-subtle/50 py-20 lg:py-28" aria-labelledby="dx-title">
        <div className="container-page">
          <SectionHeading eyebrow="Developer experience" id="dx-title" title="From invitation to a working request in a few minutes." align="center" />
          <Reveal className="mt-12" delay={0.05}>
            <ol className="grid gap-px overflow-hidden rounded-lg border border-border bg-border sm:grid-cols-3 lg:grid-cols-6">
              {STEPS.map((s, i) => (
                <li key={s.title} className="flex flex-col gap-2 bg-bg p-5">
                  <span className="font-mono text-[12px] font-medium tabular text-accent">0{i + 1}</span>
                  <span className="text-[14.5px] font-semibold tracking-tight">{s.title}</span>
                  <span className="text-[12.5px] leading-snug text-fg-muted">{s.body}</span>
                </li>
              ))}
            </ol>
          </Reveal>
          <Reveal className="mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-[13px] text-fg-muted" delay={0.1}>
            <span className="flex items-center gap-2"><Waypoints className="size-4 text-fg-subtle" aria-hidden /> SDKs for JavaScript and Python (install from source until published)</span>
            <span className="flex items-center gap-2"><Terminal className="size-4 text-fg-subtle" aria-hidden /> OpenAPI-style reference with every error code</span>
          </Reveal>
        </div>
      </section>

      {/* -------------------------------------------------------------- Security */}
      <section className="border-b border-border py-16 lg:py-20" aria-labelledby="security-title">
        <div className="container-page">
          <div className="flex flex-col gap-8 lg:flex-row lg:items-start lg:gap-16">
            <Reveal className="lg:w-72 lg:shrink-0">
              <Eyebrow>Security and compliance</Eyebrow>
              <h2 id="security-title" className="mt-2 text-[24px] font-semibold leading-tight tracking-tight">
                Defaults you do not have to think about.
              </h2>
              <p className="mt-3 text-[14px] leading-relaxed text-fg-muted">
                Read the <Link href="/legal/privacy" className="text-accent underline-offset-4 hover:underline">Privacy Policy</Link>, <Link href="/legal/acceptable-use" className="text-accent underline-offset-4 hover:underline">Acceptable Use</Link> and <Link href="/legal/dpa" className="text-accent underline-offset-4 hover:underline">DPA</Link>.
              </p>
            </Reveal>
            <ul className="grid flex-1 gap-6 sm:grid-cols-2">
              {SECURITY.map((s, i) => (
                <Reveal as="li" key={s.title} delay={0.04 * i} className="flex gap-3.5">
                  <s.icon className="mt-0.5 size-[18px] shrink-0 text-fg" aria-hidden />
                  <div>
                    <h3 className="text-[14.5px] font-semibold tracking-tight">{s.title}</h3>
                    <p className="mt-1 text-[13.5px] leading-relaxed text-fg-muted">{s.body}</p>
                  </div>
                </Reveal>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* -------------------------------------------------------------- Final CTA */}
      <section id="about" className="scroll-mt-16 py-20 lg:py-28" aria-labelledby="cta-title">
        <div className="container-page">
          <Reveal className="relative overflow-hidden rounded-xl border border-border bg-bg-elevated px-6 py-14 text-center shadow-xs sm:px-12">
            <div className="absolute inset-0 -z-10 grid-bg opacity-60" aria-hidden />
            <Eyebrow>Get started</Eyebrow>
            <h2 id="cta-title" className="mx-auto mt-3 max-w-2xl text-[30px] font-semibold leading-[1.1] tracking-tight sm:text-[40px]">
              Stop building proxy plumbing. Start fetching.
            </h2>
            <p className="mx-auto mt-4 max-w-xl text-[15.5px] leading-relaxed text-fg-muted">
              Fetcha is built and operated from Québec, Canada, by engineers who spent too many years maintaining scrapers. One endpoint, honest limits, and a private platform for invited teams.
            </p>
            <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
              <Button asChild size="lg">
                <Link href="/login">
                  Log in <ArrowRight aria-hidden />
                </Link>
              </Button>
              <Button asChild size="lg" variant="outline">
                <a href="mailto:hello@fetcha.co?subject=Fetcha%20access">Request access</a>
              </Button>
            </div>
            <p className="mt-5 text-[13px] text-fg-subtle">Invitation-only. One unlimited plan, no billing.</p>
          </Reveal>
        </div>
      </section>
    </>
  );
}