import { featureIcons } from "./icons";
import type { HomeContent } from "@/lib/content";

export default function Why({ content }: { content: HomeContent }) {
  const { why } = content;
  return (
    <section id="why" style={{ padding: "110px 0" }}>
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 640, margin: "0 auto" }}>
          <div
            style={{
              fontSize: 12,
              fontWeight: 700,
              letterSpacing: ".18em",
              textTransform: "uppercase",
              color: "#7e6516",
            }}
          >
            {why.eyebrow}
          </div>
          <h2
            style={{
              fontWeight: 900,
              fontSize: 42,
              lineHeight: 1.08,
              letterSpacing: "-.025em",
              margin: "14px 0 0",
              color: "#182233",
            }}
          >
            {why.titleLead}
            <span style={{ color: "#006568" }}>{why.titleAccent}</span>
          </h2>
        </div>
        <div className="grid-3" style={{ marginTop: 52 }}>
          {why.features.map((ft) => {
            const Icon = featureIcons[ft.icon] ?? featureIcons.dollar;
            return (
              <div key={ft.h} className="glass-card card-lift stp-reveal">
                <div
                  style={{
                    width: 54,
                    height: 54,
                    borderRadius: "50%",
                    background: "linear-gradient(150deg,#e6f3f1,#d3ebe8)",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    color: "#006568",
                  }}
                >
                  <Icon size={24} strokeWidth={1.75} />
                </div>
                <h3 style={{ fontWeight: 900, fontSize: 20, letterSpacing: "-.01em", margin: "20px 0 0", color: "#182233" }}>
                  {ft.h}
                </h3>
                <p style={{ fontSize: 15, lineHeight: 1.65, color: "#515a63", margin: "9px 0 0" }}>{ft.p}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}