/* ============================================================================
   KN CLEANING — Services, Options supplémentaires, Packs
   ============================================================================ */

/* Quel service pré-sélectionner dans le formulaire selon la carte cliquée */
const SERVICE_MAP = {
  exterieur: "Nettoyage extérieur",
  interieur: "Nettoyage intérieur",
  detailing: "Pack Complet",
  polissage: "Polissage carrosserie",
};
const PACK_MAP = {
  interieur: "Pack Intérieur",
  complet: "Pack Complet",
  premium: "Pack Premium Detail",
  golden: "Pack Golden",
};

function Services() {
  const list = window.KN.services;
  return (
    <section className="section section--mist" id="services">
      <div className="container">
        <div className="section-head center reveal">
          <span className="eyebrow"><Icon name="car-front" /> Nos prestations</span>
          <h2 className="section-title">Nos services de detailing</h2>
          <p className="lead">Un soin complet du véhicule, de la carrosserie à l'habitacle. Chaque prestation est réalisée avec méthode, des produits adaptés et une finition premium.</p>
        </div>

        <div className="services-grid">
          {list.map((s) => (
            <article className={"service-card reveal" + (s.featured ? " featured" : "")} key={s.id}>
              <span className="svc-ico"><Icon name={s.icon} /></span>
              <h3>{s.title}</h3>
              <p className="svc-text">{s.text}</p>
              <ul className="svc-list">
                {s.items.map((it, i) => (
                  <li key={i}><Icon name="check" /> {it}</li>
                ))}
              </ul>
              <button
                className={"btn " + (s.featured ? "btn-primary" : "btn-ghost")}
                onClick={() => window.prefillBooking({ service: SERVICE_MAP[s.id], note: "Service souhaité : " + s.title })}
              >
                {s.cta} <Icon name="arrow-right" />
              </button>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Options() {
  const list = window.KN.options;
  const formExtras = window.KN.form.extras;
  const [added, setAdded] = useState({});

  const add = (label) => {
    setAdded((p) => ({ ...p, [label]: true }));
    const inForm = formExtras.includes(label);
    window.prefillBooking(inForm ? { extra: label } : { note: "Option : " + label });
    window.showToast(label + " ajouté à votre demande");
  };

  return (
    <section className="section" id="options">
      <div className="container">
        <div className="section-head center reveal">
          <span className="eyebrow"><Icon name="plus-circle" /> Sur mesure</span>
          <h2 className="section-title">Options supplémentaires</h2>
          <p className="lead">Ces options sont proposées en complément des packs de nettoyage afin d'adapter la prestation à l'état réel du véhicule.</p>
        </div>

        <div className="options-grid">
          {list.map((o, i) => (
            <article className={"option-card reveal" + (added[o.label] ? " added" : "")} key={i}>
              <div className="option-top">
                <span className="opt-ico"><Icon name={o.icon} /></span>
                {/* 👉 Prix de l'option (data.js) */}
                <span className="opt-price">{o.price}</span>
              </div>
              <span className="opt-label">{o.label}</span>
              <p className="opt-desc">{o.desc}</p>
              <button className={"opt-add" + (added[o.label] ? " added" : "")} onClick={() => add(o.label)}>
                {added[o.label]
                  ? <><Icon name="check" /> Ajouté</>
                  : <><Icon name="plus" /> Ajouter à ma demande</>}
              </button>
            </article>
          ))}
        </div>
        <p className="form-hint" style={{ marginTop: "var(--space-8)" }}>
          Les prix définitifs sont confirmés lors du devis, selon l'état réel du véhicule.
        </p>
      </div>
    </section>
  );
}

function Packs() {
  const list = window.KN.packs;
  return (
    <section className="section section--mist" id="packs">
      <div className="container container--packs">
        <div className="section-head center reveal">
          <span className="eyebrow"><Icon name="layers" /> Formules</span>
          <h2 className="section-title">Nos packs</h2>
          <p className="lead">Des formules claires pour chaque besoin. Choisissez votre pack et réservez en quelques secondes — un devis précis vous est confirmé avant l'intervention.</p>
        </div>

        <div className="packs-grid">
          {list.map((p) => (
            <article className={"pack-card reveal" + (p.featured ? " featured" : "") + (p.gold ? " gold" : "")} key={p.id}>
              {p.featured ? <span className="pack-flag">Le plus complet</span> : null}
              {p.gold ? <span className="pack-flag pack-flag-gold">Premium ultime</span> : null}
              <span className="pack-tag">{p.tag}</span>
              <h3>{p.name}</h3>
              <p className="pack-desc">{p.desc}</p>
              {/* 👉 Prix du pack (data.js) */}
              <div className="pack-price">{p.price}</div>
              <ul className="pack-list">
                {p.items.map((it, i) => (
                  <li key={i}><Icon name="check" /> {it}</li>
                ))}
              </ul>
              <button
                className={"btn btn-block " + (p.gold ? "btn-gold" : p.featured ? "btn-primary" : "btn-dark")}
                onClick={() => window.prefillBooking({ service: PACK_MAP[p.id], note: "Pack souhaité : " + p.name })}
              >
                {p.cta}
              </button>
            </article>
          ))}
        </div>
        {window.KN.packsNote ? (
          <div className="packs-note reveal">
            <p className="pn-intro"><Icon name="info" /> {window.KN.packsNote.intro}</p>
            <ul className="pn-list">
              {window.KN.packsNote.items.map((it, i) => (
                <li key={i}>
                  <span className="pn-label"><Icon name={it.icon} /> {it.label}</span>
                  <span className="pn-price">{it.price}</span>
                </li>
              ))}
            </ul>
            <p className="pn-outro">{window.KN.packsNote.outro}</p>
          </div>
        ) : null}

        {window.KN.vehicleSupplements ? (
          <div className="veh-supp reveal">
            <p className="vs-intro"><Icon name="car" /> {window.KN.vehicleSupplements.intro}</p>
            <div className="vs-grid">
              {window.KN.vehicleSupplements.items.map((it, i) => (
                <div className="vs-item" key={i}>
                  <span className="vs-ico"><Icon name={it.icon} /></span>
                  <span className="vs-label">{it.label}</span>
                  <span className="vs-price">{it.price}</span>
                </div>
              ))}
            </div>
          </div>
        ) : null}
      </div>
    </section>
  );
}

Object.assign(window, { Services, Options, Packs });