"use client";

import { CheckIcon } from "./icons";
import type { HomeContent } from "@/lib/content";
import { trackEvent } from "@/components/Tracking";
import Image from "@/components/Image";

export default function Packages({ content }: { content: HomeContent }) {
  const { packages } = content;
  return (
    <section id="packages" style={{ padding: "110px 0" }}>
      <div className="container">
        <div
          style={{
            display: "flex",
            alignItems: "flex-end",
            justifyContent: "space-between",
            gap: 40,
            flexWrap: "wrap",
          }}
        >
          <div style={{ maxWidth: 560 }}>
            <div
              style={{
                fontSize: 12,
                fontWeight: 700,
                letterSpacing: ".18em",
                textTransform: "uppercase",
                color: "#7e6516",
              }}
            >
              {packages.eyebrow}
            </div>
            <h2
              style={{
                fontWeight: 900,
                fontSize: 42,
                lineHeight: 1.08,
                letterSpacing: "-.025em",
                margin: "16px 0 0",
                color: "#182233",
              }}
            >
              {packages.titleLead}
              <span style={{ color: "#006568" }}>{packages.titleAccent}</span>
            </h2>
          </div>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: "#4a4f54", maxWidth: 320 }}>{packages.body}</p>
        </div>
        <div className="grid-3" style={{ marginTop: 52 }}>
          {packages.products.map((p) => (
            <article key={p.code} className="glass-card card-lift stp-reveal" style={{ position: "relative" }}>
              <div style={{ display: "flex", justifyContent: "center", alignItems: "flex-start", height: 212 }}>
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <Image
                  src={p.img}
                  alt={`${p.code} software box`}
                  style={{
                    height: 150,
                    width: "auto",
                    filter: "drop-shadow(0 16px 26px rgba(2,47,49,.18))",
                    WebkitBoxReflect: "below 1px linear-gradient(transparent 58%, rgba(255,255,255,.3))",
                  }}
                />
              </div>
              <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: ".04em", color: "#006568", marginTop: 18 }}>
                {p.code}
              </div>
              <div style={{ fontSize: 14, color: "#4a4f54", marginTop: 7, minHeight: 42 }}>{p.tagline}</div>
              <div
                style={{
                  display: "flex",
                  alignItems: "baseline",
                  gap: 5,
                  marginTop: 16,
                  paddingBottom: 18,
                  borderBottom: "1px solid rgba(2,47,49,.10)",
                }}
              >
                <span style={{ fontWeight: 900, fontSize: 40, letterSpacing: "-.02em", color: "#182233" }}>{p.price}</span>
                <span style={{ fontSize: 14, color: "#63686d" }}>{p.cadence}</span>
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: "18px 0 0", display: "flex", flexDirection: "column", gap: 11 }}>
                {p.features.map((f) => (
                  <li key={f} style={{ display: "flex", gap: 10, fontSize: 14, lineHeight: 1.45, color: "#31353a" }}>
                    <span style={{ color: "#006568", flex: "0 0 auto", marginTop: 1 }}>
                      <CheckIcon size={15} strokeWidth={2.4} />
                    </span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              <a
                className="btn-teal"
                href={content.packages.ctaUrl}
                onClick={() => trackEvent("cta_click", { click_text: "Get Started", click_url: content.packages.ctaUrl })}
                style={{
                  display: "block",
                  textAlign: "center",
                  marginTop: 24,
                  fontSize: 14,
                  padding: 14,
                  boxShadow: "0 10px 22px rgba(0,101,104,.26)",
                }}
              >
                Choose {p.code}
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}