// pages/materiais.jsx — Página Materiais
function MaterialsPageHero({ t, theme }) {
  return (
    <header className="mc-materials-page-hero" data-screen-label="Materiais Hero">
      <div className="mc-materials-page-hero-inner">
        <div className="mc-materials-page-hero-copy" data-reveal="left">
          <div className="mc-eyebrow">
            <span className="mc-tick" style={{ background: theme.accent }}></span>
            {t.materials_eyebrow}
          </div>
          <h1>{t.materials_title}</h1>
          <p>{t.materials_lede}</p>
        </div>
        <div className="mc-materials-page-metrics" data-reveal="up">
          {(t.materials_page_metrics || []).map(([value, label]) => (
            <div key={label}>
              <strong style={{ color: theme.accent }}>{value}</strong>
              <span>{label}</span>
            </div>
          ))}
        </div>
      </div>
    </header>
  );
}

function MaterialDocIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M7 3h7l3 3v15H7z" />
      <path d="M14 3v4h4" />
    </svg>
  );
}

function MaterialsLibrary({ t, theme }) {
  return (
    <section id="biblioteca" className="mc-free-content" data-screen-label="Conteudos gratuitos">
      <div className="mc-free-content-inner">
        <div className="mc-free-content-head">
          <h2>{t.materials_free_title}</h2>
          <p>{t.materials_free_lede}</p>
        </div>
        <div className="mc-free-docs-grid">
          {(t.materials_free_docs || []).map((doc) => (
            <article className="mc-free-doc-card" key={doc.t}>
              <div className="mc-free-doc-main">
                <div className="mc-free-doc-icon" style={{ color: theme.accent, borderColor: theme.rule }}>
                  <MaterialDocIcon />
                </div>
                <div>
                  <h3>{doc.t}</h3>
                  <p>{doc.d}</p>
                </div>
              </div>
              <div className="mc-free-doc-meta">
                <span>{doc.type}</span>
                <span>{doc.meta}</span>
              </div>
              <div className="mc-free-doc-actions">
                <a href={asset(doc.href)} download style={{ background: theme.accent, color: theme.onAccent }}>
                  {t.materials_download_cta}
                </a>
                <a href={asset(doc.href)} target="_blank" rel="noopener noreferrer">
                  {t.materials_preview_cta}
                </a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function MaterialsBooks({ t, theme }) {
  const markMissing = (event) => {
    const card = event.currentTarget.closest(".mc-book-card");
    if (card) card.classList.add("is-missing");
    event.currentTarget.removeAttribute("src");
  };

  return (
    <Section id="livros" theme={theme} eyebrow={t.materials_books_eyebrow} title={t.materials_books_title} label="Livros">
      <div className="mc-books-grid">
        {(t.materials_books || []).map((book) => (
          <article className="mc-book-card" key={book.t}>
            <div className="mc-book-cover">
              <img src={asset(book.cover)} alt={book.t} loading="lazy" onError={markMissing} />
              <div className="mc-book-cover-fallback">
                <span style={{ color: theme.accent }}>Livro</span>
                <strong>{book.t}</strong>
              </div>
            </div>
            <div className="mc-book-body">
              <h3>{book.t}</h3>
              <p>{book.d}</p>
              <a href={book.href} target="_blank" rel="noopener noreferrer" style={{ background: theme.accent, color: theme.onAccent }}>
                {t.materials_books_cta}
              </a>
            </div>
          </article>
        ))}
      </div>
    </Section>
  );
}

function SystemCheckIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M20 6 9 17l-5-5" />
    </svg>
  );
}

function MaterialsSystem({ t, theme }) {
  const email = window.MODRO_EMAIL || t.footer_email || "modroconsultoria@gmail.com";
  const emailHref = `mailto:${email}?subject=${encodeURIComponent(t.materials_system_email_subject)}`;

  return (
    <section id="sistema" className="mc-materials-system-section" data-screen-label="Sistema de gestao participativa">
      <div className="mc-materials-system-shell">
        <div className="mc-materials-system-copy" data-reveal="left">
          <div className="mc-materials-system-pill" style={{ color: theme.accent }}>
            {t.materials_system_badge}
          </div>
          <h2>{t.materials_system_heading}</h2>
          {(t.materials_system_paragraphs || []).map((paragraph) => (
            <p key={paragraph}>{paragraph}</p>
          ))}
          <div className="mc-materials-system-actions">
            <a href={t.materials_system_url} target="_blank" rel="noopener noreferrer" style={{ background: theme.accent, color: theme.onAccent }}>
              {t.materials_system_demo_cta}
            </a>
            <a href={emailHref}>
              {t.materials_system_email_cta}
            </a>
            <a href={whatsappHref(t.materials_system_whatsapp_message)} target="_blank" rel="noopener noreferrer">
              {t.materials_system_whatsapp_cta}
            </a>
          </div>
        </div>
        <div className="mc-materials-system-benefits" data-reveal="up">
          {(t.materials_system_benefits || []).map((benefit) => (
            <article className="mc-materials-system-benefit" key={benefit}>
              <span style={{ color: theme.accent, borderColor: theme.accent }}>
                <SystemCheckIcon />
              </span>
              <p>{benefit}</p>
            </article>
          ))}
          <div className="mc-materials-system-note">
            <strong>{t.materials_system_note_title}</strong>
            <p>{t.materials_system_note}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function MateriaisPage() {
  return (
    <PageShell current="materiais">
      {({ copy: t, theme }) => (
        <>
          <MaterialsPageHero t={t} theme={theme} />
          <MaterialsLibrary t={t} theme={theme} />
          <MaterialsBooks t={t} theme={theme} />
          <MaterialsSystem t={t} theme={theme} />
          <FinalCTA t={t} theme={theme} />
        </>
      )}
    </PageShell>
  );
}
renderModroPage(<MateriaisPage />);