import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

const ENTER_DURATION_MS = 2300;
const EXIT_DURATION_MS = 650;

export default function LandingPage() {
  const nav = useNavigate();
  const [isExiting, setIsExiting] = useState(false);

  useEffect(() => {
    const exitTimer = window.setTimeout(() => setIsExiting(true), ENTER_DURATION_MS);
    const navTimer = window.setTimeout(
      () => nav("/dashboard", { replace: true }),
      ENTER_DURATION_MS + EXIT_DURATION_MS
    );

    return () => {
      window.clearTimeout(exitTimer);
      window.clearTimeout(navTimer);
    };
  }, [nav]);

  return (
    <div className={`bf-landing ${isExiting ? "is-exiting" : ""}`} role="status" aria-live="polite">
      <div className="bf-landing-inner">
        <div className="bf-landing-visual" aria-hidden="true">
          <svg className="bf-landing-svg" viewBox="0 0 200 200" role="presentation">
            <defs>
              <linearGradient id="bfBraceGrad" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stopColor="#efb07a" stopOpacity="0.95" />
                <stop offset="100%" stopColor="#d17645" stopOpacity="0.95" />
              </linearGradient>
            </defs>

            <path
              className="bf-landing-spine"
              d="M100 34 C 92 60, 108 86, 100 112 C 92 138, 108 164, 100 188"
            />

            <circle className="bf-landing-vertebra" cx="100" cy="48" r="6.2" />
            <circle className="bf-landing-vertebra" cx="100" cy="74" r="5.8" />
            <circle className="bf-landing-vertebra" cx="100" cy="100" r="5.8" />
            <circle className="bf-landing-vertebra" cx="100" cy="126" r="5.8" />
            <circle className="bf-landing-vertebra" cx="100" cy="152" r="6.2" />

            <path
              className="bf-landing-brace bf-landing-brace--left"
              d="M58 62 C 44 82, 44 118, 58 138"
              stroke="url(#bfBraceGrad)"
            />
            <path
              className="bf-landing-brace bf-landing-brace--right"
              d="M142 62 C 156 82, 156 118, 142 138"
              stroke="url(#bfBraceGrad)"
            />

            <path
              className="bf-landing-pad"
              d="M70 86 C 64 96, 64 104, 70 114"
              stroke="url(#bfBraceGrad)"
            />
            <path
              className="bf-landing-pad"
              d="M130 86 C 136 96, 136 104, 130 114"
              stroke="url(#bfBraceGrad)"
            />
          </svg>
        </div>

        <div className="bf-landing-mark">
          <div className="bf-landing-wordmark">
            Brace<span className="bf-brand-accent">iQ</span>
          </div>
        </div>

        <p className="bf-landing-slogan">
          Guided support design, from imaging to fabrication.
        </p>

        <div className="bf-landing-progress" aria-hidden="true">
          <span className="bf-landing-progress-bar" />
        </div>
      </div>
    </div>
  );
}