/* About.jsx */

function About() {
  const { lang } = useLang();
  const ar = lang === 'ar';

  const team = ar ? [
    { name:'د. ريم الفهد', role:'مديرة العيادة · علاج الجذور', id:'team-1' },
    { name:'د. عمر العوضي', role:'طب الأسنان التجميلي', id:'team-2' },
    { name:'د. منى الزهراني', role:'تقويم الأسنان', id:'team-3' },
    { name:'د. خالد السبيعي', role:'زراعة الأسنان', id:'team-4' },
  ] : [
    { name:'Dr. Reem Al-Fahad', role:'Clinic Lead · Endodontics', id:'team-1' },
    { name:'Dr. Omar Al-Awadi', role:'Cosmetic Dentistry', id:'team-2' },
    { name:'Dr. Mona Al-Zahrani', role:'Orthodontics', id:'team-3' },
    { name:'Dr. Khalid Al-Subaie', role:'Implantology', id:'team-4' },
  ];

  const principles = ar ? [
    { n:'01', t:'الوقت أولاً', d:'موعد عادي عندنا ٤٥ دقيقة، وفحص شامل ساعة كاملة. لا استعجال.' },
    { n:'02', t:'الشرح قبل العلاج', d:'تشرحُ لك الخطة بصور واضحة قبل أن نبدأ. ولك حقّ الاعتراض.' },
    { n:'03', t:'ما تحتاجه فقط', d:'لا نوصي بإجراء لا يلزم. ميزانيتك ليست منتجاً.' },
  ] : [
    { n:'01', t:'Time first', d:'A standard visit is 45 minutes; a check-up is a full hour. No rush.' },
    { n:'02', t:'Explain, then treat', d:'You\'ll see the plan with clear visuals before we start. You can always say no.' },
    { n:'03', t:'Only what you need', d:'We don\'t recommend procedures you don\'t need. Your budget is not a product.' },
  ];

  return (
    <main className="about">
      <section className="page-hero container">
        <Reveal><Eyebrow>{ar?'العيادة':'About'}</Eyebrow></Reveal>
        <Reveal delay={120} as="h1">
          {ar ? 'عيادة بُنيت على الإصغاء.' : 'A clinic built on listening.'}
        </Reveal>
        <Reveal delay={280}>
          <p className="lede">
            {ar
              ? 'افتتحنا في ٢٠١٩ بفريقٍ من أربعة أطباء وغرفة علاج واحدة. لم نُعلن. اعتمدنا على توصية المريض لمن يحبّه. اليوم نحن اثنا عشر طبيباً وستّ غرف، وما زال أسلوبنا كما هو.'
              : 'We opened in 2019 with four dentists and one treatment room. We didn\'t advertise — we relied on patients recommending us to people they love. Today we are twelve dentists across six rooms, and our approach hasn\'t changed.'}
          </p>
        </Reveal>
      </section>

      {/* Wide image */}
      <section className="container">
        <Reveal>
          <ImgSlot id="about-interior" src="assets/photos/about-interior.jpg" label={ar?'صورة عريضة للعيادة (١٦:٧)':'Wide clinic interior (16:7)'} style={{ width:'100%', aspectRatio:'16/7' }}/>
        </Reveal>
      </section>

      {/* Principles */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <Reveal>
              <Eyebrow>{ar?'مبادئنا':'How we work'}</Eyebrow>
              <h2 style={{marginTop:14}}>{ar?'ثلاثة قواعد، نلتزم بها.':'Three rules, kept.'}</h2>
            </Reveal>
          </div>
          <div className="principles-grid">
            {principles.map((p,i)=>(
              <Reveal key={p.n} delay={i*100}>
                <div className="principle">
                  <div className="principle-num">{p.n}</div>
                  <h3>{p.t}</h3>
                  <p>{p.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <Reveal>
              <Eyebrow>{ar?'الفريق':'The team'}</Eyebrow>
              <h2 style={{marginTop:14}}>{ar?'الأطباء الذين ستلتقي بهم.':'The dentists you\'ll meet.'}</h2>
            </Reveal>
          </div>
          <div className="team-grid">
            {team.map((m,i)=>(
              <Reveal key={m.id} delay={i*80} className="team-card">
                <ImgSlot id={m.id} src={`assets/photos/${m.id}.jpg`} label={ar?'صورة الطبيب':'Portrait'} style={{ width:'100%', aspectRatio:'4/5' }}/>
                <div className="team-meta">
                  <div className="team-name">{m.name}</div>
                  <div className="team-role">{m.role}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

window.About = About;