// Award section + Download + Footer

function AwardSection({ t }) {
  const cert = t('award.cert');
  return (
    <section id="award" className="section award-section" style={{
      background: 'var(--bg)',
      paddingTop: 'calc(120px * var(--density))',
      paddingBottom: 'calc(140px * var(--density))',
    }}>
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 72 }} className="reveal">
          <span className="nav-logo" style={{ width: 36, height: 36 }} />
          <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em' }}>
            <span style={{ color: 'var(--sand)' }}>sendar</span>
            <span style={{ opacity: 0.7 }}> award</span>
          </h3>
        </div>

        <div className="award-grid">
          <div className="award-left">
            <h2 className="display reveal-headline reveal-lines" style={{
              fontSize: 'clamp(56px, 8.4vw, 128px)',
              color: 'var(--sand)',
              margin: 0,
              overflow: 'hidden',
            }}>
              <span style={{ fontWeight: 600, fontStyle: 'italic' }}>{t('award.title1')}</span>
              <span>{t('award.title2')}</span>
              <span>{t('award.title3')}</span>
              <span>{t('award.title4')}</span>
            </h2>
            <div className="reveal reveal-delay-1" style={{ marginTop: 56, maxWidth: 520 }}>
              <div className="display" style={{ fontSize: 20, color: 'var(--sand)', marginBottom: 14 }}>
                {t('award.tagline')}
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--text)', opacity: 0.85, margin: 0 }}>
                {t('award.body')}
              </p>
              <a href="/kontakt?betreff=award" className="nominate-btn" style={{ textDecoration: 'none', display: 'inline-block' }}>{t('award.nominate')}</a>
            </div>
          </div>

          <div className="award-right reveal reveal-delay-2">
            <Certificate cert={cert} />
          </div>
        </div>
      </div>

      <style>{`
        .award-grid {
          display: grid;
          grid-template-columns: 1.1fr 1fr;
          gap: 60px;
          align-items: start;
        }
        @media (max-width: 960px) {
          .award-grid { grid-template-columns: 1fr; }
        }
        .nominate-btn {
          display: inline-flex; align-items: center; gap: 10px;
          margin-top: 28px;
          padding: 12px 22px;
          border-radius: var(--radius-pill);
          border: 1px solid var(--sand);
          background: transparent;
          color: var(--sand);
          font-size: 13px;
          font-weight: 500;
          letter-spacing: 0.02em;
          transition: all 0.2s;
        }
        .nominate-btn:hover { background: var(--sand); color: var(--ink); }
        .nominate-btn::after { content: '→'; }
      `}</style>
    </section>
  );
}

function Certificate({ cert }) {
  return (
    <div className="certificate">
      <div className="cert-header">
        <div className="cert-logo">
          <span style={{
            width: 22, height: 22, borderRadius: '50%',
            border: '1.5px solid var(--ink)', display: 'inline-block',
          }}/>
          <span style={{ fontSize: 14, fontWeight: 700 }}>{cert.brand}</span>
          <span style={{ fontSize: 14, fontWeight: 400, opacity: 0.65 }}>{cert.title}</span>
        </div>
        <div style={{ fontSize: 11, marginTop: 2, opacity: 0.7 }}>{cert.date}</div>
      </div>

      <div className="cert-winner">
        <div className="display" style={{ fontSize: 48, fontWeight: 800, letterSpacing: '-0.015em', lineHeight: 1 }}>
          {cert.winner}
        </div>
        <div style={{ fontSize: 14, marginTop: 4, opacity: 0.75 }}>{cert.winnerCity}</div>
      </div>

      <div className="cert-section">
        <div className="cert-label mono">{cert.recipientLabel}</div>
        <div style={{ fontSize: 14, fontWeight: 700, marginTop: 4 }}>{cert.recipient}</div>
        <p style={{ fontSize: 11, lineHeight: 1.5, margin: '12px 0 0', opacity: 0.8, maxWidth: '90%' }}>
          {cert.reason}
        </p>
      </div>

      <div className="cert-section">
        <div className="cert-label mono">{cert.categoriesLabel}</div>
        <ul style={{ margin: '8px 0 0', padding: '0 0 0 14px', fontSize: 11, lineHeight: 1.7, opacity: 0.85 }}>
          {cert.categories.map((c, i) => <li key={i}>{c}</li>)}
        </ul>
      </div>

      <p style={{ fontSize: 9, lineHeight: 1.5, margin: '14px 0 0', opacity: 0.62, maxWidth: '85%' }}>
        {cert.note}
      </p>

      <div className="cert-footer">
        <div>
          <div className="cert-signature">Marco</div>
          <div style={{ fontSize: 10, fontWeight: 600 }}>{cert.signature}</div>
          <div style={{ fontSize: 9, opacity: 0.7 }}>{cert.signatureRole}</div>
        </div>
        <div style={{ fontSize: 9, opacity: 0.6, alignSelf: 'flex-end' }}>{cert.month}</div>
      </div>

      <svg className="cert-deco" viewBox="0 0 300 300">
        <circle cx="260" cy="260" r="80" fill="none" stroke="var(--ink)" strokeWidth="0.5"/>
        <circle cx="260" cy="260" r="130" fill="none" stroke="var(--ink)" strokeWidth="0.5"/>
      </svg>

      <style>{`
        .certificate {
          position: relative;
          background: var(--sand);
          color: var(--ink);
          padding: 30px 32px 28px;
          border-radius: 4px;
          max-width: 420px;
          margin-left: auto;
          box-shadow: 0 30px 80px rgba(0,0,0,0.5);
          overflow: hidden;
          display: flex; flex-direction: column;
        }
        .cert-header { border-bottom: 0.5px solid rgba(0,0,0,0.25); padding-bottom: 10px; }
        .cert-logo { display: flex; align-items: center; gap: 6px; }
        .cert-winner { margin: 22px 0 18px; }
        .cert-section { margin-top: 16px; }
        .cert-label { font-size: 9px; opacity: 0.72; }
        .cert-footer {
          margin-top: 28px;
          display: flex; justify-content: space-between; align-items: flex-end;
          gap: 20px;
          position: relative;
          z-index: 2;
        }
        .cert-signature {
          font-family: 'Brush Script MT', 'Snell Roundhand', cursive;
          font-size: 26px;
          font-style: italic;
          line-height: 1;
          margin-bottom: 4px;
          transform: rotate(-4deg);
          transform-origin: left bottom;
          display: inline-block;
        }
        .cert-deco {
          position: absolute; right: -40px; bottom: -30px;
          width: 200px; height: 200px; opacity: 0.55;
          pointer-events: none;
          z-index: 1;
        }
      `}</style>
    </div>
  );
}

