Property 3

import { Check, Mail, Phone } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

import { cn } from "@/lib/utils";

import type { Surface } from "../_types/common";
import type { PropertyDetailContent } from "../_types/property";
import { defaultProperty3Content } from "./data";
import {
  eyebrowClass,
  SectionHeader,
  surfaceClass,
  toneFor,
} from "./section-header";

function telHref(phone: string): string {
  return `tel:${phone.replace(/[^\d+]/g, "")}`;
}

/** Description and features beside a facts table, the agent and the district. */
export default function Property3({
  className,
  content = defaultProperty3Content,
  surface = "default",
}: {
  /** Use `pt-0` when a gallery sits directly above in the same band. */
  className?: string;
  content?: PropertyDetailContent;
  surface?: Surface;
}) {
  return (
    <section className={cn("py-20 sm:py-28", surfaceClass[surface], className)}>
      <div className="mx-auto max-w-7xl px-5 sm:px-8 lg:px-12">
        <div className="grid gap-14 lg:grid-cols-12 lg:gap-16">
          <div className="lg:col-span-7">
            <SectionHeader
              eyebrow={content.eyebrow}
              size="sm"
              title={content.title}
              tone={toneFor(surface)}
            />

            <div className="mt-8 space-y-5 text-muted-foreground leading-relaxed">
              {content.description.map((paragraph) => (
                <p key={paragraph.slice(0, 40)}>{paragraph}</p>
              ))}
            </div>

            <h3 className="mt-12 font-display text-2xl text-primary">
              {content.featuresTitle}
            </h3>
            <ul className="mt-6 grid gap-4 sm:grid-cols-2">
              {content.features.map((feature) => (
                <li
                  className="flex items-start gap-3 text-muted-foreground text-sm leading-relaxed"
                  key={feature}
                >
                  <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-sm border border-input text-primary">
                    <Check className="size-3" />
                  </span>
                  {feature}
                </li>
              ))}
            </ul>
          </div>

          <div className="lg:col-span-5">
            <dl className="grid grid-cols-2 gap-px overflow-hidden rounded-lg bg-border">
              {content.facts.map((row) => (
                <div className="bg-card px-6 py-5" key={row.label}>
                  <dt className={cn(eyebrowClass, "text-muted-foreground/70")}>
                    {row.label}
                  </dt>
                  <dd className="mt-2 text-primary text-sm">{row.value}</dd>
                </div>
              ))}
            </dl>

            {content.agent && (
              <div className="mt-6 rounded-lg border border-border bg-card p-6">
                <p className={cn(eyebrowClass, "text-muted-foreground/70")}>
                  {content.agent.label}
                </p>
                <div className="mt-5 flex items-center gap-4">
                  <div className="relative size-16 shrink-0 overflow-hidden rounded-md bg-muted">
                    <Image
                      alt={content.agent.image.alt}
                      className="object-cover"
                      fill
                      sizes="64px"
                      src={content.agent.image.src}
                    />
                  </div>
                  <div>
                    <p className="font-display text-primary text-xl">
                      {content.agent.name}
                    </p>
                    <p className="mt-0.5 text-muted-foreground text-sm">
                      {content.agent.role}
                    </p>
                  </div>
                </div>

                <p className="mt-5 text-muted-foreground text-sm leading-relaxed">
                  {content.agent.bio}
                </p>

                <div className="mt-6 flex flex-col gap-3 border-border border-t pt-5">
                  <a
                    className="flex items-center gap-3 text-primary text-sm transition-colors hover:text-primary/70"
                    href={telHref(content.agent.phone)}
                  >
                    <Phone className="size-4 text-muted-foreground/70" />
                    {content.agent.phone}
                  </a>
                  <a
                    className="flex items-center gap-3 text-primary text-sm transition-colors hover:text-primary/70"
                    href={`mailto:${content.agent.email}`}
                  >
                    <Mail className="size-4 text-muted-foreground/70" />
                    {content.agent.email}
                  </a>
                </div>
              </div>
            )}

            {content.location && (
              <Link
                className="group mt-6 block rounded-lg border border-border bg-card p-6 transition-colors hover:border-input"
                href={content.location.href}
              >
                <p className={cn(eyebrowClass, "text-muted-foreground/70")}>
                  {content.location.label}
                </p>
                <p className="mt-4 font-display text-2xl text-primary">
                  {content.location.name}
                </p>
                <p className="mt-2 text-muted-foreground text-sm leading-relaxed">
                  {content.location.description}
                </p>
                <p className="mt-4 text-muted-foreground text-xs">
                  {content.location.meta}
                </p>
              </Link>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}