// pages/sobre.jsx — Página Sobre
function AboutHero({ t, theme }) {
  return (
    <header
      className="mc-about-hero"
      data-screen-label="Sobre Hero"
      style={{ "--about-hero-image": `url("${asset(t.about_history_photo)}")` }}
    >
      <div className="mc-about-hero-inner">
        <div className="mc-about-hero-copy" data-reveal="left">
          <div className="mc-eyebrow">
            <span className="mc-tick" style={{ background: theme.accent }}></span>
            {t.about_eyebrow}
          </div>
          <h1>{t.about_title}</h1>
          <p>{t.hero_lede}</p>
        </div>
        <div className="mc-about-hero-meta" data-reveal="up">
          {(t.about_hero_cards || []).map(([value, label]) => (
            <div key={value}>
              <b>{value}</b>
              <span>{label}</span>
            </div>
          ))}
        </div>
      </div>
    </header>
  );
}

function AboutOrigin({ t, theme }) {
  return (
    <section className="mc-about-origin" data-screen-label="Origem WEG">
      <div className="mc-about-origin-inner">
        <div className="mc-about-origin-copy" data-reveal="left">
          <div className="mc-eyebrow">
            <span className="mc-tick" style={{ background: theme.accent }}></span>
            {t.about_history_eyebrow}
          </div>
          <h2>{t.about_history_title}</h2>
          <p>{t.about_history_p1}</p>
          <p>{t.about_history_p2}</p>
        </div>
        <div className="mc-about-origin-proof" data-reveal="right">
          <span style={{ color: theme.accent }}>{t.about_history_stat}</span>
          <div>
            <strong>{t.about_history_stat_label}</strong>
            <p>{t.about_history_caption}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutStory({ t, theme }) {
  return (
    <Section
      id="historia"
      theme={theme}
      eyebrow={t.about_story_eyebrow}
      title={t.about_story_title}
      label="Historia"
    >
      <div className="mc-about-story">
        <div className="mc-about-story-main">
          {(t.about_story_sections || []).map((item, index) => (
            <article className="mc-about-chapter" key={item.k}>
              <div className="mc-about-chapter-num" style={{ color: theme.accent }}>{item.k}</div>
              <div className="mc-about-chapter-body">
                <h3>{item.t}</h3>
                {item.p.map((paragraph) => <p key={paragraph}>{paragraph}</p>)}
              </div>
              {index < (t.about_story_quotes || []).length &&
                <blockquote className="mc-about-pullquote">
                  <div className="mc-about-pullquote-mark" style={{ color: theme.accent }}>"</div>
                  <p>{t.about_story_quotes[index].q}</p>
                  <cite>{t.about_story_quotes[index].a}</cite>
                </blockquote>
              }
            </article>
          ))}
        </div>
      </div>
    </Section>
  );
}

function SobrePage() {
  return (
    <PageShell current="sobre">
      {({ copy: t, theme }) => (
        <>
          <AboutHero t={t} theme={theme} />
          <AboutOrigin t={t} theme={theme} />
          <AboutStory t={t} theme={theme} />
          <Results t={t} theme={theme} />
          <FinalCTA t={t} theme={theme} />
        </>
      )}
    </PageShell>
  );
}
renderModroPage(<SobrePage />);