// In-code product UI mockups for the Features page. Rendered as light "screenshot"
// panels that read as real dashboard captures against the dark feature blocks —
// no image files needed. Each export maps to a FEATURES[].mockup id.

type Props = { className?: string };

// Shared light-panel chrome with a faux browser/app top bar.
function Panel({
  children,
  bar,
  className = "",
}: {
  children: React.ReactNode;
  bar?: string;
  className?: string;
}) {
  return (
    <div
      className={`overflow-hidden rounded-2xl border border-black/10 bg-white text-zinc-900 shadow-2xl shadow-black/40 ${className}`}
    >
      <div className="flex items-center gap-2 border-b border-zinc-100 bg-zinc-50 px-4 py-2.5">
        <span className="h-2.5 w-2.5 rounded-full bg-[#ff5f57]" />
        <span className="h-2.5 w-2.5 rounded-full bg-[#febc2e]" />
        <span className="h-2.5 w-2.5 rounded-full bg-[#28c840]" />
        {bar && (
          <span className="ml-3 truncate rounded-md bg-white px-2 py-0.5 text-[11px] text-zinc-400 ring-1 ring-zinc-200">
            {bar}
          </span>
        )}
      </div>
      <div className="p-4 sm:p-5">{children}</div>
    </div>
  );
}

const Dot = ({ c }: { c: string }) => (
  <span className="h-2 w-2 rounded-full" style={{ backgroundColor: c }} />
);

/* 1. PERSONALIZED — event page / store builder */
export function BuilderMockup({ className }: Props) {
  const themes = ["#1f9d7a", "#A3E635", "#FF7A3C", "#A855F7", "#2DD4BF", "#f43f5e"];
  return (
    <Panel bar="your-event.vibepass.co.ke" className={className}>
      <p className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
        Customize store
      </p>
      <p className="mt-0.5 text-sm font-bold">Pick your look, ship in minutes</p>
      <div className="mt-4 grid grid-cols-3 gap-2.5">
        {themes.map((c, i) => (
          <div
            key={i}
            className={`relative h-16 rounded-lg ring-1 ring-black/5 ${i === 0 ? "outline outline-2 outline-[#1f9d7a] outline-offset-2" : ""}`}
            style={{ background: `linear-gradient(135deg, ${c}, ${c}99)` }}
          >
            <span className="absolute bottom-1 left-1.5 h-1.5 w-8 rounded-full bg-white/70" />
          </div>
        ))}
      </div>
      <div className="mt-4 flex items-center justify-between">
        <div className="flex items-center gap-2 text-[11px] text-zinc-500">
          <Dot c="#28c840" /> Saved
        </div>
        <span className="rounded-full bg-[#1f9d7a] px-3 py-1.5 text-[11px] font-semibold text-white">
          Publish
        </span>
      </div>
    </Panel>
  );
}

/* 2. INTERACTIVE — campaign / SMS composer */
export function CampaignMockup({ className }: Props) {
  return (
    <Panel bar="Campaigns" className={className}>
      <p className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
        New campaign
      </p>
      <div className="mt-3 flex gap-2">
        {["SMS", "Email", "Affiliate"].map((t, i) => (
          <span
            key={t}
            className={`rounded-full px-3 py-1 text-[11px] font-semibold ${i === 0 ? "bg-[#2DD4BF] text-white" : "bg-zinc-100 text-zinc-500"}`}
          >
            {t}
          </span>
        ))}
      </div>
      <div className="mt-3 rounded-lg bg-zinc-50 p-3 text-[12px] leading-relaxed text-zinc-700 ring-1 ring-zinc-100">
        Doors at 7PM 🎤 Gates close 9PM sharp. Show this SMS at entry. Asante!
      </div>
      <div className="mt-4 flex items-center justify-between">
        <p className="text-[11px] text-zinc-500">
          To <span className="font-bold text-zinc-800">12,480</span> fans
        </p>
        <span className="rounded-full bg-[#1f9d7a] px-3 py-1.5 text-[11px] font-semibold text-white">
          Send blast
        </span>
      </div>
    </Panel>
  );
}

