"use client";

import { Link } from "@/i18n/routing";
import { ShellSection, useShell } from "@reopt-ai/opt-shell";
import { Button, DashboardGrid, FaqAccordion } from "@reopt-ai/opt-ui";
import {
  briefingProductCapabilities,
  briefingProductFaqItems,
  briefingProductMetrics,
} from "./fixtures";
import { coerceCopyLocale } from "@/lib/localized-copy";
import { useExampleAction } from "@/components/examples/use-example-action";

const BRIEFING_COPY = {
  ko: {
    heroDescription:
      "구조화된 데이터와 AI 에이전트 기반으로 복잡한 비즈니스 의사결정을 자동화합니다.",
    evidenceButton: "근거 자료 보기",
    secondaryButton: "Product Tour →",
    intro:
      "reopt는 커머스를 중심으로 다양한 AI Agent 기반 업무 자동화를 통해 아이디어를 현실로 구현합니다.",
    platformDescription:
      "가격, 프로모션, 재고 등 주요 상거래 의사결정을 AI 기반으로 자동화하는 운영체제입니다.",
    performanceDescription: "도메인 특화 AI의 실제 운영 성과입니다.",
    dashboardAriaLabel: "대시보드 통계",
    faqAriaLabel: "자주 묻는 질문",
    faqEmptyMessage: "등록된 FAQ가 없습니다.",
    socialProof: [
      {
        quote:
          "의사결정 자동화율이 40%에서 78%로 올라갔습니다. 팀의 인지 부하가 확연히 줄었어요.",
        name: "김민수",
        role: "VP of Operations",
      },
      {
        quote: "가격 최적화에 걸리던 시간이 3일에서 4시간으로 단축됐습니다.",
        name: "이서연",
        role: "Head of Pricing",
      },
      {
        quote:
          "에이전트가 제안한 근거를 바로 확인할 수 있어서 신뢰가 생깁니다.",
        name: "박준혁",
        role: "Product Lead",
      },
    ],
    ctaDescription: "AI 의사결정 운영체제를 직접 경험해보세요.",
    capabilities: briefingProductCapabilities,
    metrics: briefingProductMetrics,
    faqItems: briefingProductFaqItems,
  },
  en: {
    heroDescription:
      "Automate complex business decisions with structured data, domain context, and AI agents that produce auditable recommendations.",
    evidenceButton: "View evidence",
    secondaryButton: "Product Tour →",
    intro:
      "reopt turns product operations into repeatable AI workflows, from commercial decisions to evidence review and operator handoff.",
    platformDescription:
      "A decision operating system for pricing, promotion, inventory, and other commerce workflows that need reliable AI assistance.",
    performanceDescription:
      "Operational outcomes from domain-specific AI decision workflows.",
    dashboardAriaLabel: "Dashboard statistics",
    faqAriaLabel: "Frequently asked questions",
    faqEmptyMessage: "No FAQ entries yet.",
    socialProof: [
      {
        quote:
          "Decision automation rose from 40% to 78%, and our operations team spends less time reconciling context.",
        name: "Mina Kim",
        role: "VP of Operations",
      },
      {
        quote:
          "Pricing optimization moved from a three-day loop to a four-hour review cycle.",
        name: "Sarah Lee",
        role: "Head of Pricing",
      },
      {
        quote:
          "The evidence layer makes every agent recommendation easier to trust and approve.",
        name: "Jun Park",
        role: "Product Lead",
      },
    ],
    ctaDescription: "Explore the AI decision operating system in context.",
    capabilities: [
      {
        id: "decision-engine",
        title: "Decision Engine",
        description:
          "Automates complex commercial decisions from structured data and live context. Pricing, inventory, and promotion variables are analyzed in one operating surface.",
      },
      {
        id: "agent-orchestration",
        title: "Agent Orchestration",
        description:
          "Domain-specific agents collaborate across end-to-end workflows, producing recommendations that operators can review without rebuilding the context.",
      },
      {
        id: "evidence-layer",
        title: "Evidence Layer",
        description:
          "Every AI decision includes traceable support, so teams can audit why a recommendation was made and intervene when the workflow requires it.",
      },
    ],
    metrics: [
      {
        id: "accuracy",
        title: "Decision Accuracy",
        value: "94.7%",
        change: "Domain-trained model baseline",
        trend: "up",
      },
      {
        id: "automation",
        title: "Automation Rate",
        value: "78%",
        change: "Compared with manual process",
        trend: "up",
      },
      {
        id: "latency",
        title: "Response Time",
        value: "<200ms",
        change: "Real-time decision loop",
        trend: "up",
      },
    ],
    faqItems: [
      {
        id: "what",
        question: "What problem does reopt Briefing solve?",
        answer:
          "It structures and automates complex business decisions such as pricing, inventory management, and promotion timing. AI agents make evidence-backed recommendations from the data operators already use.",
      },
      {
        id: "trust",
        question: "How can teams trust AI decisions?",
        answer:
          "Every recommendation includes an evidence layer that explains the inputs and reasoning path. Operators can audit, edit, or override the decision before it moves forward.",
      },
      {
        id: "integration",
        question: "Can it connect to existing systems?",
        answer:
          "Yes. The decision engine is designed for REST API and webhook integrations with ERP, CRM, and commerce platforms.",
      },
    ],
  },
} as const;

