Features

"use client";

import { BarChart3, BellRing, Camera, CreditCard, Languages, ShieldCheck } from "lucide-react";

const FEATURES = [
  { icon: <Camera />, title: "Plates read at the gate", body: "Cameras read the plate as the car stops. No tickets to print, none to lose." },
  { icon: <CreditCard />, title: "Every way to pay", body: "bKash, Nagad, Rocket, cards and cash, reconciled into one daily total." },
  { icon: <BarChart3 />, title: "Reports that add up", body: "Revenue, occupancy and staff shifts by the hour, exported in a click." },
  { icon: <BellRing />, title: "Alerts that matter", body: "A gate offline, a full level, cash over the limit: you hear first." },
  { icon: <ShieldCheck />, title: "Roles and audit", body: "Owners, managers and attendants each see what they need. Every change is logged." },
  { icon: <Languages />, title: "Bangla and English", body: "Attendants work in Bangla, accountants in English, on the same screen." },
];

export default function FeaturesGrid() {
  return (
    <section className="mx-auto max-w-6xl px-4 py-20 sm:px-6">
      <div className="mx-auto max-w-2xl text-center">
        <p className="text-[13px] font-semibold uppercase tracking-[0.12em] text-primary">Everything at the gate</p>
        <h2 className="disp mt-3 text-[34px] font-bold leading-tight tracking-[-0.03em] text-text sm:text-[42px]">One system from the barrier to the bank</h2>
        <p className="mt-4 text-[16px] leading-[1.65] text-body">The parts every car park needs, built to work together from the first day.</p>
      </div>
      <div className="mt-14 grid gap-px overflow-hidden rounded-[22px] border border-border bg-border sm:grid-cols-2 lg:grid-cols-3">
        {FEATURES.map((f) => (
          <div key={f.title} className="group relative bg-raised p-7 transition-colors duration-300 hover:bg-surface">
            <span
              aria-hidden
              className="absolute inset-x-0 top-0 h-px scale-x-0 bg-[linear-gradient(90deg,transparent,var(--brand-2),transparent)] transition-transform duration-500 group-hover:scale-x-100"
            />
            <span className="grid size-11 place-items-center rounded-[12px] border border-border bg-[linear-gradient(180deg,var(--raised),var(--surface))] text-primary shadow-[var(--lit),0_4px_12px_-6px_color-mix(in_srgb,var(--primary)_45%,transparent)] transition-transform duration-300 group-hover:-translate-y-0.5 [&_svg]:size-5">
              {f.icon}
            </span>
            <h3 className="mt-5 text-[16px] font-semibold text-text">{f.title}</h3>
            <p className="mt-2 text-[14px] leading-[1.6] text-muted">{f.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

import { ArrowRight, Check } from "lucide-react";

import { Button } from "@waveinno/ui";

const ITEMS = [
  ["Live sessions", "Every car inside, with the time and the fee so far."],
  ["Plate reading", "Cameras read the plate and open the gate."],
  ["bKash, Nagad and cards", "Drivers pay the way they like; it lands in one report."],
  ["Monthly passes", "Tenants and staff park without a ticket."],
  ["Attendant app", "Android, in Bangla, keeps working offline."],
  ["Cash control", "A limit per attendant and a count at every shift change."],
  ["Nightly reports", "Revenue, occupancy and exceptions by morning."],
  ["Roles and audit", "Who can refund, who can open a gate, and a record of both."],
];

export default function FeaturesList() {
  return (
    <section className="px-4 py-20 sm:px-6">
      <div className="mx-auto grid max-w-6xl gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.6fr)]">
        <div>
          <p className="text-[13px] font-semibold text-primary">Everything included</p>
          <h2 className="disp mt-2 text-[32px] font-bold leading-[1.12] tracking-[-0.03em] text-text sm:text-[38px]">One plan does the whole job</h2>
          <p className="mt-4 text-[15.5px] leading-[1.65] text-body">No add-ons to buy later. Every site gets every feature, from the first gate to the hundredth.</p>
          <Button variant="secondary" className="mt-7">
            See every feature <ArrowRight />
          </Button>
        </div>
        <dl className="grid gap-x-10 gap-y-7 sm:grid-cols-2">
          {ITEMS.map(([t, d]) => (
            <div key={t} className="flex gap-3.5">
              <span className="mt-0.5 grid size-6 shrink-0 place-items-center rounded-full bg-primary-subtle text-primary">
                <Check className="size-3.5" strokeWidth={3} />
              </span>
              <div>
                <dt className="text-[15px] font-semibold text-text">{t}</dt>
                <dd className="mt-1 text-[14px] leading-[1.6] text-muted">{d}</dd>
              </div>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}