import type { Metadata } from "next";
import Link from "next/link";
import type { ReactNode } from "react";
import {
  Check, Zap, Shield,
  Globe, FileText, Award, Mail, BarChart3, QrCode,
  Sparkles, CalendarDays, ReceiptText,
  Compass, Scale, Route, MessagesSquare, SlidersHorizontal, Rocket,
} from "lucide-react";
import { TikahLogo } from "@/components/brand/tikah-logo";
import { BackToTop } from "@/components/landing/back-to-top";
import { FeatureShowcase } from "@/components/landing/feature-showcase";
import { FooterContact } from "@/components/landing/footer-contact";
import { LandingStats } from "@/components/landing/landing-stats";
import { TikahContactActions, TikahFloatingWhatsApp } from "@/components/landing/tikah-contact-actions";
import { TikahHeader } from "@/components/landing/tikah-header";
import { normalizeEventLocale } from "@/lib/event-i18n";
import type { EventLocale } from "@/lib/event-i18n";
import { getPlatformDomain } from "@/lib/platform";
import { tikahText } from "@/lib/tikah-i18n";

type TikahLandingProps = {
  searchParams?: Promise<{ lang?: string }>;
};

const STEP_META = [
  { n: "01", icon: MessagesSquare, color: "#0891B2" },
  { n: "02", icon: SlidersHorizontal, color: "#0891B2" },
  { n: "03", icon: Rocket, color: "#22D3EE" },
];

const FEATURE_META = [
  { icon: Globe, color: "#0891B2", bg: "#0891B218" },
  { icon: ReceiptText, color: "#22D3EE", bg: "#22D3EE18" },
  { icon: FileText, color: "#2563EB", bg: "#2563EB18" },
  { icon: CalendarDays, color: "#F59E0B", bg: "#F59E0B18" },
  { icon: Mail, color: "#7C3AED", bg: "#7C3AED18" },
  { icon: QrCode, color: "#F59E0B", bg: "#F59E0B18" },
  { icon: Award, color: "#DC2626", bg: "#DC262618" },
  { icon: BarChart3, color: "#0F766E", bg: "#0F766E18" },
];

const NAME_META = [
  { icon: Check, color: "#22D3EE", bg: "#0891B218" },
  { icon: Scale, color: "#F59E0B", bg: "#F59E0B18" },
  { icon: Route, color: "#22D3EE", bg: "#22D3EE18" },
];

const CONTACT_EMAIL = process.env.NEXT_PUBLIC_TIKAH_CONTACT_EMAIL || "contato@tikah.com.br";
const CONTACT_WHATSAPP_URL = process.env.NEXT_PUBLIC_TIKAH_WHATSAPP_URL || "https://wa.me/5516997986937?text=Quero%20conhecer%20mais%20sobre%20a%20Tik%C3%A1h.";

function WhatsAppIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      aria-hidden="true"
    >
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.411" />
    </svg>
  );
}

function landingHref(path: string, locale: EventLocale) {
  if (locale === "pt") return path;
  const separator = path.includes("?") ? "&" : "?";
  return `${path}${separator}lang=${locale}`;
}

function formatBrazilianPhoneFromWhatsApp(url: string) {
  const digits = url.match(/wa\.me\/(\d+)/)?.[1] ?? "";
  const national = digits.startsWith("55") ? digits.slice(2) : digits;

  if (national.length !== 11) return national;
  return `(${national.slice(0, 2)}) ${national.slice(2, 7)}-${national.slice(7)}`;
}

export async function generateMetadata({ searchParams }: TikahLandingProps): Promise<Metadata> {
  const params = await searchParams;
  const locale = normalizeEventLocale(params?.lang);
  const t = tikahText(locale);

  return {
    title: t.metadata.title,
    description: t.metadata.description,
  };
}