export function BriefingLandingHome({ locale }: { locale?: string }) {
  const copy = BRIEFING_COPY[coerceCopyLocale(locale)];
  const { policy } = useShell();
  const { notReal } = useExampleAction();
  const isCompact = policy.density === "compact";
  const sectionPy = isCompact ? "py-12" : "py-20 lg:py-24";

  const handleProductTour = () => {
    const target = document.getElementById("core-platform");
    if (target) {
      target.scrollIntoView({ behavior: "smooth", block: "start" });
    } else {
      notReal("Product Tour");
    }
  };

  return (
    <div>
      {/* ── Hero ── */}
      <section
        className={`mx-auto max-w-4xl px-6 md:px-8 ${isCompact ? "pt-12 pb-16" : "pt-20 pb-24 lg:pt-28 lg:pb-32"}`}
      >
        <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-[var(--opt-border)] bg-[var(--opt-bg-subtle)] px-3 py-1 text-[11px] font-medium tracking-wide text-[var(--opt-text-secondary)]">
          <span className="inline-block h-1.5 w-1.5 rounded-full bg-emerald-500" />
          AI Decision Engine v2.4 — Now Available
        </div>
        <h1 className="text-4xl font-black tracking-[-0.04em] text-[var(--opt-text)] sm:text-5xl lg:text-6xl lg:leading-[1.08]">
          Domain-Specific AI for
          <br />
          Product Decisions.
          <br />
          <span className="text-[var(--opt-text-secondary)]">
            The New Digital Labor.
          </span>
        </h1>
        <p className="mt-8 max-w-xl text-lg leading-8 font-light text-[var(--opt-text-tertiary)]">
          {copy.heroDescription}
        </p>
        <div className="mt-10 flex gap-3">
          <Link href="/examples/briefing-landing/evidence">
            <Button>{copy.evidenceButton}</Button>
          </Link>
          <Button variant="secondary" onClick={handleProductTour}>
            {copy.secondaryButton}
          </Button>
        </div>
      </section>

      {/* ── Product dashboard mockup (decorative illustration) ── */}
      <div className="mx-auto max-w-4xl px-6 md:px-8" aria-hidden="true">
        <div className="overflow-hidden rounded-sm border border-[var(--opt-border)] bg-[var(--opt-bg)]">
          <div className="flex">
            {/* Sidebar — hidden on mobile */}
            <div className="hidden w-44 shrink-0 border-r border-[var(--opt-border)] bg-[var(--opt-bg-subtle)] md:block">
              <div className="border-b border-[var(--opt-border)] px-4 py-3">
                <div className="flex items-center gap-2">
                  <div className="flex h-5 w-5 items-center justify-center rounded-sm bg-[var(--opt-text)] text-[9px] font-bold text-[var(--opt-bg)]">
                    R
                  </div>
                  <span className="text-xs font-semibold text-[var(--opt-text)]">
                    reopt
                  </span>
                </div>
              </div>
              <div className="flex flex-col gap-0.5 px-2 py-3 text-[11px] text-[var(--opt-text-tertiary)]">
                <span className="rounded-sm px-2 py-1.5">Overview</span>
                <span className="rounded-sm bg-[var(--opt-text)] px-2 py-1.5 font-medium text-[var(--opt-bg)]">
                  Decisions
                </span>
                <span className="rounded-sm px-2 py-1.5">Agents</span>
                <span className="rounded-sm px-2 py-1.5">Evidence</span>
                <span className="rounded-sm px-2 py-1.5">Audit Log</span>
              </div>
            </div>

            {/* Main content */}
            <div className="flex-1 p-4 sm:p-5">
              <div className="flex items-center justify-between">
                <div className="text-sm font-semibold text-[var(--opt-text)]">
                  Decision Pipeline
                </div>
                <div className="flex gap-3">
                  <span className="text-[10px] text-[var(--opt-text-tertiary)]">
                    Today
                  </span>
                  <span className="hidden text-[10px] text-[var(--opt-text-tertiary)] sm:inline">
                    Export
                  </span>
                </div>
              </div>

              {/* Stats — 2 cols on mobile, 4 cols on sm+ */}
              <div className="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-4 sm:gap-3">
                {[
                  { label: "Active", value: "847", sub: "+12%" },
                  { label: "Automated", value: "78%", sub: "target 80%" },
                  { label: "Accuracy", value: "94.7%", sub: "+2.1pp" },
                  { label: "Avg latency", value: "184ms", sub: "-23ms" },
                ].map((stat) => (
                  <div
                    key={stat.label}
                    className="rounded-sm border border-[var(--opt-border)] p-2.5 sm:p-3"
                  >
                    <div className="text-[10px] text-[var(--opt-text-tertiary)]">
                      {stat.label}
                    </div>
                    <div className="mt-1 text-base font-semibold text-[var(--opt-text)] sm:text-lg">
                      {stat.value}
                    </div>
                    <div className="mt-0.5 text-[10px] text-[var(--opt-text-tertiary)]">
                      {stat.sub}
                    </div>
                  </div>
                ))}
              </div>

              {/* Chart area */}
              <div className="mt-3 rounded-sm border border-[var(--opt-border)] p-3 sm:mt-4 sm:p-4">
                <div className="flex items-center justify-between text-[10px] text-[var(--opt-text-tertiary)]">
                  <span>Decision volume (7d)</span>
                  <div className="flex gap-3">
                    <span className="flex items-center gap-1">
                      <span className="inline-block h-1.5 w-1.5 rounded-full bg-[var(--opt-text)]" />
                      Automated
                    </span>
                    <span className="flex items-center gap-1">
                      <span className="inline-block h-1.5 w-1.5 rounded-full bg-[var(--opt-border-hover)]" />
                      Manual
                    </span>
                  </div>
                </div>
                <div className="mt-3 flex h-24 items-end gap-[3px] sm:h-28">
                  {[
                    [65, 20],
                    [72, 18],
                    [68, 22],
                    [80, 15],
                    [75, 17],
                    [85, 12],
                    [78, 14],
                    [88, 10],
                    [82, 13],
                    [90, 8],
                    [84, 11],
                    [92, 7],
                    [86, 9],
                    [94, 6],
                  ].map(([auto, manual], i) => (
                    <div key={i} className="flex flex-1 flex-col gap-[1px]">
                      <div
                        className="rounded-t-[1px] bg-[var(--opt-text)]/60"
                        style={{ height: `${manual}%` }}
                      />
                      <div
                        className="rounded-b-[1px] bg-[var(--opt-text)]"
                        style={{ height: `${auto}%` }}
                      />
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>

        <p className="mt-8 max-w-2xl text-base leading-7 font-light text-[var(--opt-text-secondary)]">
          {copy.intro}
        </p>
      </div>

      {/* ── Capabilities ── */}
      <div
        id="core-platform"
        className={`mx-auto max-w-4xl px-6 md:px-8 ${isCompact ? "mt-12" : "mt-24 lg:mt-32"} ${sectionPy}`}
      >
        <div className="mb-4 text-[11px] font-semibold tracking-[0.16em] text-[var(--opt-text-tertiary)] uppercase">
          Core Platform
        </div>
        <h2 className="text-3xl font-black tracking-[-0.03em] text-[var(--opt-text)] sm:text-4xl">
          The Operating System for
          <br />
          Product AI
        </h2>
        <p className="mt-6 max-w-2xl text-base leading-7 font-light text-[var(--opt-text-tertiary)]">
          {copy.platformDescription}
        </p>

        <div className="mt-16 flex flex-col gap-0">
          {copy.capabilities.map((cap, i) => (
            <div
              key={cap.id}
              className="group relative grid gap-4 border-t border-[var(--opt-border)] py-8 transition-colors hover:bg-[var(--opt-bg-subtle)] sm:py-10 lg:grid-cols-[80px_220px_1fr]"
            >
              <div className="pointer-events-none absolute top-4 right-4 text-[60px] leading-none font-black text-[var(--opt-text)]/[0.03] select-none sm:text-[80px] lg:right-8 lg:text-[120px]">
                0{i + 1}
              </div>
              <div className="text-sm font-bold text-[var(--opt-text)]">
                0{i + 1}
              </div>
              <h3 className="text-xl font-bold tracking-tight text-[var(--opt-text)]">
                {cap.title}
              </h3>
              <p className="text-sm leading-7 font-light text-[var(--opt-text-secondary)]">
                {cap.description}
              </p>
            </div>
          ))}
          <div className="border-t border-[var(--opt-border)]" />
        </div>
      </div>

      {/* ── Metrics ── */}
      <div className="bg-[var(--opt-bg-subtle)]">
        <div className={`mx-auto max-w-4xl px-6 md:px-8 ${sectionPy}`}>
          <ShellSection
            title="Performance"
            description={copy.performanceDescription}
          >
            <DashboardGrid
              stats={[...copy.metrics]}
              columns={3}
              labels={{ ariaLabel: copy.dashboardAriaLabel }}
            />
          </ShellSection>
        </div>
      </div>

      {/* ── Social proof ── */}
      <div className={`mx-auto max-w-4xl px-6 md:px-8 ${sectionPy}`}>
        <div className="grid gap-6 sm:grid-cols-3">
          {copy.socialProof.map((t) => (
            <div
              key={t.name}
              className="flex flex-col justify-between rounded-sm border border-[var(--opt-border)] p-5"
            >
              <p className="text-sm leading-6 font-light text-[var(--opt-text-secondary)]">
                &ldquo;{t.quote}&rdquo;
              </p>
              <div className="mt-4 border-t border-[var(--opt-border)] pt-3">
                <div className="text-sm font-semibold text-[var(--opt-text)]">
                  {t.name}
                </div>
                <div className="text-[11px] text-[var(--opt-text-tertiary)]">
                  {t.role}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ── CTA ── */}
      <div className="border-t border-[var(--opt-border)] bg-[var(--opt-bg-subtle)]">
        <div className={`mx-auto max-w-4xl px-6 md:px-8 ${sectionPy}`}>
          <div className="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
            <div>
              <h2 className="text-3xl font-black tracking-tight text-[var(--opt-text)] sm:text-4xl">
                Get Started
              </h2>
              <p className="mt-3 text-base font-light text-[var(--opt-text-tertiary)]">
                {copy.ctaDescription}
              </p>
            </div>
            <div className="flex gap-3">
              <Link href="/examples/briefing-landing/evidence">
                <Button>{copy.evidenceButton}</Button>
              </Link>
              <Button variant="secondary" onClick={() => notReal("Contact")}>
                Contact →
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* ── FAQ ── */}
      <div className={`mx-auto max-w-4xl px-6 md:px-8 ${sectionPy}`}>
        <ShellSection title="FAQ">
          <FaqAccordion
            items={[...copy.faqItems]}
            labels={{
              ariaLabel: copy.faqAriaLabel,
              emptyMessage: copy.faqEmptyMessage,
            }}
          />
        </ShellSection>
      </div>
    </div>
  );
}