import { useState } from "react";

import { Comparison } from "@/components/sections/comparison";
import { Contact } from "@/components/sections/contact";
import { CoreValues } from "@/components/sections/core-values";
import { Faq } from "@/components/sections/faq";
import { FinalCTA } from "@/components/sections/final-cta";
import { Footer } from "@/components/sections/footer";
import { Header } from "@/components/sections/header";
import { HeroGlassmorphic } from "@/components/sections/hero-glassmorphic";
import { HeroNeumorphic } from "@/components/sections/hero-neumorphic";
import { HowItWorksDemo } from "@/components/sections/how-it-works-demo";
import { NegotiationConsole } from "@/components/sections/negotiation-console";
import { Reinforcement } from "@/components/sections/reinforcement";

const TITLE = "negotium — AI 구매 협상 자동화";
const DESCRIPTION =
  "가이드라인만 정하면 AI 흥정 봇이 여러 협력사와 단가를 대신 조율합니다. 흥정부터 낙찰까지 자동으로, 협상할수록 강화학습으로 더 좋은 조건을 만드는 B2B 구매 협상 자동화 솔루션.";

export function meta() {
  return [
    { title: TITLE },
    { name: "description", content: DESCRIPTION },
    { property: "og:type", content: "website" },
    { property: "og:site_name", content: "negotium" },
    { property: "og:title", content: TITLE },
    { property: "og:description", content: DESCRIPTION },
    { property: "og:locale", content: "ko_KR" },
  ];
}

type HeroTheme = "neumorphic" | "glassmorphic";

export default function Home() {
  // 히어로 디자인 비교용 — 스위처는 dev 에서만 노출, 배포본은 neumorphic(Phone Demo) 고정
  const [heroTheme, setHeroTheme] = useState<HeroTheme>("neumorphic");

  return (
    <div className="min-h-screen bg-white text-ink font-sans antialiased selection:bg-primary/10 selection:text-primary">
      <Header />

      <div className="relative">
        {import.meta.env.DEV && <HeroThemeSwitcher value={heroTheme} onChange={setHeroTheme} />}
        {heroTheme === "neumorphic" && <HeroNeumorphic />}
        {heroTheme === "glassmorphic" && <HeroGlassmorphic />}
      </div>

      <NegotiationConsole />
      <HowItWorksDemo />
      <Reinforcement />
      <CoreValues />
      <Comparison />
      <Faq />
      <FinalCTA />
      <Contact />
      <Footer />
    </div>
  );
}

const HERO_OPTIONS: { value: HeroTheme; label: string }[] = [
  { value: "neumorphic", label: "Phone Demo" },
  { value: "glassmorphic", label: "Soft Ambient" },
];

function HeroThemeSwitcher({ value, onChange }: { value: HeroTheme; onChange: (theme: HeroTheme) => void }) {
  return (
    <div className="absolute top-24 left-1/2 -translate-x-1/2 z-30 flex items-center gap-1.5 p-1 rounded-full shadow-[0_4px_20px_rgba(0,0,0,0.06)] border border-line-strong bg-white/95 text-ink-soft backdrop-blur-md text-xs font-semibold">
      <span className="pl-3.5 pr-1.5 text-[10px] uppercase tracking-wider text-ink-muted font-bold">Hero Design:</span>
      {HERO_OPTIONS.map((option) => (
        <button
          key={option.value}
          onClick={() => onChange(option.value)}
          className={`px-3.5 py-1.5 rounded-full transition-all cursor-pointer ${
            value === option.value ? "bg-primary text-white shadow-sm font-bold" : "hover:text-ink"
          }`}
        >
          {option.label}
        </button>
      ))}
    </div>
  );
}