// Workshops — dedicated funnel sub-page
// Structured after the workshop pitch deck. No pricing, just the overview.

function WorkshopsPage({ copy }) {
  const c = copy.workshops;
  const ro = copy.lang === "ro";

  return (
    <div className="ws">
      {/* ============================================================
          01 · HERO
          ============================================================ */}
      <section className="ws-hero">
        <div className="page">
          <div className="ws-hero__top">
            <Eyebrow>{c.eyebrow}</Eyebrow>
          </div>

          <div className="ws-hero__grid">
            <div className="ws-hero__text">
              <h1 className="ws-hero__title h-display">{c.title}</h1>

              <p className="ws-hero__lead">{c.lead}</p>

              <div className="ws-hero__row">
                <Btn kind="primary" href="#ws-contact">{c.cta}</Btn>
                <Btn kind="ghost" href="#ws-proof">{c.cta_alt}</Btn>
              </div>
            </div>

            <figure className="ws-hero__visual">
              <div className="ws-hero__img">
                <img
                  src="assets/photo - workshop cegeka.webp"
                  alt="Workshop at Cegeka — 30+ participants in the room"
                  loading="eager"
                />
                <span className="ws-hero__cornermark">In&nbsp;the&nbsp;room</span>
              </div>
              <figcaption className="ws-hero__cap">
                <span className="ws-hero__cap-k">Cegeka · Bucharest</span>
                <span className="ws-hero__cap-v">{ro ? "Workshop introductiv · 30 participanți" : "Intro workshop · 30 participants"}</span>
              </figcaption>
            </figure>
          </div>

          <dl className="ws-hero__meta">
            {c.hero_meta.map((m, i) => (
              <div className="ws-hero__metarow" key={i}>
                <dt>{m.k}</dt>
                <dd>{m.v}</dd>
              </div>
            ))}
          </dl>
        </div>
      </section>

      {/* ============================================================
          02 · ABOUT THE FACILITATOR
          ============================================================ */}
      {/* ============================================================
          03 · METHODOLOGY
          ============================================================ */}
      <section className="section ws-method-section">
        <div className="page">
          <SectionHead label={c.method_label} title={c.method_title}>
            <p className="section__lead">{c.method_lead}</p>
          </SectionHead>

          <div className="ws-method">
            {c.method.map((m, i) => (
              <div key={i} className="ws-method__cell">
                <div className="ws-method__num">{m.n} · {m.h}</div>
                <h3 className="ws-method__title">{m.k}</h3>
                <p className="ws-method__body">{m.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============================================================
          04 · DAY STRUCTURE
          ============================================================ */}
      <section className="section">
        <div className="page">
          <SectionHead label={c.day_label} title={c.day_title}>
            <p className="section__lead">{c.day_lead}</p>
          </SectionHead>

          <div className="ws-day">
            <div className="ws-day__half">
              <div className="ws-day__bar">
                <span className="ws-day__time">{c.day_morning_label}</span>
                <span className="ws-day__kind">{c.day_morning_title}</span>
              </div>
              <ul className="ws-day__list">
                {c.day_morning.map((line, i) => {
                  const [head, ...rest] = line.split(" — ");
                  const tail = rest.join(" — ");
                  return (
                    <li key={i}>
                      {tail ? (
                        <React.Fragment>
                          <strong>{head}</strong>
                          <span> — {tail}</span>
                        </React.Fragment>
                      ) : (
                        <span>{line}</span>
                      )}
                    </li>
                  );
                })}
              </ul>
            </div>

            <div className="ws-day__break">{c.day_break}</div>

            <div className="ws-day__half">
              <div className="ws-day__bar">
                <span className="ws-day__time">{c.day_afternoon_label}</span>
                <span className="ws-day__kind">{c.day_afternoon_title}</span>
              </div>
              <ul className="ws-day__list">
                {c.day_afternoon.map((line, i) => {
                  const [head, ...rest] = line.split(" — ");
                  const tail = rest.join(" — ");
                  return (
                    <li key={i}>
                      {tail ? (
                        <React.Fragment>
                          <strong>{head}</strong>
                          <span> — {tail}</span>
                        </React.Fragment>
                      ) : (
                        <span>{line}</span>
                      )}
                    </li>
                  );
                })}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* ============================================================
          05 · DIFFERENTIATION
          ============================================================ */}
      <section className="section">
        <div className="page">
          <SectionHead label={c.diff_label} title={c.diff_title}>
            <p className="section__lead">{c.diff_lead}</p>
          </SectionHead>

          <div className="ws-diff">
            <div className="ws-diff__head">
              <div className="ws-diff__h ws-diff__h--market">{ro ? "Pe piață" : "Standard market"}</div>
              <div className="ws-diff__h ws-diff__h--us">{ro ? "Cum lucrăm noi" : "How we work"}</div>
            </div>
            {c.diff_rows.map((r, i) => (
              <div key={i} className="ws-diff__row">
                <div className="ws-diff__cell ws-diff__cell--market">{r.market}</div>
                <div className="ws-diff__cell ws-diff__cell--us">{r.us}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============================================================
          06 · FORMATS (overview only, NO pricing)
          ============================================================ */}
      <section className="section ws-formats-section">
        <div className="page">
          <SectionHead label={c.formats_label} title={c.formats_title}>
            <p className="section__lead">{c.formats_lead}</p>
          </SectionHead>

          <div className="ws-formats">
            {c.formats.map((f, i) => (
              <article
                key={i}
                className={"ws-format" + (f.recommended ? " ws-format--rec" : "")}
              >
                <div className="ws-format__top">
                  <span className="ws-format__tag">{f.tag}</span>
                  {f.recommended && (
                    <span className="ws-format__rec">{ro ? "Recomandat" : "Recommended"}</span>
                  )}
                </div>
                <h3 className="ws-format__title">{f.title}</h3>
                <div className="ws-format__audience">{f.audience}</div>
                <p className="ws-format__body">{f.body}</p>
                <ul className="ws-format__list">
                  {f.bullets.map((b, j) => (
                    <li key={j}>{b}</li>
                  ))}
                </ul>
              </article>
            ))}
          </div>

          <p className="ws-formats__note">{c.formats_note}</p>
        </div>
      </section>

      {/* ============================================================
          07 · PROOF / past audiences
          ============================================================ */}
      <section className="section ws-proof-section" id="ws-proof">
        <div className="page">
          <SectionHead label={c.proof_label} title={c.proof_title} />

          <div className="ws-proof">
            {c.proof.map((p, i) => {
              const isFeatured = i === 1; // Cegeka — features the in-room photo
              return (
                <article
                  key={i}
                  className={"ws-proof__card" + (isFeatured ? " ws-proof__card--featured" : "")}
                >
                  {isFeatured && (
                    <div className="ws-proof__photo">
                      <img
                        src="assets/photo - workshop ai-fluent.webp"
                        alt="Workshop in progress — slide reads &quot;Are you AI fluent?&quot;"
                        loading="lazy"
                      />
                    </div>
                  )}
                  <div className="ws-proof__body-wrap">
                    <div className="ws-proof__num">{String(i + 1).padStart(2, "0")}</div>
                    <div className="ws-proof__tag">{p.tag}</div>
                    <h3 className="ws-proof__h">{p.h}</h3>
                    <p className="ws-proof__body">{p.body}</p>
                  </div>
                </article>
              );
            })}
          </div>

          {c.proof_footer && (
            <p className="ws-proof__footer">{c.proof_footer}</p>
          )}
        </div>
      </section>

      {/* ============================================================
          08 · CTA / LinkedIn
          ============================================================ */}
      <section className="section ws-cta-section" id="ws-contact">
        <div className="page">
          <SectionHead label={c.cta_label} title={c.cta_title}>
            <p className="section__lead">{c.cta_lead}</p>
          </SectionHead>

          <div className="ws-cta">
            <div className="ws-cta__channel">
              <a
                className="ws-cta__channel-v ws-cta__channel-v--btn"
                href={(c.contact && c.contact[0] && c.contact[0].href) || "https://www.linkedin.com/in/vlad-tudor-18090a1a2"}
                target="_blank"
                rel="noopener"
              >
                <span className="ws-cta__li">in</span>
                <span>{ro ? "Conectează-te pe LinkedIn" : "Connect on LinkedIn"}</span>
                <span className="ws-cta__arrow" aria-hidden="true">↗</span>
              </a>
              <div className="ws-cta__channel-sub">
                {ro
                  ? "linkedin.com/in/vlad-tudor · răspund în 24h, personal."
                  : "linkedin.com/in/vlad-tudor · I reply within 24h, personally."}
              </div>
            </div>

            <div className="ws-cta__guide">
              <div className="ws-cta__guide-h">{ro ? "Spune-mi pe scurt" : "In your message, mention"}</div>
              <ul className="ws-cta__guide-list">
                <li>{ro ? "Compania / școala" : "Company / school"}</li>
                <li>{ro ? "Audiența și numărul de participanți" : "Audience type & headcount"}</li>
                <li>{ro ? "Domeniul / industria" : "Industry / domain"}</li>
                <li>{ro ? "Format preferat (1 zi sau 2 zile)" : "Preferred format (1 day or 2 days)"}</li>
                <li>{ro ? "Date posibile" : "Possible dates"}</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { WorkshopsPage });