sase.tr/apps/web/src/routes/_auth.tsx

import { capture } from "@/lib/posthog";
import { Link, Outlet, createFileRoute } from "@tanstack/react-router";
import { Database, ShieldCheck, Zap } from "lucide-react";
import { useEffect, useRef } from "react";

export const Route = createFileRoute("/_auth")({
  component: AuthLayout,
});

function AuthLayout() {
  const testimonialRef = useRef<HTMLDivElement>(null);
  const impressionFiredRef = useRef(false);

  // Social proof impression tracking
  useEffect(() => {
    const el = testimonialRef.current;
    if (!el) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting && !impressionFiredRef.current) {
          impressionFiredRef.current = true;
          capture("social_proof_impression", { page: "auth" });
        }
      },
      { threshold: 0.5 },
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  function handleTestimonialClick() {
    capture("social_proof_engaged", { page: "auth" });
  }

  return (
    <div className="flex min-h-screen">
      {/* Left Panel — Form */}
      <main id="main-content" className="flex w-full flex-col justify-between px-6 py-8 lg:w-1/2">
        <div className="flex flex-1 items-center justify-center">
          <div className="w-full max-w-md">
            <Outlet />
          </div>
        </div>
        <div className="flex justify-center pt-6">
          <Link
            to="/"
            className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground tracking-wider"
          >
            SASE
          </Link>
        </div>
      </main>

      {/* Right Panel — Promo (always dark via .dark scope, hidden on mobile) */}
      <div className="dark relative hidden overflow-hidden border-l border-border bg-background text-foreground lg:flex lg:w-1/2 lg:flex-col lg:justify-between lg:px-12 lg:py-12">
        {/* Brand glow ambient */}
        <div className="pointer-events-none absolute -left-32 top-0 h-[500px] w-[500px] rounded-full bg-brand/10 blur-[140px]" />
        <div className="pointer-events-none absolute -right-24 bottom-0 h-[400px] w-[400px] rounded-full bg-brand/8 blur-[120px]" />
        {/* Subtle grid */}
        <div className="pointer-events-none absolute inset-0 opacity-[0.04]">
          <svg width="100%" height="100%" aria-hidden="true">
            <defs>
              <pattern id="auth-grid" width="48" height="48" patternUnits="userSpaceOnUse">
                <path d="M 48 0 L 0 0 0 48" fill="none" stroke="currentColor" strokeWidth="1" />
              </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#auth-grid)" />
          </svg>
        </div>

        <div className="relative flex flex-1 flex-col justify-center space-y-8">
          {/* Heading */}
          <div className="space-y-3">
            <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/60 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur-sm">
              <span className="size-1.5 rounded-full bg-brand" />
              Sase.tr
            </span>
            <h2 className="font-[family-name:var(--font-display)] text-4xl font-bold tracking-tight">
              Doğru parçayı
              <br />
              <span className="text-foreground/60">ilk seferde bulun.</span>
            </h2>
            <p className="text-base leading-relaxed text-muted-foreground">
              Birden fazla katalogda çapraz sorgulama ile her zaman en güncel OEM kodları. Şase
              numarasını girin, doğru parçayı saniyeler içinde bulun.
            </p>
          </div>

          {/* Stats */}
          <div className="flex flex-wrap gap-2">
            <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-surface/60 px-3 py-1.5 text-xs text-foreground/80 backdrop-blur-sm">
              <Zap className="size-3" />
              1.2sn Sorgu
            </span>
            <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-surface/60 px-3 py-1.5 text-xs text-foreground/80 backdrop-blur-sm">
              <svg
                role="img"
                aria-label="icon"
                className="size-3"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2" />
                <circle cx="7" cy="17" r="2" />
                <circle cx="17" cy="17" r="2" />
              </svg>
              50+ Marka
            </span>
            <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-surface/60 px-3 py-1.5 text-xs text-foreground/80 backdrop-blur-sm">
              <Database className="size-3" />
              <span className="tabular">1M+ OEM Parça</span>
            </span>
            <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-surface/60 px-3 py-1.5 text-xs text-foreground/80 backdrop-blur-sm">
              <ShieldCheck className="size-3" />
              <span className="tabular">%99.9 Uptime</span>
            </span>
          </div>

          {/* Brand row */}
          <p className="text-sm text-muted-foreground">
            BMW · Mercedes-Benz · Audi · VW · Fiat · Renault · Toyota · Honda · Hyundai · Ford ·
            Opel · Skoda
          </p>

          {/* Testimonial */}
          <div
            ref={testimonialRef}
            // biome-ignore lint/a11y/useSemanticElements: analytics-only interaction on content block
            role="button"
            tabIndex={0}
            onClick={handleTestimonialClick}
            onKeyDown={(e) => {
              if (e.key === "Enter" || e.key === " ") {
                e.preventDefault();
                handleTestimonialClick();
              }
            }}
            className="rounded-2xl border border-border bg-surface/40 p-6 backdrop-blur-sm cursor-pointer"
          >
            <p className="text-sm leading-relaxed text-foreground/85">
              &ldquo;Sase.tr&apos;ye geçtiğimizden beri yanlış parça siparişlerimiz neredeyse sıfıra
              indi. Aylık 40 saatin üzerinde zaman tasarrufu sağlıyoruz.&rdquo;
            </p>
            <div className="mt-4 flex items-center gap-3">
              <div className="flex size-10 items-center justify-center rounded-full bg-muted text-sm font-medium">
                MK
              </div>
              <div>
                <p className="text-sm font-medium">Mehmet K.</p>
                <p className="text-xs text-muted-foreground">Yedek Parça İşletme Sahibi</p>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom trial badge */}
        <div className="relative flex items-center gap-2 pt-6 text-sm text-muted-foreground">
          <ShieldCheck className="size-4 text-brand" />
          30 gün Full Paket ücretsiz deneyin — kredi kartı gerekmez
        </div>
      </div>
    </div>
  );
}