"use client";

import { PhoneIcon, BriefcaseIcon, CalendarIcon, CheckIcon, DollarIcon } from "./icons";
import type { HomeContent } from "@/lib/content";
import { trackEvent } from "@/components/Tracking";
import Image from "@/components/Image";

const glassChip: React.CSSProperties = {
  position: "absolute",
  display: "flex",
  alignItems: "center",
  gap: 12,
  background: "rgba(255,255,255,.62)",
  backdropFilter: "blur(16px)",
  WebkitBackdropFilter: "blur(16px)",
  border: "1px solid rgba(255,255,255,.75)",
  borderRadius: 18,
  padding: "14px 16px",
  boxShadow: "0 20px 44px rgba(2,47,49,.16)",
};

const floatIcon: React.CSSProperties = {
  position: "absolute",
  width: 62,
  height: 62,
  borderRadius: "50%",
  background: "#fff",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  boxShadow: "0 16px 34px rgba(2,47,49,.16)",
};

export default function Hero({ content }: { content: HomeContent }) {
  const { hero } = content;
  return (
    <section style={{ position: "relative", overflow: "hidden" }}>
      <div className="container" style={{ position: "relative" }}>
        <div className="hero-grid">
          <div className="hero-cascade">
            <div
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: 9,
                background: "rgba(255,255,255,.65)",
                backdropFilter: "blur(8px)",
                WebkitBackdropFilter: "blur(8px)",
                border: "1px solid rgba(255,255,255,.8)",
                borderRadius: 999,
                padding: "9px 18px",
                boxShadow: "0 8px 22px rgba(2,47,49,.08)",
              }}
            >
              <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#c9a62f" }} />
              <span
                style={{
                  fontSize: 11,
                  fontWeight: 700,
                  letterSpacing: ".16em",
                  textTransform: "uppercase",
                  color: "#006568",
                }}
              >
                {hero.badge}
              </span>
            </div>
            <h1
              style={{
                fontWeight: 900,
                fontSize: 64,
                lineHeight: 1.04,
                letterSpacing: "-.025em",
                color: "#182233",
                margin: "24px 0 0",
              }}
            >
              {hero.titleLead}
              <span style={{ color: "#006568" }}>{hero.titleAccent}</span>
            </h1>
            <p style={{ fontSize: 18, lineHeight: 1.7, color: "#515a63", margin: "24px 0 0", maxWidth: 460 }}>
              {hero.body}
            </p>
            <div style={{ display: "flex", gap: 16, alignItems: "center", marginTop: 36, flexWrap: "wrap" }}>
              <a
                className="btn-teal"
                href={hero.ctaHref}
                onClick={() => trackEvent("cta_click", { click_text: hero.cta, click_url: hero.ctaHref })}
                style={{ fontSize: 16, padding: "17px 32px", boxShadow: "0 16px 34px rgba(0,101,104,.32)" }}
              >
                {hero.cta}
              </a>
              <a
                href={hero.phoneHref}
                onClick={() => trackEvent("cta_click", { click_text: hero.phoneDisplay, click_url: hero.phoneHref })}
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 9,
                  fontWeight: 700,
                  fontSize: 15,
                  color: "#022f31",
                }}
              >
                <span
                  style={{
                    display: "inline-flex",
                    alignItems: "center",
                    justifyContent: "center",
                    width: 42,
                    height: 42,
                    borderRadius: "50%",
                    background: "rgba(255,255,255,.7)",
                    backdropFilter: "blur(8px)",
                    boxShadow: "0 8px 20px rgba(2,47,49,.1)",
                  }}
                >
                  <PhoneIcon size={16} stroke="#006568" />
                </span>
                {hero.phoneDisplay}
              </a>
            </div>
          </div>

          {/* organic blob visual with floating glass chips */}
          <div className="hero-visual" style={{ position: "relative", height: 540 }}>
            <div
              style={{
                position: "absolute",
                top: "50%",
                left: "50%",
                width: 480,
                height: 480,
                transform: "translate(-50%,-50%)",
                border: "1.5px dashed rgba(0,101,104,.28)",
                borderRadius: "50%",
              }}
            />
            <div
              style={{
                position: "absolute",
                top: "50%",
                left: "50%",
                width: 430,
                height: 430,
                transform: "translate(-50%,-50%)",
                background: "linear-gradient(150deg,#13a3a6,#006568)",
                borderRadius: "42% 58% 56% 44% / 52% 44% 56% 48%",
                opacity: 0.92,
              }}
            />
            <div
              style={{
                position: "absolute",
                top: "16%",
                right: "4%",
                width: 130,
                height: 130,
                background: "radial-gradient(circle,rgba(234,213,145,.85),rgba(234,213,145,0) 70%)",
                borderRadius: "50%",
                pointerEvents: "none",
              }}
            />
            <div
              style={{
                position: "absolute",
                top: "50%",
                left: "50%",
                width: 400,
                height: 400,
                transform: "translate(-50%,-50%)",
                borderRadius: "46% 54% 52% 48% / 54% 48% 52% 46%",
                overflow: "hidden",
                boxShadow: "0 30px 70px rgba(2,47,49,.28)",
                border: "6px solid rgba(255,255,255,.7)",
              }}
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <Image
                src={hero.image || "/img/hero-support-desk.webp"}
                alt="Sigma support desk"
                loading="eager"
                fetchPriority="high"
                style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "30% center" }}
              />
            </div>
            <div style={{ ...floatIcon, top: "13%", left: "1%" }}>
              <BriefcaseIcon size={26} stroke="#006568" strokeWidth={1.9} />
            </div>
            <div style={{ ...floatIcon, top: "6%", right: "1%" }}>
              <CalendarIcon size={26} stroke="#c9a62f" strokeWidth={1.9} />
            </div>
            <div style={{ ...glassChip, top: "40%", left: "-7%", width: 248 }}>
              <span
                style={{
                  flex: "0 0 auto",
                  width: 38,
                  height: 38,
                  borderRadius: "50%",
                  background: "#e6f3f1",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <CheckIcon size={18} stroke="#006568" strokeWidth={2.2} />
              </span>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 700, fontSize: 14, color: "#182233" }}>{hero.chip1Title}</div>
                <div style={{ fontSize: 12, color: "#6a727a" }}>{hero.chip1Subtitle}</div>
              </div>
            </div>
            <div style={{ ...glassChip, bottom: "7%", right: "-6%", width: 262 }}>
              <span
                style={{
                  flex: "0 0 auto",
                  width: 38,
                  height: 38,
                  borderRadius: "50%",
                  background: "#faf0d4",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <DollarIcon size={18} stroke="#b99323" strokeWidth={2.2} />
              </span>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 700, fontSize: 14, color: "#182233" }}>{hero.chip2Title}</div>
                <div style={{ fontSize: 12, color: "#6a727a" }}>{hero.chip2Subtitle}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}