/* ============================================================
   SAYRU — about.jsx  (dedicated About page sections)
   Reuses window.About (journey timeline), window.Process, window.QuoteBlock.
   ============================================================ */

function AboutHero() {
  const { t } = useT();
  return (
    <section className="shero abhero dark">
      <div className="cc-grid shero__grid"></div>
      <div className="hero__glow hero__glow--1"></div>
      <div className="hero__rings" aria-hidden="true"><span></span><span></span><span></span><span></span></div>
      <div className="wrap abhero__in">
        <div className="abhero__content">
          <nav className="crumb" aria-label="breadcrumb">
            <a href="index.html">{t('sd.breadcrumb.home')}</a>
            <span className="crumb__sep">/</span>
            <span className="crumb__cur">{t('nav.about')}</span>
          </nav>
          <div className="kicker kicker--ondark shero__kick">{t('ab.hero.kick')}</div>
          <h1 className="shero__title abhero__title">{nl2br(t('ab.hero.title'))}</h1>
          <p className="shero__body">{t('ab.hero.body')}</p>
          <div className="abhero__stats">
            {[['why.stat3', 'why.stat3l'], ['why.stat1', 'why.stat1l'], ['why.stat2', 'why.stat2l']].map(([v, l]) => (
              <div className="abhero__stat" key={v}>
                <span className="abhero__stat-v grad-cyan">{t(v)}</span>
                <span className="abhero__stat-l">{t(l)}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="abhero__visual">
          <div className="abhero__eye"><Radar size={150} /></div>
          <div className="abhero__quote">
            <span className="quote__mark abhero__qmark">“</span>
            <p>{nl2br(t('quote.text'))}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutMission() {
  const { t } = useT();
  return (
    <section className="section abmission">
      <div className="wrap abmission__in">
        <div className="abmission__text reveal">
          <div className="kicker">{t('ab.mission.kick')}</div>
          <h2 className="abmission__h">{t('ab.mission.t')}</h2>
          <p>{t('ab.mission.p1')}</p>
          <p>{t('ab.mission.p2')}</p>
        </div>
        <div className="abmission__boxes reveal d1">
          <div className="abmission__box">
            <span className="abmission__box-ic"><Icon name="goz" size={24} /></span>
            <h3>{t('ab.vision.t')}</h3>
            <p>{t('ab.vision.d')}</p>
          </div>
          <div className="abmission__box abmission__box--alt">
            <span className="abmission__box-ic"><Icon name="yon" size={24} /></span>
            <h3>{t('ab.missionbox.t')}</h3>
            <p>{t('ab.missionbox.d')}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

const VALUES = [
  { k: 'val1', ic: 'goz' }, { k: 'val2', ic: 'iz' }, { k: 'val3', ic: 'spark' }, { k: 'val4', ic: 'support' },
];
function AboutValues() {
  const { t } = useT();
  return (
    <section className="section section--why" style={{ background: 'var(--bg-alt)' }}>
      <div className="wrap">
        <div className="section-head center reveal">
          <div className="kicker">{t('ab.values.kick')}</div>
          <h2>{t('ab.values.title')}</h2>
        </div>
        <div className="abval-grid">
          {VALUES.map((v, n) => (
            <div className={'abval-card reveal d' + (n + 1)} key={v.k}>
              <span className="abval-card__ic"><Icon name={v.ic} size={24} /></span>
              <h3>{t('ab.' + v.k + '.t')}</h3>
              <p>{t('ab.' + v.k + '.d')}</p>
              <span className="abval-card__n mono">{String(n + 1).padStart(2, '0')}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutGallery() {
  const { t } = useT();
  const labels = ['ab.gal1', 'ab.gal2', 'ab.gal3'];
  return (
    <section className="section section--tight sgal">
      <div className="wrap">
        <div className="kicker sgal__kick reveal">{t('ab.gallery.kick')}</div>
        <div className="sgal__grid">
          {labels.map((l, n) => (
            <figure key={n} className={'sgal__item reveal d' + (n + 1)}>
              <CmsImage slot={'about.gallery.' + n} className="sgal__img" placeholder={t(l)} shape="rounded" radius="14" />
              <figcaption className="mono">{t(l)}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutCTA() {
  const { t } = useT();
  return (
    <section className="section--cta">
      <div className="wrap cta__in reveal">
        <div className="cta__text">
          <div className="kicker">{t('cta.kick')}</div>
          <h2 className="cta__title">{t('ab.cta.title')}</h2>
          <p className="cta__body">{t('cta.body')}</p>
        </div>
        <div className="cta__actions">
          <a href="index.html#iletisim" className="btn btn--primary">{t('cta.btn1')} <span className="ar"><Icon name="arrow" size={17} /></span></a>
          <a href="https://wa.me/905417190401" target="_blank" rel="noopener" className="btn btn--ghost cta__wa"><Icon name="wa" size={17} /> {t('cta.btn2')}</a>
        </div>
      </div>
    </section>
  );
}

function AboutPage() {
  useReveal();
  return (
    <main>
      <AboutHero />
      <AboutMission />
      <AboutValues />
      <About />
      <AboutGallery />
      <Process />
      <QuoteBlock />
      <AboutCTA />
    </main>
  );
}

Object.assign(window, { AboutHero, AboutMission, AboutValues, AboutGallery, AboutCTA, AboutPage });