Contact

"use client";

import { Send } from "lucide-react";
import * as React from "react";

import { Button, FormField, Input, Textarea, toast } from "@waveinno/ui";

export default function ContactSimple() {
  const [sending, setSending] = React.useState(false);
  return (
    <section className="px-4 py-20 sm:px-6">
      <div className="mx-auto max-w-xl">
        <div className="text-center">
          <h2 className="disp text-[32px] font-bold leading-[1.12] tracking-[-0.03em] text-text sm:text-[38px]">Get in touch</h2>
          <p className="mt-3 text-[15.5px] text-body">We reply within one working day.</p>
        </div>
        <form
          className="mt-10 grid gap-5 sm:grid-cols-2"
          onSubmit={(e) => {
            e.preventDefault();
            setSending(true);
            window.setTimeout(() => {
              setSending(false);
              (e.target as HTMLFormElement).reset();
              toast.success("Message sent", { description: "We will write back within a day." });
            }, 900);
          }}
        >
          <FormField label="First name" htmlFor="cs-first">
            <Input id="cs-first" required autoComplete="given-name" />
          </FormField>
          <FormField label="Last name" htmlFor="cs-last">
            <Input id="cs-last" autoComplete="family-name" />
          </FormField>
          <FormField label="Email" htmlFor="cs-email" required className="sm:col-span-2">
            <Input id="cs-email" type="email" required autoComplete="email" />
          </FormField>
          <FormField label="Message" htmlFor="cs-msg" required className="sm:col-span-2">
            <Textarea id="cs-msg" required rows={5} />
          </FormField>
          <Button type="submit" variant="primary" size="lg" loading={sending} className="sm:col-span-2">
            <Send /> Send message
          </Button>
        </form>
      </div>
    </section>
  );
}

import { ArrowRight, Headphones, Newspaper, TrendingUp } from "lucide-react";

const CARDS = [
  { icon: <TrendingUp />, title: "Sales", line: "Pricing for many sites, a visit, a demo.", how: "sales@parkingos.com.bd", cta: "Book a call" },
  { icon: <Headphones />, title: "Support", line: "Something not working? A person answers within the hour.", how: "+880 1700 000 000", cta: "Open WhatsApp" },
  { icon: <Newspaper />, title: "Press", line: "Stories, numbers and photos for journalists.", how: "press@parkingos.com.bd", cta: "Get the press kit" },
];

export default function ContactCards() {
  return (
    <section className="px-4 py-20 sm:px-6">
      <div className="mx-auto max-w-5xl">
        <div className="text-center">
          <h2 className="disp text-[32px] font-bold leading-[1.12] tracking-[-0.03em] text-text sm:text-[38px]">Who would you like to talk to?</h2>
          <p className="mt-3 text-[15.5px] text-body">Every message reaches a person, not a queue.</p>
        </div>
        <ul className="mt-12 grid gap-4 md:grid-cols-3">
          {CARDS.map((c) => (
            <li key={c.title} className="flex flex-col rounded-[20px] border border-border bg-raised p-6 shadow-[var(--lit)]">
              <span className="grid size-11 place-items-center rounded-[12px] bg-primary-subtle text-primary [&_svg]:size-5">{c.icon}</span>
              <h3 className="mt-5 text-[17px] font-semibold leading-6 text-text">{c.title}</h3>
              <p className="mt-1.5 text-[14px] leading-[1.6] text-muted">{c.line}</p>
              <p className="mt-4 text-[14px] font-medium text-text">{c.how}</p>
              <a href="#" className="mt-auto inline-flex items-center gap-1 pt-6 text-[14px] font-semibold text-primary hover:underline">
                {c.cta} <ArrowRight className="size-4" />
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}