// notary.jsx — Notary network, role, and appointment.

const NOTARIES = [
  {
    id: 'pereira-lisbon',
    name: 'A. Pereira',
    fullName: 'Ana Luísa Pereira',
    chamber: '0044',
    city: 'Lisbon',
    country: 'Portugal',
    jurisdiction: 'Portuguese Civil Law',
    languages: ['EN', 'PT'],
    archives: 31,
    bio: 'Senior notary, Ordem dos Notários de Portugal. Specialises in cross-border estates and digital wills. Nineteen years with R.I.P.',
    featured: true,
  },
  {
    id: 'kessler-berlin',
    name: 'M. Kessler',
    fullName: 'Maria Kessler',
    chamber: '0119',
    city: 'Berlin',
    country: 'Germany',
    jurisdiction: 'German Civil Law (BGB)',
    languages: ['EN', 'DE', 'FR'],
    archives: 18,
    bio: 'Berliner Notarkammer. Focus on art and cultural property. R.I.P. partner since 2023.',
  },
  {
    id: 'nakagawa-tokyo',
    name: 'R. Nakagawa',
    fullName: 'Ren Nakagawa',
    chamber: '0207',
    city: 'Tokyo',
    country: 'Japan',
    jurisdiction: 'Japanese Civil Code',
    languages: ['EN', 'JA'],
    archives: 9,
    bio: 'Japan Notaries Association. Qualified in estate law and cross-jurisdictional transfer. Bilingual archives available.',
  },
  {
    id: 'reyes-cdmx',
    name: 'C. Reyes',
    fullName: 'Carmen Reyes Vidal',
    chamber: '0312',
    city: 'Mexico City',
    country: 'Mexico',
    jurisdiction: 'Mexican Federal Civil Code',
    languages: ['EN', 'ES'],
    archives: 14,
    bio: 'Colegio de Notarios del D.F. Expert in testamentary succession under Mexican law. Partner since 2024.',
  },
  {
    id: 'dubois-paris',
    name: 'H. Dubois',
    fullName: 'Henri Dubois',
    chamber: '0088',
    city: 'Paris',
    country: 'France',
    jurisdiction: 'French Civil Law',
    languages: ['EN', 'FR'],
    archives: 22,
    bio: 'Chambre des notaires de Paris. Specialises in personal property succession and international delivery.',
  },
  {
    id: 'obi-lagos',
    name: 'E. Obi',
    fullName: 'Emeka Obi',
    chamber: '0401',
    city: 'Lagos',
    country: 'Nigeria',
    jurisdiction: 'Nigerian Common Law',
    languages: ['EN', 'YO'],
    archives: 6,
    bio: "Nigerian Bar Association (Notarial Practice). West Africa's first R.I.P.-chartered notary. Added 2025.",
  },
];

