"use client";

import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Logo } from "./Logo";

const SOCIAL_LINKS = [
  {
    href: "https://github.com/evandrodevbr",
    label: "GitHub",
    icon: (
      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
    ),
  },
  {
    href: "https://www.linkedin.com/in/evandro-fonseca-junior-0969aa1b0/",
    label: "LinkedIn",
    icon: (
      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
    ),
  },
  {
    href: "mailto:evandrofonsecajunior@gmail.com",
    label: "Email",
    icon: (
      <>
        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
        <polyline points="22,6 12,13 2,6" />
      </>
    ),
    stroke: true,
  },
];

const textToType = "evandro.dev.br";

export default function Hero() {
  const [phase, setPhase] = useState<"typing" | "idle" | "glitch" | "logo">(
    "typing",
  );
  const [typedCount, setTypedCount] = useState(0);

  useEffect(() => {
    let timeout: NodeJS.Timeout;

    if (phase === "typing") {
      if (typedCount < textToType.length) {
        timeout = setTimeout(() => {
          setTypedCount((c) => c + 1);
        }, 120); // typing speed
      } else {
        timeout = setTimeout(() => {
          setPhase("idle");
        }, 1200); // Wait after typing finishes
      }
    } else if (phase === "idle") {
      timeout = setTimeout(() => {
        setPhase("glitch");
      }, 100); // trigger glitch
    } else if (phase === "glitch") {
      timeout = setTimeout(() => {
        setPhase("logo");
      }, 600); // Glitch out duration
    } else if (phase === "logo") {
      timeout = setTimeout(() => {
        setTypedCount(0);
        setPhase("typing");
      }, 3500); // Logo display and blink duration
    }

    return () => clearTimeout(timeout);
  }, [phase, typedCount]);

  const renderTypedText = () => {
    const chars = [];
    for (let i = 0; i < typedCount; i++) {
      const char = textToType[i];
      if (i < 7) {
        chars.push(
          <span key={i} style={{ color: "#FFFFFF" }}>
            {char}
          </span>,
        );
      } else if (i === 7) {
        chars.push(<br key="br1" />);
        chars.push(
          <span key={i} style={{ color: "#E8FF00" }}>
            {char}
          </span>,
        );
      } else if (i < 11) {
        chars.push(
          <span key={i} style={{ color: "#E8FF00" }}>
            {char}
          </span>,
        );
      } else if (i === 11) {
        chars.push(<br key="br2" />);
        chars.push(
          <span key={i} style={{ color: "#FFFFFF" }}>
            {char}
          </span>,
        );
      } else {
        chars.push(
          <span key={i} style={{ color: "#FFFFFF" }}>
            {char}
          </span>,
        );
      }
    }
    // blinking cursor
    if (phase === "typing" || phase === "idle") {
      chars.push(
        <motion.span
          key="cursor"
          animate={{ opacity: [1, 0] }}
          transition={{ repeat: Infinity, duration: 0.8 }}
          style={{
            color: "#E8FF00",
            display: "inline-block",
            marginLeft: "4px",
          }}
        >
          _
        </motion.span>,
      );
    }
    return chars;
  };

  const hour = new Date().getHours();
  const greeting =
    hour >= 8 && hour < 12
      ? "Ola! Vi seu portfolio. Podemos conversar?"
      : hour >= 13 && hour < 18
        ? "Boa tarde! Vi seu portfolio. Podemos conversar?"
        : "Ola! Vi seu portfolio. Podemos conversar quando estiver disponivel?";

  return (
    <section
      id="home"
      className="relative overflow-hidden bg-[#0A0A0A] px-sp-4 py-sp-12 text-white lg:px-sp-8"
    >
      <div className="pointer-events-none absolute inset-0 bg-grid-light opacity-70" />
      <div className="pointer-events-none absolute inset-x-0 top-0 h-40 bg-[radial-gradient(circle_at_top,rgba(232,255,0,0.18),transparent_60%)]" />

      <div className="relative z-10 mx-auto grid min-h-[calc(100vh)] w-full max-w-[1000px] grid-cols-1 items-center gap-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.8, ease: "easeOut", delay: 3.2 }}
        >
          <div className="mb-sp-8 inline-flex items-center gap-sp-2">
            <span
              className="h-1.5 w-1.5 animate-pulse rounded-full"
              style={{ background: "#E8FF00" }}
            />
            <span
              className="text-[9px] uppercase tracking-[0.2em]"
              style={{ color: "rgba(255,255,255,.38)" }}
            >
              Systems engineer available
            </span>
          </div>

          <div className="relative mb-sp-6 flex min-h-[40vw] sm:min-h-[220px] md:min-h-[280px] lg:min-h-[350px] items-center">
            <AnimatePresence mode="wait">
              {(phase === "typing" || phase === "idle") && (
                <motion.h1
                  key="text"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
                  exit={{ opacity: 0, filter: "blur(12px)", scale: 1.05 }}
                  transition={{ duration: 0.5, ease: "easeInOut" }}
                  className="absolute text-[13vw] sm:text-7xl md:text-[6rem] lg:text-[7rem] xl:text-[8rem] leading-[0.9] tracking-[-0.01em]"
                  style={{
                    color: "#FFFFFF",
                    fontFamily: "'Monument Extended', sans-serif",
                    fontWeight: 800,
                  }}
                  aria-label="evandro.dev.br"
                >
                  {renderTypedText()}
                </motion.h1>
              )}

              {phase === "logo" && (
                <motion.div
                  key="logo"
                  initial={{ opacity: 0, scale: 0.95 }}
                  animate={{
                    opacity: [0, 1, 0, 1, 1, 0.5, 1, 0],
                    scale: 1,
                    filter: [
                      "blur(4px)",
                      "blur(0px)",
                      "blur(0px)",
                      "blur(0px)",
                      "blur(0px)",
                      "blur(2px)",
                      "blur(0px)",
                      "blur(10px)",
                    ],
                  }}
                  transition={{
                    duration: 3.2,
                    times: [0, 0.05, 0.1, 0.15, 0.8, 0.85, 0.9, 1],
                  }}
                  className="absolute flex items-center justify-start w-full"
                >
                  <Logo
                    variant="mark"
                    size="xl"
                    theme="dark"
                    className="w-[80%] max-w-[320px] h-auto drop-shadow-[0_0_20px_rgba(232,255,0,0.3)]"
                  />
                </motion.div>
              )}
            </AnimatePresence>
          </div>

          <p
            className="mb-sp-10 max-w-[460px] text-[13px] leading-7"
            style={{ color: "rgba(255,255,255,.72)" }}
          >
            Engenheiro de Software especializado em aplicacoes de alta
            performance, interfaces de produto e sistemas criticos com Next.js,
            React, Tauri e arquitetura escalavel.
          </p>

          <div className="mb-sp-8 mt-sp-6 flex flex-wrap items-center gap-sp-4">
            <a
              href={`https://wa.me/5547992742365?text=${encodeURIComponent(greeting)}`}
              className="inline-flex h-11 items-center justify-center rounded-sm px-sp-6 text-[11px] font-semibold uppercase tracking-[0.08em] no-underline transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_0_0_1px_rgba(232,255,0,.8),0_8px_24px_rgba(232,255,0,.35)]"
              style={{ background: "#E8FF00", color: "#0A0A0A" }}
            >
              Iniciar projeto
            </a>

            <a
              href="/assets/Evandro_Fonseca_Junior_CV.pdf"
              download
              className="inline-flex h-11 items-center justify-center rounded-sm border px-sp-6 text-[11px] font-semibold uppercase tracking-[0.08em] no-underline transition-all duration-200 hover:-translate-y-0.5 hover:bg-white/5"
              style={{ borderColor: "rgba(255,255,255,.18)", color: "#FFFFFF" }}
            >
              Download CV
            </a>

            <div className="flex items-center gap-sp-2">
              {SOCIAL_LINKS.map((link) => (
                <a
                  key={link.label}
                  href={link.href}
                  target={link.href.startsWith("http") ? "_blank" : undefined}
                  rel={
                    link.href.startsWith("http")
                      ? "noopener noreferrer"
                      : undefined
                  }
                  className="inline-flex h-11 w-11 items-center justify-center rounded-full transition-all duration-200 hover:bg-white/10 hover:scale-110"
                  style={{
                    color: "rgba(255,255,255,.84)",
                  }}
                  aria-label={link.label}
                >
                  <svg
                    width="18"
                    height="18"
                    viewBox="0 0 24 24"
                    fill={link.stroke ? "none" : "currentColor"}
                    stroke={link.stroke ? "currentColor" : "none"}
                    strokeWidth={link.stroke ? "2" : undefined}
                    role="img"
                    aria-label={link.label}
                  >
                    {link.icon}
                  </svg>
                </a>
              ))}
            </div>
          </div>

          <div
            className="text-[10px] uppercase tracking-[0.14em]"
            style={{ color: "rgba(255,255,255,.38)" }}
          >
            Garuva, SC | Remote worldwide
          </div>

        </motion.div>
      </div>
    </section>
  );
}