/* ============================================================
   sections.jsx — CallFlow · Situations · SectorTabs
   ============================================================ */
const { useState: useSecState } = React;

/* ---------- CALL FLOW ---------- */
function CallFlow() {
  const { t } = window.LU.useLang();
  const { Icon, Reveal, SectionHead } = window.UI;
  const icons = ["phone-call", "phone-off", "headphones", "message-square-text", "calendar-check", "list-checks"];
  return (
    <section id="flow" className="py-24 sm:py-32 relative overflow-hidden">
      <div className="mx-auto max-w-7xl px-6">
        <SectionHead eye={t.flowEye} title={t.flowH2} sub={t.flowSub} />
        <Reveal>
          <div className="bg-card border border-border rounded-3xl p-6 sm:p-10 shadow-card">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-3">
              {t.flow.map(([label, sub], i) => (
                <Reveal key={i} delay={i * 70}>
                  <div className="relative">
                    <div className="bg-warm-tint border border-border rounded-2xl p-5 h-full">
                      <div className="flex items-center justify-between mb-4">
                        <div className="w-11 h-11 rounded-xl bg-gradient-brand text-brand-foreground grid place-items-center shadow-glow">
                          <Icon name={icons[i]} className="w-5 h-5" />
                        </div>
                        <span className="text-[10px] uppercase tracking-widest text-slate font-semibold tabular">0{i + 1}</span>
                      </div>
                      <p className="font-display font-semibold text-navy leading-snug">{label}</p>
                      <p className="text-xs text-slate mt-1">{sub}</p>
                    </div>
                    {i < t.flow.length - 1 && (
                      <Icon name="arrow-right" className="hidden lg:flex absolute top-1/2 -right-3 w-5 h-5 text-brand/40 -translate-y-1/2 z-10" strokeWidth={2.5} />
                    )}
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- SITUATIONS ---------- */
function Situations() {
  const { t } = window.LU.useLang();
  const { Icon, Reveal, SectionHead } = window.UI;
  const meta = [
    { icon: "hammer", tile: "bg-brand-soft text-brand", hov: "group-hover:bg-brand" },
    { icon: "users", tile: "bg-teal-soft text-teal", hov: "group-hover:bg-teal" },
    { icon: "car", tile: "bg-amber-soft text-amber", hov: "group-hover:bg-amber" },
    { icon: "moon", tile: "bg-accent text-violet", hov: "group-hover:bg-violet" },
  ];
  return (
    <section className="py-24 sm:py-32 bg-warm-tint border-y border-border">
      <div className="mx-auto max-w-7xl px-6">
        <SectionHead eye={t.sitEye} title={t.sitH2} />
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {t.sit.map(([label, text], i) => (
            <Reveal key={i} delay={i * 90}>
              <div className="group bg-card border border-border rounded-2xl p-6 hover:shadow-card hover:-translate-y-1 transition-all duration-300 h-full">
                <div className="flex items-center justify-between mb-5">
                  <div className={`w-12 h-12 rounded-xl grid place-items-center transition-colors ${meta[i].tile} ${meta[i].hov} group-hover:text-white`}>
                    <Icon name={meta[i].icon} className="w-5 h-5" />
                  </div>
                  <Icon name="phone-off" className="w-4 h-4 text-destructive/70" />
                </div>
                <h3 className="font-display font-semibold text-navy text-lg">{label}</h3>
                <p className="text-sm text-slate mt-1.5 leading-relaxed">{text}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- SECTOR TABS (anonymised panel copy, NL/FR/EN) ---------- */
const SEC = {
  nl: [
    { id: "garage", icon: "car", label: "Garage", title: "Onderhoud, banden, keuring.", text: "Laat oproepen voor onderhoud, bandenwissels, diagnose of keuring automatisch opvangen — ook als u onder een wagen ligt.", bullets: ["Type interventie wordt uitgevraagd", "Voorkeur dag/dagdeel genoteerd", "Merk en model opgevraagd"], greet: "onze garage", q: "Ik bel om een afspraak vast te leggen." },
    { id: "salon", icon: "scissors", label: "Salon", title: "Afspraken en annulaties.", text: "Klanten kunnen afspraken aanvragen of annulaties doorgeven terwijl u met een klant bezig bent.", bullets: ["Behandeling correct uitgevraagd", "Naam en telefoonnummer bevestigd", "Voorkeur dag genoteerd"], greet: "ons kantoor", q: "Ik wou graag een afspraak verzetten naar volgende week." },
    { id: "vakman", icon: "wrench", label: "Vakman", title: "Probleem, locatie, urgentie.", text: "Laat klanten hun probleem, locatie en dringendheid doorgeven terwijl u op de baan bent.", bullets: ["Soort probleem (lekkage, stroom…)", "Adres en bereikbaarheid", "Dringend? automatisch doorgestuurd"], greet: "ons kantoor", q: "We hebben een lekkende leiding in de keuken, het loopt al een uur." },
    { id: "praktijk", icon: "stethoscope", label: "Praktijk", title: "Afspraken en algemene vragen.", text: "Verzamel afspraken, algemene vragen en terugbelverzoeken ordelijk en gestructureerd.", bullets: ["Reden van consultatie", "Bestaande of nieuwe klant", "Dringend versus regulier"], greet: "ons kantoor", q: "Ik bel om een afspraak vast te leggen." },
    { id: "vastgoed", icon: "home", label: "Vastgoed", title: "Bezichtigingen en leads.", text: "Bezichtigingsaanvragen en contactgegevens worden automatisch genoteerd, klaar voor opvolging.", bullets: ["Welk pand of project", "Koop- of huurintentie", "Beschikbare momenten"], greet: "ons kantoor", q: "Ik bel voor een bezichtiging van een pand." },
    { id: "consultant", icon: "briefcase", label: "Consultant", title: "Intakes en terugbelverzoeken.", text: "Verzamel intakevragen en terugbelverzoeken terwijl u in gesprek of meeting zit.", bullets: ["Bedrijfsnaam en sector", "Korte aanleiding", "Voorkeur voor terugbelmoment"], greet: "ons kantoor", q: "Ik bel om een intake in te plannen." },
  ],
  fr: [
    { id: "garage", icon: "car", label: "Garage", title: "Entretien, pneus, contrôle.", text: "Laissez les appels pour l'entretien, le changement de pneus, le diagnostic ou le contrôle être pris en charge — même sous une voiture.", bullets: ["Type d'intervention demandé", "Jour/moment préféré noté", "Marque et modèle relevés"], greet: "notre garage", q: "J'appelle pour fixer un rendez-vous." },
    { id: "salon", icon: "scissors", label: "Salon", title: "Rendez-vous et annulations.", text: "Vos clients peuvent demander un rendez-vous ou signaler une annulation pendant que vous êtes occupé.", bullets: ["Prestation correctement demandée", "Nom et numéro confirmés", "Jour préféré noté"], greet: "notre bureau", q: "Je voudrais reporter un rendez-vous à la semaine prochaine." },
    { id: "vakman", icon: "wrench", label: "Artisan", title: "Problème, lieu, urgence.", text: "Laissez vos clients indiquer leur problème, le lieu et l'urgence pendant que vous êtes en route.", bullets: ["Type de problème (fuite, courant…)", "Adresse et disponibilité", "Urgent ? transféré automatiquement"], greet: "notre bureau", q: "Nous avons une fuite dans la cuisine, ça coule depuis une heure." },
    { id: "praktijk", icon: "stethoscope", label: "Cabinet", title: "Rendez-vous et questions.", text: "Rassemblez rendez-vous, questions générales et demandes de rappel de façon ordonnée.", bullets: ["Motif de la consultation", "Client existant ou nouveau", "Urgent ou régulier"], greet: "notre bureau", q: "J'appelle pour fixer un rendez-vous." },
    { id: "vastgoed", icon: "home", label: "Immobilier", title: "Visites et leads.", text: "Les demandes de visite et coordonnées sont notées automatiquement, prêtes pour le suivi.", bullets: ["Quel bien ou projet", "Intention d'achat ou de location", "Moments disponibles"], greet: "notre bureau", q: "J'appelle pour visiter un bien." },
    { id: "consultant", icon: "briefcase", label: "Consultant", title: "Intakes et rappels.", text: "Rassemblez questions d'intake et demandes de rappel pendant que vous êtes en réunion.", bullets: ["Nom d'entreprise et secteur", "Brève raison", "Moment de rappel préféré"], greet: "notre bureau", q: "J'appelle pour planifier un premier entretien." },
  ],
  en: [
    { id: "garage", icon: "car", label: "Garage", title: "Service, tyres, inspection.", text: "Let calls for service, tyre changes, diagnostics or inspection be handled automatically — even while you're under a car.", bullets: ["Type of work asked", "Preferred day/time logged", "Make and model captured"], greet: "our garage", q: "I'm calling to book an appointment." },
    { id: "salon", icon: "scissors", label: "Salon", title: "Bookings and cancellations.", text: "Customers can request appointments or report cancellations while you're busy with a client.", bullets: ["Treatment correctly asked", "Name and number confirmed", "Preferred day logged"], greet: "our office", q: "I'd like to move my appointment to next week." },
    { id: "vakman", icon: "wrench", label: "Tradesperson", title: "Problem, location, urgency.", text: "Let customers state their problem, location and urgency while you're on the road.", bullets: ["Type of problem (leak, power…)", "Address and availability", "Urgent? forwarded automatically"], greet: "our office", q: "We've got a leaking pipe in the kitchen, it's been running for an hour." },
    { id: "praktijk", icon: "stethoscope", label: "Practice", title: "Appointments and questions.", text: "Collect appointments, general questions and call-back requests in an orderly, structured way.", bullets: ["Reason for the visit", "Existing or new client", "Urgent versus routine"], greet: "our office", q: "I'm calling to book an appointment." },
    { id: "vastgoed", icon: "home", label: "Real estate", title: "Viewings and leads.", text: "Viewing requests and contact details are logged automatically, ready for follow-up.", bullets: ["Which property or project", "Buy or rent intent", "Available moments"], greet: "our office", q: "I'm calling to arrange a viewing." },
    { id: "consultant", icon: "briefcase", label: "Consultant", title: "Intakes and call-backs.", text: "Collect intake questions and call-back requests while you're in a meeting.", bullets: ["Company name and sector", "Brief reason", "Preferred call-back time"], greet: "our office", q: "I'm calling to schedule an intake." },
  ],
};

function Bubble({ who, text, dr }) {
  return (
    <div className={`flex ${dr ? "justify-start" : "justify-end"}`}>
      <div className={`max-w-[85%] rounded-2xl px-4 py-2.5 ${dr ? "bg-navy text-navy-foreground" : "bg-card border border-border text-navy"}`}>
        <p className="text-[10px] uppercase tracking-widest opacity-60 mb-0.5 font-semibold">{who}</p>
        <p className="leading-snug text-sm">{text}</p>
      </div>
    </div>
  );
}

function SectorTabs() {
  const { t, lang } = window.LU.useLang();
  const { Icon, Reveal, SectionHead } = window.UI;
  const data = SEC[lang] || SEC.nl;
  const [active, setActive] = useSecState(data[0].id);
  const current = data.find((d) => d.id === active) || data[0];
  const greetLine = lang === "fr"
    ? `Bonjour, vous êtes en ligne avec ${current.greet}. Comment puis-je vous aider ?`
    : lang === "en"
    ? `Good afternoon, you've reached ${current.greet}. How can I help you today?`
    : `Goedemiddag, u belt met ${current.greet}. Waarmee kan ik u vandaag helpen?`;
  const closeLine = lang === "fr"
    ? "Pas de souci, je note cela tout de suite. Quel est votre nom et à quel numéro peut-on vous joindre ?"
    : lang === "en"
    ? "No problem, I'll note that right away. What's your name and what number can we reach you on?"
    : "Geen probleem, ik noteer dat meteen. Wat is uw naam en op welk nummer mogen we u bereiken?";

  return (
    <section id="sectoren" className="py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-6">
        <SectionHead eye={t.secEye} title={t.secH2} max="max-w-2xl" />
        <Reveal>
          <div className="flex flex-wrap gap-2 mb-8">
            {data.map((d) => {
              const isActive = active === d.id;
              return (
                <button key={d.id} onClick={() => setActive(d.id)}
                  className={`inline-flex items-center gap-2 h-11 px-4 rounded-xl text-sm font-medium transition border ${
                    isActive ? "bg-navy text-navy-foreground border-navy shadow-soft" : "bg-card text-slate border-border hover:text-navy hover:border-navy/30"
                  }`}>
                  <Icon name={d.icon} className="w-4 h-4" /> {d.label}
                </button>
              );
            })}
          </div>
        </Reveal>

        <Reveal>
          <div className="grid lg:grid-cols-[1.1fr_1fr] gap-6 bg-card border border-border rounded-3xl p-8 sm:p-10 shadow-card">
            <div key={current.id} className="reveal in">
              <div className="w-12 h-12 rounded-2xl bg-gradient-brand text-brand-foreground grid place-items-center mb-5 shadow-glow">
                <Icon name={current.icon} className="w-6 h-6" />
              </div>
              <h3 className="text-3xl text-navy mb-3 font-display font-bold">{current.title}</h3>
              <p className="text-slate leading-relaxed text-lg">{current.text}</p>
              <ul className="mt-6 space-y-2.5">
                {current.bullets.map((b) => (
                  <li key={b} className="flex items-start gap-3 text-navy">
                    <Icon name="check-circle-2" className="w-5 h-5 text-teal shrink-0 mt-0.5" /> <span>{b}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="bg-warm-tint border border-border rounded-2xl p-6">
              <div className="flex items-center justify-between mb-4">
                <p className="text-[10px] uppercase tracking-widest text-slate font-semibold">{t.sample}</p>
                <span className="text-[10px] text-slate tabular">{current.label} · 1m 24s</span>
              </div>
              <div className="space-y-3">
                <Bubble who="DR" dr text={greetLine} />
                <Bubble who={lang === "fr" ? "Client" : lang === "en" ? "Customer" : "Klant"} text={current.q} />
                <Bubble who="DR" dr text={closeLine} />
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { CallFlow, Situations, SectorTabs });