function NotaryPage({ go, lang = 'en' }) {
  const tn = window.T[lang].notary;
  const [appointed, setAppointed] = React.useState({});

  const roles = [
    { title: tn.role1Title, desc: tn.role1Desc },
    { title: tn.role2Title, desc: tn.role2Desc },
    { title: tn.role3Title, desc: tn.role3Desc },
    { title: tn.role4Title, desc: tn.role4Desc },
  ];

  const steps = [
    { title: tn.proc1Title, desc: tn.proc1Desc },
    { title: tn.proc2Title, desc: tn.proc2Desc },
    { title: tn.proc3Title, desc: tn.proc3Desc },
    { title: tn.proc4Title, desc: tn.proc4Desc },
  ];

  return (
    <>
      {/* Page header */}
      <header style={{ borderBottom: '1px solid var(--ink)', padding: '72px 0 64px' }}>
        <div className="page">
          <div style={{ display: 'grid', gridTemplateColumns: '140px 1fr 1fr', gap: 48, alignItems: 'flex-end' }}>
            <div>
              <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em' }}>{tn.sectionTag}</div>
              <div className="mono tiny upper" style={{ color: 'var(--muted)', marginTop: 8, letterSpacing: '0.22em' }}>{tn.sectionSub}</div>
            </div>
            <h1 className="display" style={{ fontSize: 'clamp(36px,5vw,72px)', margin: 0, lineHeight: 0.95 }}>
              {tn.title.split('\n').map((line, i) => <span key={i}>{line}{i === 0 && <br />}</span>)}
            </h1>
            <p className="serif" style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.6, fontWeight: 300, margin: 0 }}>
              {tn.subtitle}{' '}
              <em style={{ color: 'var(--ice)' }}>{tn.subtitleEm}</em>
            </p>
          </div>
        </div>
      </header>

      {/* Role section — dark */}
      <section style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '96px 0' }}>
        <div className="page">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 96, alignItems: 'flex-start', marginBottom: 64 }}>
            <div>
              <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.32em', marginBottom: 16 }}>{tn.roleTag}</div>
              <h2 className="display" style={{ fontSize: 48, margin: 0, lineHeight: 1, color: 'var(--paper)' }}>{tn.roleTitle}</h2>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderTop: '1px solid rgba(239,239,237,0.15)', borderBottom: '1px solid rgba(239,239,237,0.15)' }}>
              {roles.map((r, i) => (
                <div key={i} style={{
                  padding: '32px 28px',
                  borderLeft: i % 2 === 0 ? 'none' : '1px solid rgba(239,239,237,0.15)',
                  borderTop: i >= 2 ? '1px solid rgba(239,239,237,0.15)' : 'none',
                }}>
                  <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.22em', marginBottom: 16, fontSize: 9 }}>
                    {String(i + 1).padStart(2, '0')}
                  </div>
                  <div className="display" style={{ fontSize: 18, marginBottom: 12, lineHeight: 1.2, color: 'var(--paper)' }}>{r.title}.</div>
                  <p className="serif" style={{ fontSize: 14, lineHeight: 1.65, color: 'rgba(239,239,237,0.65)', fontWeight: 300, margin: 0 }}>{r.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Notary network */}
      <section style={{ padding: '96px 0 0' }}>
        <div className="page">
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 48 }}>
            <div>
              <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.32em', marginBottom: 16 }}>{tn.networkTag}</div>
              <h2 className="display" style={{ fontSize: 56, margin: 0, lineHeight: 1 }}>{tn.networkTitle}</h2>
            </div>
            <p className="serif" style={{ maxWidth: 360, fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.6, fontWeight: 300 }}>
              {tn.networkDesc}
            </p>
          </div>

          {/* Featured notary */}
          {NOTARIES.filter(n => n.featured).map(n => (
            <div key={n.id} style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
              borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)',
              marginBottom: 0,
            }}>
              <div style={{ padding: '48px 40px 48px 0', borderRight: '1px solid var(--hairline)' }}>
                <div className="mono tiny upper" style={{ color: 'var(--frost)', letterSpacing: '0.28em', marginBottom: 20, fontSize: 9 }}>
                  <span style={{ display: 'inline-block', width: 6, height: 6, background: 'var(--frost)', marginRight: 8, transform: 'translateY(-1px)' }} />
                  {tn.statusActive}
                </div>
                <h3 className="display" style={{ fontSize: 40, margin: '0 0 6px', lineHeight: 1 }}>{n.fullName}</h3>
                <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.22em', marginBottom: 28 }}>
                  {n.city} · {tn.chamberLabel} {n.chamber}
                </div>
                <p className="serif" style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink-2)', fontWeight: 300, marginBottom: 36 }}>
                  {n.bio}
                </p>
                <BarSubmit
                  label={tn.appointBtn}
                  done={tn.appointBusy}
                  onClick={() => setTimeout(() => setAppointed(a => ({ ...a, [n.id]: true })), 1200)}
                />
              </div>
              <div style={{ padding: '48px 0 48px 40px' }}>
                {[
                  [tn.jurisdictionLabel, n.jurisdiction],
                  [tn.languagesLabel,    n.languages.join(' · ')],
                  [tn.archivesLabel,     String(n.archives)],
                  [tn.chamberLabel,      n.chamber],
                ].map(([label, val]) => (
                  <div key={label} style={{ display: 'grid', gridTemplateColumns: '160px 1fr', padding: '16px 0', borderBottom: '1px dotted var(--hairline)' }}>
                    <span className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.22em' }}>{label}</span>
                    <span className="mono tiny upper" style={{ color: 'var(--ink)', letterSpacing: '0.18em' }}>{val}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}

          {/* Other notaries — compact list */}
          <div style={{ borderBottom: '1px solid var(--ink)' }}>
            {NOTARIES.filter(n => !n.featured).map((n, i) => (
              <div key={n.id} style={{
                display: 'grid', gridTemplateColumns: '1fr 1fr 1fr auto',
                gap: 32, padding: '28px 0', alignItems: 'center',
                borderTop: '1px solid var(--hairline)',
              }}>
                <div>
                  <div className="display" style={{ fontSize: 20, marginBottom: 4 }}>{n.fullName}</div>
                  <div className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.22em', fontSize: 9 }}>
                    {n.city} · {n.country}
                  </div>
                </div>
                <div className="mono tiny upper" style={{ color: 'var(--ink-2)', letterSpacing: '0.18em', fontSize: 9, lineHeight: 1.6 }}>
                  {n.jurisdiction}<br />
                  <span style={{ color: 'var(--muted)' }}>{n.languages.join(' · ')}</span>
                </div>
                <div className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.18em', fontSize: 9 }}>
                  {tn.chamberLabel} {n.chamber} · {n.archives} {tn.archivesLabel.toLowerCase()}
                </div>
                <BarSubmit
                  label={tn.appointBtn}
                  done={tn.appointBusy}
                  onClick={() => setTimeout(() => setAppointed(a => ({ ...a, [n.id]: true })), 1200)}
                />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Process */}
      <section style={{ padding: '96px 0 0' }}>
        <div className="page">
          <div style={{ marginBottom: 56 }}>
            <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.32em', marginBottom: 16 }}>{tn.processTag}</div>
            <h2 className="display" style={{ fontSize: 56, margin: 0, lineHeight: 1 }}>{tn.processTitle}</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)' }}>
            {steps.map((s, i) => (
              <div key={i} style={{ padding: '40px 28px 56px', borderLeft: i === 0 ? 'none' : '1px solid var(--hairline)' }}>
                <div className="mono tiny upper" style={{ color: 'var(--ice)', marginBottom: 80, letterSpacing: '0.28em' }}>
                  {String(i + 1).padStart(2, '0')}
                </div>
                <div className="display" style={{ fontSize: 22, marginBottom: 16, lineHeight: 1.1 }}>{s.title}.</div>
                <p className="serif" style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--ink-2)', margin: 0, fontWeight: 300 }}>{s.desc}</p>
              </div>
            ))}
          </div>
          <div style={{ padding: '20px 0 0', display: 'flex', gap: 12, alignItems: 'flex-start' }}>
            <span style={{ display: 'inline-block', width: 8, height: 8, background: 'var(--frost)', marginTop: 3, flexShrink: 0 }} />
            <div className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.22em', lineHeight: 1.8 }}>
              {tn.feeNote}
            </div>
          </div>
        </div>
      </section>

      {/* Bring your own notary — dark CTA */}
      <section style={{ padding: '96px 0 0' }}>
        <div className="page">
          <div style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '64px' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
              <div>
                <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 20 }}>
                  {tn.ownNotaryTag}
                </div>
                <p className="serif" style={{ fontSize: 18, lineHeight: 1.65, color: 'rgba(239,239,237,0.72)', fontWeight: 300, margin: 0 }}>
                  {tn.ownNotaryDesc}
                </p>
              </div>
              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <BarSubmit
                  label={tn.ownNotaryBtn}
                  done="Submitted"
                  onClick={() => {}}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Bottom spacing */}
      <div style={{ height: 120 }} />
      <Footer lang={lang} />
    </>
  );
}

Object.assign(window, { NotaryPage });