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

const AUDIENCE = [
  {
    label: "Small business owners", icon: "shop",
    quote: "I'm paying $312/month for software that does 60% of what I need and zero of the rest.",
    source: "u/coffeeshop_owner · r/smallbusiness",
    answer: "Build the tool that actually fits your shop — exactly your workflow, no monthly fee bleed.",
  },
  {
    label: "Freelancers building for clients", icon: "spark",
    quote: "My client wants a quote tool. I can mock the frontend in a day. The backend? Two weeks I don't have.",
    source: "u/agency_of_one · r/freelance",
    answer: "Deliver the whole thing — login, data, hosting — in the same chat where you built the screens.",
  },
  {
    label: "Anyone with an idea", icon: "spark2",
    quote: "I built the homepage in an afternoon. Then the AI told me to 'just deploy it' and I cried.",
    source: "u/first_time_builder · r/sideproject",
    answer: "No deploys. No GitHub. No fear. The thing you described is online, with logins, ready for users.",
  },
];

export default function Audience() {
  return (
    <section className="relative py-[clamp(80px,11vh,140px)]">
      <div className="wrap">
        <div className="text-center max-w-[820px] mx-auto mb-14">
          <Eyebrow>Who Vibn is for</Eyebrow>
          <h2 className="mt-[18px] font-medium text-[clamp(36px,4.8vw,64px)] tracking-[-0.025em] leading-[1.02] text-balance">
            People who have an idea — not a stack.
          </h2>
          <p className="mt-5 text-fg-mute text-[17px]">If you've ever felt this, Vibn was built for you.</p>
        </div>

        <div className="grid gap-[18px] grid-cols-1 lg:grid-cols-3">
          {AUDIENCE.map((a) => <ACard key={a.label} a={a} />)}
        </div>
      </div>
    </section>
  );
}

function ACard({ a }) {
  return (
    <div className="relative flex flex-col min-h-[380px] p-7 pb-[26px] rounded-[18px] border border-hairline overflow-hidden"
         style={{ background: "linear-gradient(180deg, oklch(0.20 0.009 60 / 0.55), oklch(0.17 0.008 60 / 0.55))" }}>
      <span aria-hidden="true" className="absolute top-0 left-6 right-6 h-px opacity-60"
            style={{ background: "linear-gradient(90deg, transparent, var(--c-accent), transparent)" }} />
      <div className="w-10 h-10 rounded-[10px] grid place-items-center border border-hairline mb-[18px] text-accent"
           style={{ background: "oklch(0.22 0.011 60)" }}>
        <Icon name={a.icon} />
      </div>
      <div className="text-[19px] font-medium tracking-[-0.015em] text-fg">{a.label}</div>

      <div className="mt-[18px] py-4 px-[18px] italic text-fg-dim text-[14.5px] leading-[1.5] rounded-[4px_10px_10px_4px] border-l-2"
           style={{ background: "oklch(0.16 0.008 60 / 0.55)", borderLeftColor: "var(--c-accent)" }}>
        "{a.quote}"
        <div className="mt-2 not-italic font-mono text-[11px] text-fg-faint tracking-[0.02em]">— {a.source}</div>
      </div>

      <div className="mt-auto pt-[22px] flex gap-2.5 items-start text-[15px] text-fg leading-[1.5]">
        <span className="font-mono text-[10px] uppercase tracking-[0.12em] text-accent px-[7px] py-[3px] rounded shrink-0 border mt-px"
              style={{ background: "oklch(0.74 0.175 35 / 0.12)", borderColor: "oklch(0.74 0.175 35 / 0.4)" }}>
          Vibn
        </span>
        <span>{a.answer}</span>
      </div>
    </div>
  );
}

function Icon({ name }) {
  const p = {
    width: 20, height: 20, viewBox: "0 0 20 20", fill: "none",
    stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round",
  };
  if (name === "shop")   return <svg {...p}><path d="M3.5 6.5h13l-1 9.5h-11l-1-9.5Z"/><path d="M7 6.5V5a3 3 0 0 1 6 0v1.5"/></svg>;
  if (name === "spark")  return <svg {...p}><path d="M10 3v4M10 13v4M3 10h4M13 10h4M5.3 5.3l2.8 2.8M11.9 11.9l2.8 2.8M14.7 5.3l-2.8 2.8M8.1 11.9l-2.8 2.8"/></svg>;
  if (name === "spark2") return <svg {...p}><path d="M10 2.5v3M10 14.5v3M2.5 10h3M14.5 10h3"/><circle cx="10" cy="10" r="3"/></svg>;
  return null;
}
