Faq Contact

import { Mail, MessageCircle } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FaqContactProps {
  title?: string;
  items?: { q: string; a: string }[];
  contact?: { title: string; text: string; email: string; chatHref: string };
  className?: string;
}

const DEFAULT_ITEMS = [
  {
    q: "Do I need a sustainability person to use Grove?",
    a: "No. Most of our customers start with someone from finance or operations. Grove explains every step in plain language.",
  },
  { q: "What happens after the trial?", a: "You choose a plan or stay on Seedling if you’re under 20 people. Your data stays yours either way." },
  { q: "Can we get help with our first report?", a: "Every paid plan includes a one-hour session with a climate advisor." },
];

/** FAQ beside a contact card: native disclosure list on the left, and a clay-tinted card with a sprouting-leaf illustration, email and chat buttons on the right. */
export function FaqContact({
  title = "Still wondering?",
  items = DEFAULT_ITEMS,
  contact = { title: "Talk to a human", text: "Our climate team answers within a few hours, Monday to Friday.", email: "hello@grove.eco", chatHref: "#chat" },
  className,
}: FaqContactProps) {
  return (
    <section aria-labelledby="os-fct-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container grid gap-10 lg:grid-cols-[1.6fr_1fr]">
        <div>
          <h2 id="os-fct-title" className="font-da-display text-[clamp(2.25rem,5vw,3.5rem)] tracking-da-display">
            {title}
          </h2>
          <div className="mt-8 divide-y divide-da-border border-y border-da-border">
            {items.map((it, i) => (
              <details key={it.q} open={i === 0} className="group">
                <summary className="da-focus flex cursor-pointer list-none items-center justify-between gap-4 rounded-da-sm py-6 font-da-display text-xl [&::-webkit-details-marker]:hidden">
                  {it.q}
                  <span aria-hidden className="text-2xl text-da-primary transition-transform duration-(--da-duration) group-open:rotate-45">
                    +
                  </span>
                </summary>
                <p className="pb-6 text-da-muted-fg">{it.a}</p>
              </details>
            ))}
          </div>
        </div>
        <aside className="flex flex-col rounded-da-lg bg-da-secondary p-8 text-da-secondary-fg">
          <svg aria-hidden viewBox="0 0 120 80" className="h-20 w-28">
            <path d="M60 78V36" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
            <path d="M60 50c-16 0-26-10-26-26 16 0 26 10 26 26Zm0-8c14 0 22-8 22-22-14 0-22 8-22 22Z" fill="currentColor" opacity=".8" />
            <ellipse cx="60" cy="78" rx="36" ry="3" fill="currentColor" opacity=".3" />
          </svg>
          <h3 className="mt-6 font-da-display text-3xl">{contact.title}</h3>
          <p className="mt-2 opacity-90">{contact.text}</p>
          <div className="mt-8 grid gap-2">
            <a
              href={`mailto:${contact.email}`}
              className="da-focus inline-flex h-12 items-center justify-center gap-2 rounded-da-pill bg-da-surface font-medium text-da-surface-fg hover:bg-da-surface/90"
            >
              <Mail aria-hidden className="size-4" /> {contact.email}
            </a>
            <a
              href={contact.chatHref}
              className="da-focus inline-flex h-12 items-center justify-center gap-2 rounded-da-pill border border-current/40 font-medium hover:bg-current/10"
            >
              <MessageCircle aria-hidden className="size-4" /> Start a chat
            </a>
          </div>
        </aside>
      </div>
    </section>
  );
}

export default FaqContact;