/* ---------- FAQ PAGE ---------- */
/*
 * Accordéon trilingue. Les 9 questions clés qu'un voyageur se pose
 * AVANT de réserver. Chaque entrée a un mini-icône SVG dessiné inline
 * dans le ton or de la maison.
 */

const FAQ_ITEMS = [
  { id: "checkin",    icon: "clock"   },
  { id: "breakfast",  icon: "cup"     },
  { id: "wifi",       icon: "wifi"    },
  { id: "parking",    icon: "car"     },
  { id: "cards",      icon: "card"    },
  { id: "cancel",     icon: "shield"  },
  { id: "transfer",   icon: "plane"   },
];

function FaqIcon({ name }) {
  // Stroke icons, monoline, 24px viewbox
  const common = {
    width: 22, height: 22, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor", strokeWidth: 1.4,
    strokeLinecap: "round", strokeLinejoin: "round",
  };
  switch (name) {
    case "clock":
      return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case "cup":
      return <svg {...common}><path d="M4 8h13v6a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5V8z"/><path d="M17 10h2a2 2 0 0 1 0 4h-2"/><path d="M8 5c0-1 1-1 1-2M11 5c0-1 1-1 1-2M14 5c0-1 1-1 1-2"/></svg>;
    case "wifi":
      return <svg {...common}><path d="M2 9a16 16 0 0 1 20 0"/><path d="M5 13a11 11 0 0 1 14 0"/><path d="M8.5 16.5a6 6 0 0 1 7 0"/><circle cx="12" cy="20" r="0.8" fill="currentColor"/></svg>;
    case "car":
      return <svg {...common}><path d="M4 17v-3l1.5-4a2 2 0 0 1 2-1.5h9a2 2 0 0 1 2 1.5L20 14v3"/><rect x="3" y="14" width="18" height="4" rx="1"/><circle cx="7" cy="18.5" r="1"/><circle cx="17" cy="18.5" r="1"/></svg>;
    case "paw":
      return <svg {...common}><circle cx="6" cy="11" r="1.6"/><circle cx="10" cy="6.5" r="1.6"/><circle cx="14" cy="6.5" r="1.6"/><circle cx="18" cy="11" r="1.6"/><path d="M8 18a4 4 0 0 1 8 0c0 1.5-1.5 2.5-4 2.5S8 19.5 8 18z"/></svg>;
    case "card":
      return <svg {...common}><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/><path d="M7 15h3"/></svg>;
    case "snow":
      return <svg {...common}><path d="M12 3v18"/><path d="M3 12h18"/><path d="M5.6 5.6l12.8 12.8"/><path d="M5.6 18.4L18.4 5.6"/><path d="M9 5l3 2 3-2M9 19l3-2 3 2M5 9l2 3-2 3M19 9l-2 3 2 3"/></svg>;
    case "shield":
      return <svg {...common}><path d="M12 3l8 3v5c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6l8-3z"/><path d="M9 12l2 2 4-4"/></svg>;
    case "plane":
      return <svg {...common}><path d="M21 12l-7-1-2-7-2 1 1 6-5 1-1-2-1.5.5L4.5 13l1.5 1 1-1.5L11 14l-2 5 2 1 3-5 6 1z"/></svg>;
    default:
      return null;
  }
}

function FaqRow({ id, icon, open, onToggle }) {
  const [t] = window.useT();
  const q = t(`faq.${id}.q`);
  const a = t(`faq.${id}.a`);
  return (
    <div className={"faq-row" + (open ? " is-open" : "")}>
      <button
        className="faq-q"
        onClick={onToggle}
        aria-expanded={open}
      >
        <span className="faq-icon"><FaqIcon name={icon} /></span>
        <span className="faq-q-text">{q}</span>
        <span className="faq-chev" aria-hidden="true">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="6 9 12 15 18 9"/>
          </svg>
        </span>
      </button>
      <div className="faq-a-wrap" aria-hidden={!open}>
        <div className="faq-a">
          {a.split("\n").map((line, i) => (
            <p key={i}>{line}</p>
          ))}
        </div>
      </div>
    </div>
  );
}

function FAQPage() {
  const [t] = window.useT();
  const [open, setOpen] = React.useState(() => new Set(["checkin"]));
  const toggle = (id) => {
    setOpen(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };
  return (
    <section className="page faq-page" data-screen-label="FAQ">
      <header className="page-head">
        <div className="page-eyebrow">{t("faq.eyebrow")}</div>
        <h1 className="page-title">
          {t("faq.title1")}<em>{t("faq.titleEm")}</em>{t("faq.title2")}
        </h1>
        <p className="page-sub">{t("faq.sub")}</p>
      </header>

      <div className="faq-list">
        {FAQ_ITEMS.map(it => (
          <FaqRow
            key={it.id}
            id={it.id}
            icon={it.icon}
            open={open.has(it.id)}
            onToggle={() => toggle(it.id)}
          />
        ))}
      </div>

      <footer className="faq-foot">
        <div className="faq-foot-line">{t("faq.foot.line")}</div>
        <div className="faq-foot-actions">
          <a
            className="faq-foot-a"
            href="https://wa.me/5596991010101"
            target="_blank"
            rel="noopener"
          >
            {t("faq.foot.whatsapp")} →
          </a>
          <a
            className="faq-foot-a"
            href="#contact"
            onClick={(e) => { e.preventDefault(); window.__omegaGo && window.__omegaGo("contact"); }}
          >
            {t("faq.foot.contact")} →
          </a>
        </div>
      </footer>
    </section>
  );
}

window.FAQPage = FAQPage;