"use client";

import { Link } from "@/i18n/routing";
import { useMemo } from "react";
import { ShellSection, useShell } from "@reopt-ai/opt-shell";
import { deriveHeroGradient } from "@reopt-ai/opt-palette";
import {
  Badge,
  Button,
  Card,
  CardContent,
  FaqAccordion,
} from "@reopt-ai/opt-ui";
import {
  campaignProductFeatures,
  campaignProductFaqItems,
  campaignProductLogos,
  campaignProductPartners,
  campaignProductTrustBadges,
} from "./fixtures";
import { useExampleAction } from "@/components/examples/use-example-action";

export function CampaignLandingHome() {
  const { policy } = useShell();
  const { notReal } = useExampleAction();

  const heroColors = useMemo(() => {
    const theme = policy.theme;
    if (theme.mode === "generated" && theme.generatedLightTokens) {
      const accent = theme.generatedLightTokens["--opt-accent"] ?? "#6366f1";
      return deriveHeroGradient(accent);
    }
    return {
      base: "linear-gradient(180deg, #0a0a0f 0%, #0f0f1a 50%, #0a0a0f 100%)",
      glow: "radial-gradient(ellipse at top center, rgba(99,102,241,0.15), transparent 60%)",
    };
  }, [policy.theme]);

  return (
    <div>
      {/* ── Announcement bar ── */}
      <div className="border-b border-white/10 bg-[linear-gradient(90deg,#4f46e5,#6366f1,#818cf8)]">
        <div className="mx-auto flex max-w-7xl items-center justify-center gap-4 px-6 py-2.5 md:px-8">
          <Badge variant="default" className="bg-white/20 text-white">
            NEW
          </Badge>
          <span className="text-sm font-medium text-white">
            reopt AI — 자연어로 캠페인 인사이트를 확인하세요
          </span>
          <button
            type="button"
            onClick={() => notReal("자세히 보기")}
            className="hidden rounded text-sm font-semibold text-white/90 transition-colors hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white sm:inline-flex"
          >
            자세히 보기 →
          </button>
        </div>
      </div>

      {/* ── Hero (dark) ── */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-[#0a0a0f]" />
        <div
          className="absolute inset-0"
          style={{ background: heroColors.glow }}
        />

        <div className="relative mx-auto max-w-5xl px-6 pt-20 pb-8 text-center md:px-8 lg:pt-28">
          <h1 className="text-4xl font-bold tracking-tight text-white sm:text-5xl md:text-6xl lg:text-7xl">
            크로스 플랫폼 성과
            <br />
            측정도 AI로 완성하세요
          </h1>
          <p className="mx-auto mt-6 max-w-2xl text-base leading-7 text-white/60 sm:text-lg">
            웹, 앱, PC, CTV, 콘솔까지 모든 플랫폼 어트리뷰션과 코호트 분석. AI와
            LTV 예측, 광고사기 방지까지 모든 기능을 추가 비용 없이 활용해
            보세요.
          </p>

          <div className="mt-8 flex flex-wrap justify-center gap-3">
            <Link href="/examples/campaign-landing/flow">
              <Button size="lg">데모 신청하기 →</Button>
            </Link>
            <Button
              size="lg"
              variant="secondary"
              onClick={() =>
                document.getElementById("pricing-faq")?.scrollIntoView({
                  behavior: "smooth",
                  block: "start",
                })
              }
            >
              요금 확인하기
            </Button>
          </div>

          {/* Trust badges */}
          <div className="mt-8 flex flex-wrap items-center justify-center gap-6">
            {campaignProductTrustBadges.map((badge) => (
              <div key={badge.id} className="flex items-center gap-2">
                <div className="h-4 w-4 rounded-full bg-emerald-500/80" />
                <span className="text-sm text-white/50">
                  {badge.label} {badge.value}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* Product screenshot mockup (static preview, non-interactive) */}
        <div className="relative mx-auto max-w-5xl px-6 pb-16 md:px-8">
          <div
            aria-hidden="true"
            className="pointer-events-none relative overflow-hidden rounded-xl border border-white/10 bg-white shadow-2xl shadow-indigo-500/10 select-none"
          >
            <span className="absolute top-3 right-3 z-10 rounded-full bg-gray-900/70 px-2.5 py-1 text-[11px] font-medium tracking-wide text-white/90 uppercase">
              Preview
            </span>
            {/* Mini product UI */}
            <div className="flex">
              {/* Sidebar */}
              <div className="hidden w-48 shrink-0 border-r border-gray-200 bg-gray-50 p-4 md:block">
                <div className="flex items-center gap-2 text-sm font-semibold text-gray-900">
                  <div className="h-6 w-6 rounded bg-indigo-500 text-center text-xs leading-6 text-white">
                    R
                  </div>
                  reopt
                </div>
                <div className="mt-6 flex flex-col gap-1 text-xs text-gray-500">
                  <span className="rounded px-2 py-1">Tracking link</span>
                  <span className="rounded bg-indigo-50 px-2 py-1 font-medium text-indigo-600">
                    Reports
                  </span>
                  <span className="ml-4 text-[11px] text-indigo-500">
                    KEY METRICS
                  </span>
                  <span className="ml-4 rounded px-2 py-1">Actuals</span>
                  <span className="ml-4 rounded px-2 py-1">Trend</span>
                  <span className="ml-4 rounded px-2 py-1">Active Users</span>
                  <span className="mt-2 text-[11px] text-indigo-500">
                    USER BEHAVIOR
                  </span>
                  <span className="ml-4 rounded px-2 py-1">Funnel</span>
                  <span className="ml-4 rounded px-2 py-1">Retention</span>
                  <span className="ml-4 rounded bg-indigo-50 px-2 py-1 font-medium text-indigo-600">
                    Revenue
                  </span>
                </div>
              </div>
              {/* Main content */}
              <div className="flex-1 p-6">
                <div className="text-base font-semibold text-gray-900">
                  Daily Revenue by Ad Creative
                </div>
                <div className="mt-2 flex items-center gap-2">
                  <span className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
                    Cohort
                  </span>
                  <span className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
                    D/1
                  </span>
                </div>
                {/* Chart preview (decorative, non-data) */}
                <div className="relative mt-4 h-48">
                  {/* faint y-axis gridlines */}
                  <div className="pointer-events-none absolute inset-0 flex flex-col justify-between">
                    {[0, 1, 2, 3].map((line) => (
                      <div
                        key={line}
                        className="border-t border-dashed border-gray-200"
                      />
                    ))}
                    <div className="border-t border-gray-300" />
                  </div>
                  <div className="relative flex h-full items-end gap-1">
                    {[
                      40, 55, 70, 85, 75, 90, 60, 95, 80, 65, 100, 85, 70, 90,
                      75, 88, 92, 78, 95, 82,
                    ].map((h, i) => (
                      <div
                        key={i}
                        className="flex-1 rounded-t bg-gradient-to-t from-indigo-400 to-indigo-300"
                        style={{ height: `${h}%` }}
                      />
                    ))}
                  </div>
                </div>
                <div className="mt-3 flex items-center gap-4 text-xs text-gray-400">
                  {[
                    "Creative A",
                    "Creative B",
                    "Creative C",
                    "Creative D",
                    "Creative E",
                  ].map((name, i) => (
                    <div key={name} className="flex items-center gap-1">
                      <div
                        className="h-2 w-2 rounded-full"
                        style={{
                          backgroundColor: [
                            "#6366f1",
                            "#06b6d4",
                            "#10b981",
                            "#f59e0b",
                            "#ec4899",
                          ][i],
                        }}
                      />
                      <span>{name}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── Logo trust band ── */}
      <div className="border-y border-[var(--opt-border)] bg-[var(--opt-bg)]">
        <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-x-12 gap-y-4 px-6 py-8 md:px-8">
          {campaignProductLogos.map((name) => (
            <span
              key={name}
              className="text-base font-bold tracking-wide text-[var(--opt-text-secondary)]/30"
            >
              {name}
            </span>
          ))}
        </div>
      </div>

      {/* ── Features ── */}
      <div
        id="features"
        className="mx-auto max-w-7xl scroll-mt-20 px-6 py-16 md:px-8 lg:py-20"
      >
        <ShellSection
          title="캠페인 성과를 한눈에"
          description="마케팅 팀이 필요로 하는 모든 분석을 하나의 플랫폼에서."
        >
          <div className="grid gap-6 sm:grid-cols-2">
            {campaignProductFeatures.map((feature) => (
              <Card
                key={feature.id}
                className="border-[var(--opt-border)] bg-[var(--opt-bg)] transition-shadow hover:shadow-md"
              >
                <CardContent className="p-6">
                  <h3 className="text-lg font-semibold text-[var(--opt-text)]">
                    {feature.title}
                  </h3>
                  <p className="mt-2 text-sm leading-6 text-[var(--opt-text-secondary)]">
                    {feature.description}
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>
        </ShellSection>
      </div>

      {/* ── Partners ── */}
      <div className="border-y border-[var(--opt-border)] bg-[var(--opt-bg-subtle)]">
        <div className="mx-auto max-w-7xl px-6 py-12 text-center md:px-8">
          <div className="text-sm font-medium text-[var(--opt-text-tertiary)]">
            공식 파트너 & 글로벌 인증
          </div>
          <div className="mt-6 flex flex-wrap items-center justify-center gap-x-12 gap-y-4">
            {campaignProductPartners.map((name) => (
              <span
                key={name}
                className="text-sm font-semibold text-[var(--opt-text-secondary)]"
              >
                {name}
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* ── CTA ── */}
      <div className="mx-auto max-w-7xl px-6 py-16 text-center md:px-8 lg:py-20">
        <h2 className="text-3xl font-bold tracking-tight text-[var(--opt-text)] sm:text-4xl">
          지금 시작하세요
        </h2>
        <p className="mt-4 text-base text-[var(--opt-text-secondary)]">
          5분 안에 SDK를 설치하고, 모든 플랫폼의 성과를 측정하세요.
        </p>
        <div className="mt-8 flex justify-center gap-3">
          <Link href="/examples/campaign-landing/flow">
            <Button size="lg">무료로 시작하기</Button>
          </Link>
          <Button
            size="lg"
            variant="secondary"
            onClick={() => notReal("영업팀 문의")}
          >
            영업팀 문의
          </Button>
        </div>
      </div>

      {/* ── FAQ ── */}
      <div
        id="pricing-faq"
        className="scroll-mt-20 border-t border-[var(--opt-border)] bg-[var(--opt-bg-subtle)]"
      >
        <div className="mx-auto max-w-7xl px-6 py-16 md:px-8 lg:py-20">
          <ShellSection
            title="자주 묻는 질문"
            description="캠페인 플랫폼에 대해 궁금한 점을 확인하세요."
          >
            <FaqAccordion items={[...campaignProductFaqItems]} />
          </ShellSection>
        </div>
      </div>
    </div>
  );
}