import { SITE } from "../config/site.js";
import { escapeHtml } from "../utils/escape-html.js";

const TG_PATH =
  'd="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"';
const TG_ICON_CARD = `<svg class="site-contact-card__icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" ${TG_PATH}/></svg>`;
const TG_ICON_BTN = `<svg class="site-contact-card__btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" ${TG_PATH}/></svg>`;

function telegramHandle(url) {
  try {
    const path = new URL(url).pathname.replace(/^\/+/, "");
    const slug = path.split("/")[0];
    if (slug) return `@${slug}`;
  } catch {

  }
  return "";
}

export function renderContactPage(outlet) {
  const s = SITE || {
    telegramUrl: "https://t.me/MockerSohbett",
    contactIntro: "",
    contactCardTitle: "",
    contactCardSubtitle: "",
    contactButton: "Telegram'da yaz",
    contactEyebrow: "İletişim",
    contactHeading: "İletişim",
  };
  const eyebrow = escapeHtml(s.contactEyebrow || "İletişim");
  const heading = escapeHtml(s.contactHeading || "İletişim");
  const tg = escapeHtml(s.telegramUrl || "https://t.me/MockerSohbett");
  const handle = telegramHandle(s.telegramUrl || "");
  const handleHtml = handle ? `<p class="site-contact-card__handle">${escapeHtml(handle)}</p>` : "";

  outlet.innerHTML = `
    <section class="site-contact-page relative w-full min-w-0 space-y-8 px-1 pb-4">
      <header class="site-contact-header relative overflow-hidden rounded-3xl border border-white/[0.08] bg-[#1e2739] p-8 shadow-panel ring-1 ring-white/[0.04] sm:p-10">
        <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_60%_at_100%_0%,rgba(22,119,255,0.09),transparent)]"></div>
        <div class="relative space-y-3">
          <span class="site-contact-eyebrow inline-flex items-center gap-2 rounded-full border border-accent/25 bg-accent/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-accent-bright">${eyebrow}</span>
          <h1 class="site-contact-heading text-3xl font-bold tracking-tight text-white sm:text-4xl">${heading}</h1>
          <p class="site-contact-intro max-w-2xl text-sm leading-relaxed sm:text-base">${escapeHtml(s.contactIntro || "")}</p>
        </div>
      </header>

      <article class="site-contact-card sm:p-8">
        <div class="site-contact-card__glow" aria-hidden="true"></div>
        <div class="site-contact-card__inner">
          <div class="site-contact-card__top">
            <span class="site-contact-card__icon-wrap" aria-hidden="true">${TG_ICON_CARD}</span>
            <div class="min-w-0 flex-1">
              <p class="site-contact-card__title">${escapeHtml(s.contactCardTitle || "")}</p>
              <p class="site-contact-card__subtitle">${escapeHtml(s.contactCardSubtitle || "")}</p>
              ${handleHtml}
            </div>
          </div>
          <a href="${tg}" target="_blank" rel="noopener noreferrer" class="k-btn k-btn--primary site-contact-card__btn">
            ${TG_ICON_BTN}
            <span>${escapeHtml(s.contactButton || "Telegram'da yaz")}</span>
          </a>
        </div>
      </article>
    </section>
  `;
}