/* 3. INSIGHTFUL — analytics dashboard with chart */
export function AnalyticsMockup({ className }: Props) {
  return (
    <Panel bar="Insights" className={className}>
      <div className="flex items-start justify-between">
        <div>
          <p className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
            Gross sales
          </p>
          <p className="text-2xl font-black">KES 1.24M</p>
        </div>
        <span className="rounded-full bg-green-100 px-2 py-0.5 text-[11px] font-bold text-green-700">
          ▲ 18%
        </span>
      </div>
      <svg viewBox="0 0 300 90" className="mt-3 w-full" aria-hidden="true">
        <defs>
          <linearGradient id="ag" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#1f9d7a" stopOpacity="0.35" />
            <stop offset="100%" stopColor="#1f9d7a" stopOpacity="0" />
          </linearGradient>
        </defs>
        <path
          d="M0 70 L40 60 L80 64 L120 42 L160 48 L200 26 L240 30 L300 10 L300 90 L0 90 Z"
          fill="url(#ag)"
        />
        <path
          d="M0 70 L40 60 L80 64 L120 42 L160 48 L200 26 L240 30 L300 10"
          fill="none"
          stroke="#1f9d7a"
          strokeWidth="2.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
      <div className="mt-3 grid grid-cols-3 gap-2 text-center">
        {[
          ["3,420", "Tickets"],
          ["2,980", "Check-ins"],
          ["41%", "Repeat fans"],
        ].map(([v, l]) => (
          <div key={l} className="rounded-lg bg-zinc-50 py-2 ring-1 ring-zinc-100">
            <p className="text-sm font-bold">{v}</p>
            <p className="text-[10px] text-zinc-500">{l}</p>
          </div>
        ))}
      </div>
    </Panel>
  );
}

/* 4. SCALE-READY — markets selector */
export function MarketsMockup({ className }: Props) {
  const markets = [
    ["Kenya", "#1f9d7a", true],
    ["Uganda", "#A3E635", true],
    ["Tanzania", "#FF7A3C", true],
    ["Rwanda", "#A855F7", true],
  ] as const;
  return (
    <Panel bar="Markets" className={className}>
      <p className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
        You&apos;re live in
      </p>
      <p className="mt-0.5 text-sm font-bold">4 markets · pricing per country</p>
      <div className="mt-3 space-y-2">
        {markets.map(([name, c]) => (
          <div
            key={name}
            className="flex items-center justify-between rounded-lg bg-zinc-50 px-3 py-2 ring-1 ring-zinc-100"
          >
            <div className="flex items-center gap-2.5">
              <span className="h-6 w-6 rounded-md" style={{ backgroundColor: `${c}22` }}>
                <span className="flex h-full w-full items-center justify-center">
                  <Dot c={c} />
                </span>
              </span>
              <span className="text-[12px] font-semibold text-zinc-800">{name}</span>
            </div>
            <span className="flex h-4 w-7 items-center rounded-full bg-[#1f9d7a] px-0.5">
              <span className="ml-auto h-3 w-3 rounded-full bg-white" />
            </span>
          </div>
        ))}
      </div>
    </Panel>
  );
}

/* 5. RESOURCEFUL — financing / cash advance */
export function FinancingMockup({ className }: Props) {
  return (
    <Panel bar="Financing" className={className}>
      <p className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
        Cash advance available
      </p>
      <p className="mt-0.5 text-2xl font-black">KES 500,000</p>
      <div className="mt-3 h-2 w-full overflow-hidden rounded-full bg-zinc-100">
        <div className="h-full w-[72%] rounded-full bg-[#34c79b]" />
      </div>
      <div className="mt-1.5 flex justify-between text-[11px] text-zinc-500">
        <span>Repaid 72%</span>
        <span>12% per ticket</span>
      </div>
      <div className="mt-4 grid grid-cols-2 gap-2">
        <div className="rounded-lg bg-zinc-50 p-2.5 ring-1 ring-zinc-100">
          <p className="text-[10px] text-zinc-500">Next event</p>
          <p className="text-[12px] font-bold">Working capital</p>
        </div>
        <div className="rounded-lg bg-zinc-50 p-2.5 ring-1 ring-zinc-100">
          <p className="text-[10px] text-zinc-500">Approval</p>
          <p className="text-[12px] font-bold">Under 48h</p>
        </div>
      </div>
      <span className="mt-4 block rounded-full bg-[#1f9d7a] py-2 text-center text-[12px] font-semibold text-white">
        Request funds
      </span>
    </Panel>
  );
}

export const FEATURE_MOCKUPS: Record<string, (p: Props) => React.ReactElement> = {
  builder: BuilderMockup,
  campaign: CampaignMockup,
  analytics: AnalyticsMockup,
  markets: MarketsMockup,
  financing: FinancingMockup,
};