export default async function TikahLanding({ searchParams }: TikahLandingProps) {
  const params = await searchParams;
  const locale = normalizeEventLocale(params?.lang);
  const t = tikahText(locale);
  const platformDomain = getPlatformDomain();
  const currentYear = new Date().getFullYear();
  const contactPhone = formatBrazilianPhoneFromWhatsApp(CONTACT_WHATSAPP_URL);

  return (
    <div className="min-h-screen bg-[#071516] text-white">
      <TikahHeader locale={locale} nav={t.nav} openDemoLabel={t.actions.openDemo} />

      <main>
        <section className="relative overflow-hidden pt-12 pb-20 px-4 sm:pt-20 sm:pb-28">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(8,145,178,0.22),transparent_42%),linear-gradient(135deg,rgba(20,83,45,0.18),transparent_45%,rgba(245,158,11,0.10))] pointer-events-none" />

          <div className="relative max-w-5xl mx-auto text-center">
            <div className="inline-flex items-center gap-2 bg-cyan-500/15 border border-cyan-500/25 text-[#22D3EE] text-xs font-bold px-4 py-2 rounded-full mb-8 tracking-wide">
              <Sparkles className="h-3.5 w-3.5" />
              {t.hero.badge}
            </div>

            <h1 className="text-5xl sm:text-6xl lg:text-7xl font-extrabold leading-[1.08] mb-6 tracking-tight">
              {t.hero.titleStart}{" "}
              <HeroTitleHighlight text={t.hero.titleHighlight} />
            </h1>

            <p className="text-lg sm:text-xl text-white/55 max-w-2xl mx-auto mb-10 leading-relaxed">
              <HeroDescription text={t.hero.description} locale={locale} />
            </p>

            <div className="mb-20">
              <TikahContactActions email={CONTACT_EMAIL} whatsappUrl={CONTACT_WHATSAPP_URL} labels={t.contact} />
              <Link
                href={landingHref("/demo", locale)}
                target="_blank"
                rel="noopener noreferrer"
                className="mt-4 inline-flex items-center gap-2 text-white/50 hover:text-white font-medium transition-colors text-sm"
              >
                {t.actions.seeDemo}
              </Link>
            </div>

            <LandingStats stats={t.hero.stats} />
          </div>
        </section>

        <section id="nome" className="py-24 px-4 border-t border-white/[0.06] bg-white/[0.015]">
          <div className="max-w-6xl mx-auto grid gap-12 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
            <div>
              <p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "#F59E0B" }}>{t.name.eyebrow}</p>
              <h2 className="text-4xl sm:text-5xl font-extrabold mb-5 leading-tight">{t.name.title}</h2>
              <p className="text-white/55 leading-relaxed mb-7">
                {t.name.description}
              </p>
              <div className="rounded-2xl border p-6" style={{ borderColor: "#F59E0B33", backgroundColor: "#F59E0B0F" }}>
                <div className="flex items-center gap-3 mb-4">
                  <div className="flex h-11 w-11 items-center justify-center rounded-xl" style={{ backgroundColor: "#F59E0B1F", color: "#F59E0B" }}>
                    <Compass className="h-5 w-5" />
                  </div>
                  <div>
                    <p className="font-mono text-2xl font-black text-white">{t.name.quote}</p>
                    <p className="text-xs font-bold uppercase tracking-widest" style={{ color: "#F59E0BB3" }}>Maori</p>
                  </div>
                </div>
                <p className="text-lg font-semibold" style={{ color: "#F59E0B" }}>{t.name.quoteLabel}</p>
              </div>
            </div>

            <div>
              <div className="grid gap-4 sm:grid-cols-3">
                {t.name.items.map((item, index) => {
                  const meta = NAME_META[index];
                  const Icon = meta.icon;

                  return (
                    <div key={item.title} className="rounded-lg border border-white/[0.08] bg-white/[0.03] p-5">
                      <div className="w-10 h-10 rounded-lg flex items-center justify-center mb-5" style={{ backgroundColor: meta.bg }}>
                        <Icon className="h-5 w-5" style={{ color: meta.color }} />
                      </div>
                      <h3 className="font-bold text-white mb-2">{item.title}</h3>
                      <p className="text-sm text-white/45 leading-relaxed">{item.desc}</p>
                    </div>
                  );
                })}
              </div>
              <p className="mt-7 text-white/50 leading-relaxed">
                <HighlightTickText text={t.name.closing} />
              </p>
            </div>
          </div>
        </section>

        <section id="funcionalidades" className="pt-24 pb-12 md:pb-24 px-4 border-t border-white/[0.06]">
          <div className="max-w-7xl mx-auto">
            <div className="text-center mb-16">
              <p className="text-cyan-300 text-xs font-bold uppercase tracking-widest mb-3">{t.features.eyebrow}</p>
              <h2 className="text-4xl font-extrabold mb-4">{t.features.title}</h2>
              <p className="text-white/50 max-w-xl mx-auto leading-relaxed">
                {t.features.description}
              </p>
            </div>
            <div className="hidden md:grid md:grid-cols-2 lg:grid-cols-4 gap-4">
              {t.features.items.map((feature, index) => {
                const meta = FEATURE_META[index];
                const Icon = meta.icon;

                return (
                  <div
                    key={feature.title}
                    className="rounded-lg border border-white/[0.08] bg-white/[0.03] p-6 hover:bg-white/[0.06] hover:border-white/15 transition-all"
                  >
                    <div className="w-11 h-11 rounded-lg flex items-center justify-center mb-5" style={{ backgroundColor: meta.bg }}>
                      <Icon className="h-5 w-5" style={{ color: meta.color }} />
                    </div>
                    <h3 className="font-bold text-white mb-2 text-base">{feature.title}</h3>
                    <p className="text-sm text-white/45 leading-relaxed">{feature.desc}</p>
                  </div>
                );
              })}
            </div>
            <div className="md:hidden">
              <FeatureShowcase items={t.features.items} />
            </div>
          </div>
        </section>

        <section id="como-funciona" className="py-24 px-4 bg-white/[0.02] border-y border-white/[0.06]">
          <div className="max-w-5xl mx-auto">
            <div className="text-center mb-16">
              <p className="text-xs font-bold uppercase tracking-widest text-[#22D3EE] mb-3">{t.steps.eyebrow}</p>
              <h2 className="text-4xl font-extrabold mb-4">{t.steps.title}</h2>
              <p className="text-white/50 max-w-lg mx-auto">
                {t.steps.description}
              </p>
            </div>
            <div className="grid md:grid-cols-3 gap-10">
              {t.steps.items.map((step, index) => {
                const meta = STEP_META[index];
                const Icon = meta.icon;

                return (
                  <div key={meta.n} className="relative">
                    <div className="text-7xl font-black leading-none mb-5 select-none text-[#F59E0B]/20">
                      {meta.n}
                    </div>
                    <div className="w-10 h-10 rounded-xl flex items-center justify-center mb-4" style={{ backgroundColor: meta.color + "20" }}>
                      <Icon className="h-5 w-5" style={{ color: meta.color }} />
                    </div>
                    <h3 className="text-lg font-bold text-white mb-3">{step.title}</h3>
                    <p className="text-sm text-white/50 leading-relaxed">{step.desc}</p>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        <section className="py-20 px-4">
          <div className="max-w-4xl mx-auto">
            <div className="rounded-3xl border border-[#F59E0B]/25 bg-[linear-gradient(135deg,rgba(245,158,11,0.18)_0%,rgba(245,158,11,0.075)_42%,rgba(7,21,22,0)_82%)] p-10 sm:p-14 text-center">
              <div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-cyan-500/15 border border-cyan-500/20 mb-6">
                <Zap className="h-7 w-7 text-cyan-300" />
              </div>
              <h2 className="text-3xl sm:text-4xl font-extrabold mb-4">
                {t.demo.title}
              </h2>
              {t.demo.description && (
                <p className="text-white/55 max-w-md mx-auto mb-8 leading-relaxed">
                  {t.demo.description}
                </p>
              )}
              <Link
                href={landingHref("/demo", locale)}
                className="inline-flex items-center gap-2 bg-cyan-600 hover:bg-cyan-500 text-white font-bold px-8 py-4 rounded-xl transition-colors text-base shadow-lg shadow-cyan-950/40"
              >
                {t.actions.openDemo} <Globe className="h-5 w-5" />
              </Link>
              <p className="text-white/25 text-xs mt-5">{t.demo.note}</p>
            </div>
          </div>
        </section>

        <section className="py-20 px-4 border-y border-white/[0.06] bg-white/[0.01]">
          <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
            <div>
              <p className="text-xs font-bold uppercase tracking-widest text-[#22D3EE] mb-3">{t.domain.eyebrow}</p>
              <h2 className="text-3xl sm:text-4xl font-extrabold mb-5 leading-tight">
                {t.domain.title}
              </h2>
              <p className="text-white/55 leading-relaxed mb-6">
                {t.domain.description}
              </p>
              <ul className="space-y-3">
                {t.domain.items.map((item) => (
                  <li key={item} className="flex items-center gap-3 text-sm text-white/65">
                    <Check className="h-4 w-4 flex-shrink-0 text-[#22D3EE]" />
                    {item}
                  </li>
                ))}
              </ul>
            </div>
            <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-6 font-mono text-sm space-y-4">
              <div className="space-y-1">
                <p className="text-white/30 text-xs uppercase tracking-widest mb-2">{t.domain.initial}</p>
                <div className="flex items-center gap-2 bg-white/5 rounded-lg px-4 py-3 border border-white/10">
                  <span className="text-white/40">{platformDomain}/</span>
                  <span className="text-cyan-300 font-bold">seunome</span>
                </div>
              </div>
              <div className="text-white/20 text-center text-xs">{t.domain.renameArrow}</div>
              <div className="space-y-1">
                <p className="text-white/30 text-xs uppercase tracking-widest mb-2">{t.domain.renamed}</p>
                <div className="flex items-center gap-2 bg-white/5 rounded-lg px-4 py-3 border border-white/10">
                  <span className="text-white/40">{platformDomain}/</span>
                  <span className="font-bold" style={{ color: "#F59E0B" }}>seuevento</span>
                </div>
              </div>
              <div className="text-white/20 text-center text-xs">{t.domain.connectArrow}</div>
              <div className="space-y-1">
                <p className="text-white/30 text-xs uppercase tracking-widest mb-2">{t.domain.custom}</p>
                <div className="flex items-center gap-2 bg-cyan-500/10 rounded-lg px-4 py-3 border border-cyan-500/25">
                  <span className="font-bold" style={{ color: "#F59E0B" }}>seuevento.com.br</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section id="preco" className="py-24 px-4">
          <div className="max-w-3xl mx-auto text-center">
            <p className="text-xs font-bold uppercase tracking-widest text-[#22D3EE] mb-3">{t.price.eyebrow}</p>
            <h2 className="text-4xl font-extrabold mb-4">{t.price.title}</h2>
            {t.price.description && (
              <p className="text-white/50 max-w-lg mx-auto mb-14">
                {t.price.description}
              </p>
            )}

            <div className="rounded-3xl border border-[#22D3EE]/30 bg-gradient-to-b from-[#22D3EE]/15 to-transparent p-10 mb-10 mt-14">
              <div className="flex items-end justify-center gap-2 mb-3">
                <span className="text-8xl font-black text-white leading-none">8</span>
                <span className="text-4xl font-black text-[#22D3EE] mb-2">%</span>
              </div>
              <p className="text-lg text-white/70 font-medium">
                {t.price.percentageLabel}
              </p>
              <p className="text-sm text-white/40 mt-2">
                {t.price.transfer}
              </p>
            </div>

            <div className="grid sm:grid-cols-3 gap-4 mb-12 text-left">
              {t.price.items.map((item) => (
                <div key={item.title} className="rounded-2xl border border-white/[0.08] bg-white/[0.03] p-5">
                  <div className="w-8 h-8 rounded-lg bg-[#22D3EE]/15 flex items-center justify-center mb-4">
                    <Check className="h-4 w-4 text-[#22D3EE]" />
                  </div>
                  <h3 className="font-bold text-white text-base mb-2">{item.title}</h3>
                  <p className="text-sm text-white/45 leading-relaxed">{item.desc}</p>
                </div>
              ))}
            </div>

            <a
              href={CONTACT_WHATSAPP_URL}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 rounded-xl bg-[#22D3EE] px-8 py-4 text-base font-bold text-white shadow-lg shadow-cyan-950/40 transition-colors hover:bg-cyan-300"
            >
              <WhatsAppIcon className="h-5 w-5" />
              {t.actions.createEvent}
            </a>
          </div>
        </section>

        <section id="contato" hidden aria-hidden="true" className="hidden py-24 px-4 border-t border-white/[0.06]">
          <div className="max-w-3xl mx-auto text-center">
            <div className="mb-6 inline-flex items-center gap-2 text-sm font-semibold text-[#22D3EE]">
              <Shield className="h-4 w-4" />
              {t.contact.eyebrow}
            </div>
            <h2 className="text-5xl sm:text-6xl font-extrabold mb-6 leading-tight tracking-tight">
              {t.contact.title}
            </h2>
            <p className="text-white/50 text-lg mb-10 leading-relaxed">
              <HighlightBrandText text={t.contact.description} />
            </p>
            <TikahContactActions email={CONTACT_EMAIL} whatsappUrl={CONTACT_WHATSAPP_URL} labels={t.contact} />
            <p className="text-white/25 text-sm mt-6">
              {t.contact.note}
            </p>
          </div>
        </section>
      </main>

      <BackToTop />
      <TikahFloatingWhatsApp whatsappUrl={CONTACT_WHATSAPP_URL} label={t.contact.floating} />

      <footer className="border-t border-white/[0.06] py-14 px-4 bg-black/20">
        <div className="max-w-7xl mx-auto">
          <div className="grid sm:grid-cols-2 md:grid-cols-4 gap-10 mb-12">
            <div className="sm:col-span-2 md:col-span-1">
              <div className="mb-4">
                <TikahLogo theme="dark" height={34} />
              </div>
              <p className="text-sm text-white/40 leading-relaxed">
                {t.footer.description}{" "}
                <a href="https://huryz.com.br" className="font-semibold text-[#F59E0B] transition-colors hover:text-amber-300" target="_blank" rel="noopener noreferrer">
                  Huryz
                </a>
                .
              </p>
            </div>
            <div>
              <h4 className="text-xs font-bold uppercase tracking-widest text-white/50 mb-5">{t.footer.product}</h4>
              <div className="space-y-3 text-sm text-white/40">
                <div><a href="#funcionalidades" className="hover:text-white transition-colors">{t.nav.features}</a></div>
                <div><a href="#nome" className="hover:text-white transition-colors">{t.nav.name}</a></div>
                <div><a href="#preco" className="hover:text-white transition-colors">{t.nav.price}</a></div>
                <div><Link href={landingHref("/demo", locale)} target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">{t.footer.liveDemo}</Link></div>
              </div>
            </div>
            <div>
              <h4 className="text-xs font-bold uppercase tracking-widest text-white/50 mb-5">Contato</h4>
              <FooterContact email={CONTACT_EMAIL} phone={contactPhone} whatsappUrl={CONTACT_WHATSAPP_URL} />
            </div>
            <div>
              <h4 className="text-xs font-bold uppercase tracking-widest text-white/50 mb-5">{t.footer.legal}</h4>
              <div className="space-y-3 text-sm text-white/40">
                <div><Link href="/privacidade" className="hover:text-white transition-colors">{t.footer.privacy}</Link></div>
              </div>
            </div>
          </div>
          <div className="border-t border-white/[0.06] pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
            <div>
              <p className="text-sm text-white/25">
                © {currentYear} Tikáh by{" "}
                <a href="https://huryz.com.br" className="font-semibold text-[#F59E0B] transition-colors hover:text-amber-300" target="_blank" rel="noopener noreferrer">
                  Huryz
                </a>
                . {t.footer.rights}
              </p>
            </div>
            <p className="text-xs text-white/20 font-mono">{platformDomain}</p>
          </div>
        </div>
      </footer>
    </div>
  );
}

function HeroTitleHighlight({ text }: { text: string }) {
  return (
    <span className="bg-[linear-gradient(90deg,#22D3EE_0%,#67E8F9_34%,#F59E0B_100%)] bg-clip-text text-transparent">
      {text}
    </span>
  );
}

function HeroDescription({ text, locale }: { text: string; locale: EventLocale }) {
  const demoTerm = locale === "en" ? "model site" : locale === "es" ? "sitio modelo" : "site modelo";
  const highlightTerms = locale === "pt"
    ? ["Tikáh", "eventos", "congressos", "encontros profissionais", demoTerm]
    : locale === "en"
      ? ["Tikáh", "events", "congresses", "professional gatherings", demoTerm]
      : ["Tikáh", demoTerm];

  return (
    <>
      {highlightInlineTerms(text, highlightTerms, demoTerm, locale)}
    </>
  );
}

function highlightInlineTerms(text: string, terms: string[], demoTerm: string, locale: EventLocale): ReactNode[] {
  const matches = terms
    .map((term) => {
      const index = text.toLocaleLowerCase().indexOf(term.toLocaleLowerCase());
      return index >= 0 ? { index, term, value: text.slice(index, index + term.length) } : null;
    })
    .filter((match): match is { index: number; term: string; value: string } => Boolean(match))
    .sort((a, b) => a.index - b.index);

  const nodes: ReactNode[] = [];
  let cursor = 0;

  matches.forEach((match) => {
    if (match.index < cursor) return;
    if (match.index > cursor) nodes.push(text.slice(cursor, match.index));

    const isDemo = match.term.toLocaleLowerCase() === demoTerm.toLocaleLowerCase();
    const className = isDemo
      ? "font-semibold text-[#22D3EE] underline decoration-cyan-300/40 underline-offset-4 transition-colors hover:text-cyan-100"
      : "font-semibold text-[#22D3EE]";

    nodes.push(isDemo ? (
      <Link key={`${match.term}-${match.index}`} href={landingHref("/demo", locale)} target="_blank" rel="noopener noreferrer" className={className}>
        {match.value}
      </Link>
    ) : (
      <span key={`${match.term}-${match.index}`} className={className}>
        {match.value}
      </span>
    ));

    cursor = match.index + match.term.length;
  });

  if (cursor < text.length) nodes.push(text.slice(cursor));
  return nodes;
}

function HighlightBrandText({ text }: { text: string }) {
  const parts = text.split("Tikáh");

  return (
    <>
      {parts.map((part, index) => (
        <span key={`${part}-${index}`}>
          {index > 0 && <span className="font-semibold text-[#22D3EE]">Tikáh</span>}
          {part}
        </span>
      ))}
    </>
  );
}

function HighlightTickText({ text }: { text: string }) {
  const parts = text.split("“tickar”");

  return (
    <>
      {parts.map((part, index) => (
        <span key={`${part}-${index}`}>
          {index > 0 && <em className="italic" style={{ color: "#F59E0B" }}>“tickar”</em>}
          {part}
        </span>
      ))}
    </>
  );
}