"use client";

import Link from "next/link";
import { useI18n } from "@/lib/i18n";

interface Props {
  onOpenMatcher: () => void;
}

/** Homepage spine: Discover → Belong → Grow — hide the rest until needed. */
export default function JourneyStrip({ onOpenMatcher }: Props) {
  const { t } = useI18n();

  const steps = [
    {
      n: "01",
      emoji: "🌍",
      title: t.journey.step1Title,
      desc: t.journey.step1Desc,
      onClick: onOpenMatcher,
      cta: t.journey.step1Cta,
    },
    {
      n: "02",
      emoji: "🤝",
      title: t.journey.step2Title,
      desc: t.journey.step2Desc,
      href: "/meetups",
      cta: t.journey.step2Cta,
    },
    {
      n: "03",
      emoji: "🚀",
      title: t.journey.step3Title,
      desc: t.journey.step3Desc,
      href: "/digital",
      cta: t.journey.step3Cta,
    },
  ];

  return (
    <section className="journey-strip section-compact" id="path" aria-label={t.journey.title}>
      <div className="container">
        <div className="section-header journey-head reveal">
          <span className="section-tag">{t.journey.tag}</span>
          <h2>{t.journey.title}</h2>
          <p>{t.journey.subtitle}</p>
        </div>
        <ol className="journey-rail journey-rail-3 reveal">
          {steps.map((s, i) => (
            <li key={s.n} className="journey-step">
              {i > 0 && <span className="journey-connector" aria-hidden />}
              <div className="journey-card">
                <div className="journey-card-top">
                  <span className="journey-n">{s.n}</span>
                  <span className="journey-emoji">{s.emoji}</span>
                </div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
                <div className="journey-actions">
                  {"href" in s && s.href ? (
                    <Link href={s.href} className="btn btn-primary btn-sm">
                      {s.cta}
                    </Link>
                  ) : (
                    <button type="button" className="btn btn-primary btn-sm" onClick={s.onClick}>
                      {s.cta}
                    </button>
                  )}
                </div>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}