/* global window, React */
// =============================================================
// LEARN (4 blocks) + DEMO LIVE + OBJECTIONS
// =============================================================
const { useState: useStateL } = React;

function Learn() {
  const { LEARN } = window.WEBINAR_DATA;
  return (
    <section className="learn">
      <div className="container">
        <div className="section-label">
          <span className="num">05 / COSA VEDRAI</span>
          <span className="line" />
        </div>
        <div className="learn-head">
          <h2>Cosa vedrai <em>in questi 90 minuti</em>.</h2>
        </div>

        <image-slot
          id="learn-banner"
          class="learn-banner"
          shape="rounded"
          radius="16"
          placeholder="Immagine di riferimento, schermata/architettura (sostituibile)"
        ></image-slot>

        <div className="learn-grid">
          {LEARN.map((item) => (
            <div className="learn-cell" key={item.n}>
              <div className="num-row">
                <div className="step-tag">{item.eyebrow}</div>
                <div className="big-num">{item.n}</div>
              </div>
              <h3 className="lt">
                {item.title.split(item.em).map((part, i, arr) => (
                  <React.Fragment key={i}>
                    {part}
                    {i < arr.length - 1 && <em>{item.em}</em>}
                  </React.Fragment>
                ))}
              </h3>
              <div className="desc">{item.desc}</div>
            </div>
          ))}
        </div>

        <window.SectionCTA />
      </div>
    </section>
  );
}

function DemoCheck() {
  return (
    <svg className="ic" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.2" opacity="0.4" />
      <path d="M5 8.2l2 2 4-4.4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function Demo() {
  const { CASES } = window.WEBINAR_DATA;
  const [tab, setTab] = useStateL(0);
  const c = CASES[tab];
  return (
    <section className="demo">
      <div className="container">
        <div className="section-label">
          <span className="num">03 / CASI REALI</span>
          <span className="line" />
        </div>
        <div className="cases-head">
          <h2>Non è teoria. Ecco cosa succede quando <span style={{ color: "var(--cyan)" }}>un'azienda vera</span> si costruisce la sua Mente Operativa.</h2>
          <p className="copy">Grandi gruppi o piccole attività, cambia la scala, non la logica. Scegli quello più vicino a te.</p>
        </div>

        <div className="case-tabs-hint"><span className="d" />Clicca e scopri i casi studio</div>
        <div className="case-tabs" role="tablist">
          {CASES.map((x, i) => (
            <button key={i} type="button" role="tab" aria-selected={tab === i} className={`case-tab ${tab === i ? "on" : ""}`} onClick={() => setTab(i)}>
              {x.tab}
            </button>
          ))}
        </div>

        <div className={`case-panel ${c.portrait ? "has-portrait" : ""}`}>
          <div className="case-body">
            <div className="case-tag">{c.tag}</div>
            <div className="case-client">{c.client}</div>
            <h3>{c.title}</h3>
            <div className="case-blocks">
              <div className="cb">
                <div className="l">Il problema</div>
                <p>{c.problema}</p>
              </div>
              <div className="cb">
                <div className="l">La soluzione</div>
                <p>{c.soluzione}</p>
              </div>
              <div className="cb ris">
                <div className="l"><DemoCheck /> Risultato</div>
                <p>{c.risultato}</p>
              </div>
            </div>
          </div>
          {c.portrait && (
            <div className="case-portrait">
              <img src={c.portrait} alt={c.portraitName} />
              <span className="case-portrait-name">{c.portraitName}</span>
            </div>
          )}
        </div>

        <div className="domanda-box">
          Grandi gruppi come Alfio Bardolla e FAG, o la singola attività col telefono che squilla:
          la logica è sempre la stessa. Ora fatti una domanda onesta: <strong>quanto cambierebbe il TUO
          fatturato se automatizzassi anche solo uno di questi processi nella tua attività?</strong>
        </div>

        <window.SectionCTA />
      </div>
    </section>
  );
}

function Plus() {
  return (
    <svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
      <path d="M6 1v10M1 6h10" stroke="#fff" strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  );
}

function Objections() {
  const { OBJECTIONS } = window.WEBINAR_DATA;
  const [open, setOpen] = useStateL(0);
  return (
    <section className="obj">
      <div className="container">
        <div className="section-label">
          <span className="num">06 / OBIEZIONI</span>
          <span className="line" />
        </div>
        <div className="obj-head">
          <h2>Le cinque<br /><span style={{ color: "var(--magenta)" }}>obiezioni</span> principali.</h2>
          <p className="copy">
            Le rispondo qui, prima che diventino la scusa per non agire.
            Tutto quello che probabilmente stai già pensando, affrontato in modo diretto,
            senza retorica da venditore.
          </p>
        </div>

        <div className="obj-list">
          {OBJECTIONS.map((o, i) =>
          <div className={`obj-item ${open === i ? "open" : ""}`} key={o.n}>
              <button className="obj-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="n">OBIEZIONE {o.n}</span>
                <span className="qtxt"><em>"{o.q}"</em></span>
                <span className="toggle"><Plus /></span>
              </button>
              <div className="obj-a">
                <div className="obj-a-inner">
                  <div className="obj-a-text">{o.a}</div>
                </div>
              </div>
            </div>
          )}
        </div>

        <window.SectionCTA />
      </div>
    </section>
  );
}

Object.assign(window, { Learn, Demo, Objections });