"use client";

import { useLucideIcons } from "@/hooks/useLucideIcons";

interface ContactMethod {
  variant?: "green" | "sand";
  href: string;
  icon: string;
  title: string;
  value: string;
  valueStyle?: React.CSSProperties;
  external?: boolean;
}

const METHODS: ReadonlyArray<ContactMethod> = [
  { variant: "green", href: "https://wa.me/", icon: "message-circle", title: "واتساب", value: "+966 5X XXX XXXX", external: true },
  { href: "tel:+966000000000", icon: "phone", title: "اتصال مباشر", value: "+966 11 XXX XXXX" },
  { variant: "sand", href: "mailto:hello@backyard.example", icon: "mail", title: "البريد الإلكتروني", value: "hello@backyard.example" },
  { href: "#", icon: "map-pin", title: "الموقع", value: "الرياض — المملكة العربية السعودية", valueStyle: { direction: "rtl", textAlign: "right" } },
];

export function ContactMethods() {
  useLucideIcons();
  return (
    <div>
      <span className="eyebrow">
        <span className="pip" />
        طرق التواصل
      </span>
      <h2 className="h-section contact-methods__heading">
        اختر الطريقة
        <br />
        <em>الأنسب لك.</em>
      </h2>
      <div className="methods">
        {METHODS.map((method) => (
          <a
            key={method.href + method.title}
            className={`method${method.variant ? ` ${method.variant}` : ""}`}
            href={method.href}
            {...(method.external ? { rel: "noopener noreferrer", target: "_blank" } : {})}
          >
            <span className="ic">
              <i data-lucide={method.icon} />
            </span>
            <div>
              <div className="ttl">{method.title}</div>
              <div className="v" style={method.valueStyle}>
                {method.value}
              </div>
            </div>
          </a>
        ))}
      </div>
      <div className="info-card">
        <h3>معلومات تُساعدنا على خدمتك بشكل أفضل</h3>
        <p>
          يمكنك تزويدنا بعدد الأشخاص، المدينة، التاريخ المتوقّع، ونوع التجربة المطلوبة، وسنقوم بالردّ عليك في أقرب
          وقت بتفاصيل واضحة وخيارات مناسبة.
        </p>
      </div>
    </div>
  );
}