import { useState } from "react";
import { BrandMark } from "./BrandMark";
import { HfIcon } from "./HfIcon";
import { NeuroBackground } from "./NeuroBackground";
import { MODEL_CONFIG, type ModelOption } from "../model-config";

interface LandingPageProps {
  onStart: (modelId: string) => void;
}

export function LandingPage({ onStart }: LandingPageProps) {
  const [bgReady, setBgReady] = useState(false);

  return (
    <div className="relative w-full min-h-screen p-7 bg-bg text-left max-[900px]:p-[22px]">
      <NeuroBackground onReady={() => setBgReady(true)} />

      <div
        className={`relative z-[1] w-[min(1120px,100%)] min-h-[calc(100vh-56px)] mx-auto flex flex-col items-center justify-center gap-8 max-[900px]:min-h-[calc(100vh-44px)] transition-opacity duration-700 ease-out ${
          bgReady ? "opacity-100" : "opacity-0"
        }`}
      >
        <div className="flex flex-col items-center text-center">
          <BrandMark />

          <h1 className="mt-6 text-[clamp(3.4rem,9vw,7.8rem)] font-bold tracking-[-0.06em] leading-[0.95] max-sm:tracking-[-0.05em] drop-shadow-[0_2px_12px_rgba(0,0,0,0.7)]">
            LFM2-MoE
          </h1>
          <p className="shimmer mt-5 text-text-soft text-[clamp(1.05rem,2.6vw,1.42rem)] leading-[1.5] drop-shadow-[0_1px_8px_rgba(0,0,0,0.6)]">
            WebGPU-accelerated Mixture of Experts.
            <br />
            Built with{" "}
            <HfIcon className="inline-block w-[1.6rem] h-[1.6rem] mr-[0.25rem] ml-[0.35rem] mb-px align-text-bottom" />
            <span className="inline-block">Transformers.js</span>
          </p>
        </div>

        <div className="flex flex-col items-center gap-3.5">
          <span className="inline-block text-accent font-mono text-[0.73rem] tracking-[0.22em] uppercase">
            Choose model
          </span>
          <div className="flex gap-3 max-sm:flex-col">
            {MODEL_CONFIG.models.map((model: ModelOption) => (
              <button
                key={model.modelId}
                type="button"
                className="flex flex-col gap-1 py-3.5 px-[22px] border border-line rounded-[20px] bg-[rgba(255,255,255,0.05)] backdrop-blur-[16px] text-center transition-[transform,border-color,background-color] duration-[180ms] ease-[ease] hover:-translate-y-0.5 hover:border-[rgba(157,224,255,0.42)] hover:bg-[rgba(157,224,255,0.14)]"
                onClick={() => onStart(model.modelId)}
              >
                <strong className="text-[0.95rem] font-bold">{model.label}</strong>
                <span className="font-mono text-[0.75rem] tracking-[0.06em]">{model.sublabel}</span>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}