import { Eyebrow } from "../../lib/primitives.jsx";

const BENEFITS = [
  { icon: "lightning", title: "First access", body: "Skip the queue when public beta opens. You build before everyone else." },
  { icon: "gift",      title: "90 days of Pro, free", body: "Full launch features — hosting, marketing, customer acquisition — on the house." },
  { icon: "chat",      title: "Direct line to the team", body: "Private channel with the people building Vibn. Your feedback ships." },
];

export default function Benefits() {
  return (
    <section className="mt-16">
      <div className="text-center mb-7"><Eyebrow>What you get on the inside</Eyebrow></div>
      <div className="grid gap-3.5 grid-cols-1 md:grid-cols-3">
        {BENEFITS.map((b) => (
          <div key={b.title} className="p-6 rounded-[14px] border border-hairline"
               style={{ background: "linear-gradient(180deg, oklch(0.20 0.009 60 / 0.35), oklch(0.17 0.008 60 / 0.35))" }}>
            <div className="w-9 h-9 rounded-[9px] grid place-items-center border border-hairline text-accent mb-3.5"
                 style={{ background: "oklch(0.22 0.011 60)" }}>
              <Icon name={b.icon} />
            </div>
            <h3 className="text-[16px] font-medium tracking-[-0.01em]">{b.title}</h3>
            <p className="mt-1.5 text-fg-mute text-[13.5px] leading-[1.5]">{b.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function Icon({ name }) {
  const p = { width: 18, height: 18, viewBox: "0 0 20 20", fill: "none",
              stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  if (name === "lightning") return <svg {...p}><path d="M11 2 4 11h5l-1 7 7-9h-5l1-7Z"/></svg>;
  if (name === "gift")      return <svg {...p}><rect x="3" y="7.5" width="14" height="10"/><path d="M3 11h14M10 7.5V18M7 7.5a2 2 0 1 1 3-2.5 2 2 0 1 1 3 2.5"/></svg>;
  if (name === "chat")      return <svg {...p}><path d="M3.5 11.5a6 6 0 1 1 3.4 5.4L3 18l1.1-3.9a6 6 0 0 1-.6-2.6Z"/></svg>;
  return null;
}
