// =====================================================
// Inner pages — About, Services, Experience, Insights, Contact
// =====================================================

function PageHeader({ eyebrow, title, lede, lang }) {
  return (
    <section style={{ padding: 'calc(var(--vh-section-y) * 0.9) 0 calc(var(--vh-section-y) * 0.6)' }}>
      <div className="vh-container">
        <div className="vh-eyebrow" style={{ marginBottom: 32 }}>{eyebrow}</div>
        <Reveal>
          <h1 className="vh-display vh-display-lg" style={{ whiteSpace: 'pre-line', marginBottom: 40, maxWidth: '18ch' }}>{title}</h1>
        </Reveal>
        {lede && <Reveal delay={120}><p className="vh-lede" style={{ maxWidth: '64ch' }}>{lede}</p></Reveal>}
      </div>
    </section>
  );
}

// ---------- ABOUT ----------
function AboutPage({ t, lang }) {
  return (
    <div className="vh-page">
      <PageHeader eyebrow={t.about.eyebrow} title={t.about.title} lede={t.about.lede} lang={lang}/>
      <hr className="vh-rule"/>

      <section className="vh-section">
        <div className="vh-container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80 }}>
            <div>
              <div className="vh-eyebrow" style={{ marginBottom: 24 }}>{lang === 'ar' ? '٠١' : '01'}</div>
              <h2 className="vh-h-section">{t.about.historyTitle}</h2>
            </div>
            <div>
              <p className="vh-body" style={{ fontSize: 18 }}>{t.about.historyBody}</p>
              <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, paddingTop: 48, borderTop: '1px solid var(--vh-line)' }}>
                <div>
                  <div className="vh-eyebrow" style={{ marginBottom: 12 }}>{lang === 'ar' ? 'تدقيق' : 'Audit'}</div>
                  <div style={{ fontFamily: 'var(--vh-serif)', fontSize: 32, color: 'var(--vh-accent)' }}>I</div>
                </div>
                <div>
                  <div className="vh-eyebrow" style={{ marginBottom: 12 }}>{lang === 'ar' ? 'قانون' : 'Law'}</div>
                  <div style={{ fontFamily: 'var(--vh-serif)', fontSize: 32, color: 'var(--vh-accent)' }}>II</div>
                </div>
                <div>
                  <div className="vh-eyebrow" style={{ marginBottom: 12 }}>{lang === 'ar' ? 'استشارة' : 'Strategy'}</div>
                  <div style={{ fontFamily: 'var(--vh-serif)', fontSize: 32, color: 'var(--vh-accent)' }}>III</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <hr className="vh-rule"/>

      <section className="vh-section" style={{ background: 'var(--vh-bg-alt)' }}>
        <div className="vh-container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80 }}>
            <div>
              <div className="vh-eyebrow" style={{ marginBottom: 24 }}>{lang === 'ar' ? '٠٢' : '02'}</div>
              <h2 className="vh-h-section">{t.about.principlesTitle}</h2>
            </div>
            <div>
              {t.about.principles.map((p, i) => (
                <Reveal key={i} delay={i * 80}>
                  <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: 24, padding: '28px 0', borderBottom: '1px solid var(--vh-line)' }}>
                    <span style={{ fontFamily: 'var(--vh-mono)', fontSize: 12, color: 'var(--vh-accent)', letterSpacing: '0.18em' }}>{String(i + 1).padStart(2, '0')}</span>
                    <p style={{ fontFamily: 'var(--vh-serif)', fontSize: 22, lineHeight: 1.4, color: 'var(--vh-ink)' }}>{p}</p>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ---------- SERVICES ----------
function ServicesPage({ t, lang }) {
  return (
    <div className="vh-page">
      <PageHeader eyebrow={t.services.eyebrow} title={t.services.title} lede={t.services.lede} lang={lang}/>
      <hr className="vh-rule"/>
      <section className="vh-section">
        <div className="vh-container">
          {t.home.practices.map((p, i) => (
            <Reveal key={i} delay={i * 80}>
              <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr 1fr', gap: 48, padding: '56px 0', borderBottom: '1px solid var(--vh-line)', borderTop: i === 0 ? '1px solid var(--vh-line)' : 'none' }}>
                <div style={{ fontFamily: 'var(--vh-serif)', fontStyle: 'italic', fontSize: 54, color: 'var(--vh-accent)', lineHeight: 1 }}>{p.code}</div>
                <div>
                  <h3 style={{ fontFamily: 'var(--vh-serif)', fontSize: 36, fontWeight: 500, marginBottom: 16, lineHeight: 1.1 }}>{p.title}</h3>
                  <p className="vh-body" style={{ fontSize: 17 }}>{p.body}</p>
                </div>
                <div style={{ fontFamily: 'var(--vh-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--vh-ink-muted)' }}>
                  <div style={{ marginBottom: 16, color: 'var(--vh-ink)' }}>{lang === 'ar' ? 'مخرجات نموذجية' : 'Typical deliverables'}</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13, fontFamily: 'var(--vh-serif-body)', textTransform: 'none', letterSpacing: 0, color: 'var(--vh-ink-2)' }}>
                    <span>— {lang === 'ar' ? 'مذكرة تحليلية' : 'Analytical memorandum'}</span>
                    <span>— {lang === 'ar' ? 'مراجعة موثّقة' : 'Documented review'}</span>
                    <span>— {lang === 'ar' ? 'توصيات قابلة للتنفيذ' : 'Actionable recommendations'}</span>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>
    </div>
  );
}

// ---------- EXPERIENCE ----------
function ExperiencePage({ t, lang }) {
  return (
    <div className="vh-page">
      <PageHeader eyebrow={t.experience.eyebrow} title={t.experience.title} lede={t.experience.lede} lang={lang}/>
      <hr className="vh-rule"/>
      <section className="vh-section">
        <div className="vh-container">
          <div style={{ borderTop: '1px solid var(--vh-line)' }}>
            {t.experience.items.map((c, i) => (
              <Reveal key={i} delay={i * 60}>
                <div style={{ display: 'grid', gridTemplateColumns: '120px 160px 1fr', gap: 32, padding: '40px 0', borderBottom: '1px solid var(--vh-line)', alignItems: 'baseline' }}>
                  <span className="vh-eyebrow vh-num">{c.year}</span>
                  <span style={{ fontFamily: 'var(--vh-mono)', fontSize: 12, color: 'var(--vh-ink-muted)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{c.sector}</span>
                  <div>
                    <h3 style={{ fontFamily: 'var(--vh-serif)', fontSize: 26, fontWeight: 500, marginBottom: 6, lineHeight: 1.2 }}>{c.title}</h3>
                    <p className="vh-small" style={{ maxWidth: '64ch' }}>{c.body}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ---------- INSIGHTS ----------
function InsightsPage({ t, lang }) {
  return (
    <div className="vh-page">
      <PageHeader eyebrow={t.insights.eyebrow} title={t.insights.title} lede={t.insights.lede} lang={lang}/>
      <hr className="vh-rule"/>
      <section className="vh-section">
        <div className="vh-container">
          <div style={{ borderTop: '1px solid var(--vh-line)' }}>
            {t.insights.items.map((a, i) => (
              <Reveal key={i} delay={i * 60}>
                <div style={{ display: 'grid', gridTemplateColumns: '160px 160px 1fr 80px', gap: 32, padding: '36px 0', borderBottom: '1px solid var(--vh-line)', alignItems: 'baseline' }}>
                  <span className="vh-eyebrow vh-num" style={{ color: 'var(--vh-ink-muted)' }}>{a.date}</span>
                  <span style={{ fontFamily: 'var(--vh-mono)', fontSize: 11, color: 'var(--vh-accent)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{a.cat}</span>
                  <h3 style={{ fontFamily: 'var(--vh-serif)', fontSize: 26, fontWeight: 500, lineHeight: 1.25 }}>{a.title}</h3>
                  <span style={{ fontFamily: 'var(--vh-mono)', fontSize: 11, color: 'var(--vh-ink-muted)', letterSpacing: '0.1em', textAlign: lang === 'ar' ? 'left' : 'right' }} className="vh-num">{a.mins} {lang === 'ar' ? 'د' : 'min'}</span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ---------- CONTACT ----------
function ContactPage({ t, lang }) {
  const [sent, setSent] = useState(false);
  return (
    <div className="vh-page">
      <PageHeader eyebrow={t.contact.eyebrow} title={t.contact.title} lede={t.contact.lede} lang={lang}/>
      <hr className="vh-rule"/>
      <section className="vh-section">
        <div className="vh-container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
            <div>
              <div className="vh-eyebrow" style={{ marginBottom: 16 }}>{t.contact.direct}</div>
              <a href="mailto:Deifallah.ayyad@gmail.com" style={{ fontFamily: 'var(--vh-serif)', fontSize: 22, color: 'var(--vh-accent)', borderBottom: '1px solid var(--vh-accent)', wordBreak: 'break-all' }}>Deifallah.ayyad@gmail.com</a>

              <div style={{ marginTop: 56 }}>
                <div className="vh-eyebrow" style={{ marginBottom: 16 }}>{t.contact.based}</div>
                <p className="vh-body">{t.contact.basedValue}</p>
              </div>

              <div style={{ marginTop: 56 }}>
                <div className="vh-eyebrow" style={{ marginBottom: 16 }}>{lang === 'ar' ? 'وقت الردّ' : 'Response time'}</div>
                <p className="vh-body">{lang === 'ar' ? 'يومان عمل، عادةً.' : 'Two business days, typically.'}</p>
              </div>
            </div>

            <div>
              {sent ? (
                <div style={{ padding: '80px 40px', border: '1px solid var(--vh-line)', textAlign: 'center' }}>
                  <div className="vh-eyebrow" style={{ marginBottom: 16 }}>{lang === 'ar' ? 'تم الإرسال' : 'Received'}</div>
                  <h3 style={{ fontFamily: 'var(--vh-serif)', fontSize: 32, marginBottom: 12 }}>{lang === 'ar' ? 'سأردّ خلال يومَي عمل.' : 'I will respond within two business days.'}</h3>
                  <p className="vh-body">{lang === 'ar' ? 'بحوزتي رسالتك. شكراً.' : 'Your message is with me. Thank you.'}</p>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
                  {[
                    ['name', t.contact.formName, 'text', true],
                    ['org', t.contact.formOrg, 'text', false],
                    ['email', t.contact.formEmail, 'email', true],
                    ['phone', t.contact.formPhone, 'tel', false],
                  ].map(([id, label, type, req]) => (
                    <label key={id} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                      <span style={{ fontFamily: 'var(--vh-mono)', fontSize: 11, color: 'var(--vh-ink-muted)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{label}{req && ' *'}</span>
                      <input type={type} required={req} style={{ background: 'transparent', border: 'none', borderBottom: '1px solid var(--vh-line)', padding: '12px 0', fontFamily: 'var(--vh-serif-body)', fontSize: 17, color: 'var(--vh-ink)', outline: 'none' }} onFocus={(e) => e.currentTarget.style.borderBottomColor = 'var(--vh-accent)'} onBlur={(e) => e.currentTarget.style.borderBottomColor = 'var(--vh-line)'}/>
                    </label>
                  ))}
                  <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                    <span style={{ fontFamily: 'var(--vh-mono)', fontSize: 11, color: 'var(--vh-ink-muted)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{t.contact.formMessage} *</span>
                    <textarea required rows={5} style={{ background: 'transparent', border: '1px solid var(--vh-line)', padding: 16, fontFamily: 'var(--vh-serif-body)', fontSize: 17, color: 'var(--vh-ink)', outline: 'none', resize: 'vertical' }} onFocus={(e) => e.currentTarget.style.borderColor = 'var(--vh-accent)'} onBlur={(e) => e.currentTarget.style.borderColor = 'var(--vh-line)'}/>
                  </label>
                  <button type="submit" className="vh-btn" style={{ alignSelf: lang === 'ar' ? 'flex-end' : 'flex-start', marginTop: 16 }}>
                    <span>{t.contact.formSubmit}</span><span style={{ display: 'inline-block', transform: lang === 'ar' ? 'scaleX(-1)' : 'none' }}>→</span>
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutPage, ServicesPage, ExperiencePage, InsightsPage, ContactPage });