function DownloadSection({ t }) {
  return (
    <section id="download" className="section download-section" style={{
      background: 'var(--bg-2)',
      paddingTop: 'calc(120px * var(--density))',
      paddingBottom: 'calc(120px * var(--density))',
    }}>
      <div className="container">
        <div className="kicker reveal" style={{ color: 'var(--sand)', marginBottom: 28 }}>{t('download.kicker')}</div>
        <h2 className="display reveal-headline reveal-lines" style={{
          fontSize: 'clamp(48px, 7vw, 104px)',
          color: 'var(--sand)',
          margin: 0,
          overflow: 'hidden',
        }}>
          <span>{t('download.title1')}</span>
          <span>{t('download.title2')}</span>
        </h2>
        <p className="reveal reveal-delay-1" style={{
          maxWidth: 540, marginTop: 36,
          fontSize: 17, lineHeight: 1.55, color: 'var(--text)', opacity: 0.88,
        }}>
          {t('download.body')}
        </p>
        <div className="reveal reveal-delay-2" style={{ display: 'flex', gap: 16, marginTop: 36, alignItems: 'center', flexWrap: 'wrap' }}>
          <AppStoreButton label={t('download.appStore')} />
          <span style={{ fontSize: 13, color: 'var(--text-dim)' }}>{t('download.playStore')}</span>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  const cols = t('footer.cols') || [];
  return (
    <footer id="kontakt" className="footer" style={{
      background: 'var(--bg)',
      padding: 'calc(80px * var(--density)) 0 32px',
      borderTop: '1px solid var(--hairline)',
    }}>
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="nav-brand" style={{ fontSize: 22, gap: 12 }}>
              <span className="nav-logo" style={{ width: 36, height: 36 }} />
              <span>sendar</span>
            </div>
            <p style={{ marginTop: 20, maxWidth: 280, fontSize: 14, lineHeight: 1.55, color: 'var(--text-dim)' }}>
              {t('footer.tagline')}
            </p>
            <div className="mono" style={{ marginTop: 24, color: 'var(--text-dim)' }}>
              {t('footer.location')}
            </div>
          </div>
          {cols.map((c, i) => (
            <div key={i}>
              <div className="mono" style={{ color: 'var(--sand)', marginBottom: 16, opacity: 0.9 }}>{c.title}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.links.map((l, j) => {
                  // Back-compat: strings entries may be a plain string or {label, href}.
                  const label = typeof l === 'string' ? l : l.label;
                  const href  = typeof l === 'string' ? '#'   : l.href;
                  return (
                    <li key={j}><a href={href} style={{ fontSize: 14, color: 'var(--text)', opacity: 0.78 }}>{label}</a></li>
                  );
                })}
              </ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <span>{t('footer.copyright')}</span>
          <span className="mono">v0.1 · draft</span>
        </div>
      </div>
      <style>{`
        .footer-grid {
          display: grid;
          grid-template-columns: 1.4fr repeat(3, 1fr);
          gap: 40px;
        }
        @media (max-width: 800px) {
          .footer-grid { grid-template-columns: 1fr 1fr; }
        }
        .footer-bottom {
          margin-top: 72px;
          padding-top: 20px;
          border-top: 1px solid var(--hairline);
          display: flex; justify-content: space-between;
          font-size: 12px;
          color: var(--text-dim);
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { AwardSection, Certificate, DownloadSection, Footer });