// Noura Almaazmi Brand Kit — Eclipse direction
// Long-scroll brand book

const { useState, useEffect, useRef } = React;

const NAVY = '#0F1B2D';
const NAVY_DEEP = '#0A1220';
const NAVY_MID = '#1A2942';
const GOLD = '#C9A961';
const GOLD_BRIGHT = '#E0BD6E';
const GOLD_SOFT = '#8E7340';
const GOLD_PALE = '#E8DCC4';
const CREAM = '#F5F1EA';
const CREAM_WARM = '#EDE6D6';
const INK = '#1A1410';
const PAPER = '#FAF7F1';

const FIRM = {
  brand:   'NOURA',                                       // logo wordmark
  brandTag:'LAWYERS',                                     // logo subtitle
  arabic:  'نورة',                                          // نورة
  // Full registered entity — used ONLY in letterhead, envelope, email
  // signature, and contact page. Never in the logo lockup.
  legal:   'NOURA ALMAAZMI ADVOCATES & LEGAL CONSULTANCY',
  legalArabic: 'نورة المعزمي للمحاماة والاستشارات القانونية',
  address: "1702, Anantara Downtown Dubai, Al A'Amal St,\nBusiness Bay, P.O. Box 414224, Dubai, UAE",
  addressLine: "1702, Anantara Downtown Dubai, Al A'Amal St, Business Bay, P.O. Box 414224, Dubai, UAE",
  tel:     '+971 4 241 3555',
  email:   'info@almaazmilawyers.com',
  web:     'www.almaazmilawyers.com',
};

// ============================================
// Reusable mark
// ============================================
function EclipseMark({ size = 100, fg = GOLD, shadow = 'transparent' }) {
  const id = React.useId();
  return (
    <svg width={size} height={size} viewBox="0 0 170 170" style={{ overflow: 'visible', flexShrink: 0 }}>
      <defs>
        <mask id={`ecl-${id}`}>
          <rect width="170" height="170" fill="white"/>
          <circle cx="115" cy="62" r="62" fill="black"/>
        </mask>
      </defs>
      {shadow !== 'transparent' && (
        <circle cx="115" cy="62" r="62" fill={shadow}/>
      )}
      <circle cx="85" cy="85" r="74" fill={fg} mask={`url(#ecl-${id})`}/>
    </svg>
  );
}

// ============================================
// Reusable Lockup
// ============================================
function Lockup({
  orientation = 'horizontal',
  scale = 1,
  color = GOLD,
  divColor,
  arabic = false,
}) {
  const dc = divColor || color;
  if (orientation === 'horizontal') {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 30 * scale }}>
        <EclipseMark size={130 * scale} fg={color}/>
        <div style={{ width: 1.5, height: 120 * scale, background: dc, opacity: 0.85 }}/>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 * scale, alignItems: 'flex-start' }}>
          <div style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontWeight: 500,
            fontSize: 84 * scale,
            color,
            letterSpacing: '0.06em',
            lineHeight: 0.9,
            whiteSpace: 'nowrap',
          }}>NOURA</div>
          <div style={{
            fontFamily: "'Cinzel', serif",
            fontWeight: 500,
            fontSize: 14 * scale,
            color,
            letterSpacing: '0.55em',
            whiteSpace: 'nowrap',
            paddingLeft: '0.55em',
          }}>LAWYERS</div>
        </div>
      </div>
    );
  }
  // stacked
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 * scale }}>
      <EclipseMark size={130 * scale} fg={color}/>
      <div style={{ width: 90 * scale, height: 1, background: dc, opacity: 0.6 }}/>
      <div style={{
        fontFamily: "'Cormorant Garamond', serif",
        fontWeight: 500,
        fontSize: 64 * scale,
        color,
        letterSpacing: '0.06em',
        lineHeight: 0.95,
        textAlign: 'center',
      }}>NOURA</div>
      <div style={{
        fontFamily: "'Cinzel', serif",
        fontWeight: 500,
        fontSize: 12 * scale,
        color,
        letterSpacing: '0.55em',
        textAlign: 'center',
        paddingLeft: '0.55em',
      }}>LAWYERS</div>
      {arabic && (
        <div style={{
          fontFamily: "'Amiri', serif",
          fontWeight: 700,
          fontSize: 28 * scale,
          color,
          direction: 'rtl',
          marginTop: 6 * scale,
        }}>{FIRM.arabic}</div>
      )}
    </div>
  );
}

// ============================================
// Page wrapper
// ============================================
function Page({ id, theme = 'navy', section, idx, total, children }) {
  const bgClass = theme === 'navy' ? 'bg-navy' : theme === 'deep' ? 'bg-deep' : theme === 'cream' ? 'bg-cream' : 'bg-paper';
  return (
    <section id={id} className={`page ${bgClass}`}>
      <div className="page-frame">
        <div className="page-corner">
          <span>{section}</span>
          <span>{String(idx).padStart(2,'0')} / {String(total).padStart(2,'0')}</span>
        </div>
        <div className="page-bottom">
          <span>NOURA LAWYERS · BRAND GUIDELINES</span>
          <span>ECLIPSE · v1.0</span>
        </div>
        {children}
      </div>
    </section>
  );
}

// ============================================
// 01 — COVER
// ============================================
function Cover({ idx, total }) {
  return (
    <Page id="cover" theme="deep" section="Cover" idx={idx} total={total}>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 36 }}>
          <EclipseMark size={210} fg={GOLD}/>
          <div style={{ width: 1, height: 60, background: GOLD, opacity: 0.5 }}/>
          <div style={{ textAlign: 'center' }}>
            <div style={{
              fontFamily: "'Cinzel', serif",
              fontSize: 12, letterSpacing: '0.6em', color: GOLD, opacity: 0.75,
              marginBottom: 22, textTransform: 'uppercase',
            }}>Brand Guidelines</div>
            <div style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 400,
              fontSize: 'clamp(96px, 11vw, 160px)',
              color: CREAM,
              letterSpacing: '0.04em',
              lineHeight: 0.95,
            }}>Noura</div>
            <div style={{
              fontFamily: "'Cinzel', serif",
              fontSize: 16, letterSpacing: '0.55em', color: GOLD,
              marginTop: 14, paddingLeft: '0.55em',
            }}>LAWYERS</div>
          </div>
          <p style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontStyle: 'italic',
            fontSize: 22,
            color: GOLD_PALE,
            opacity: 0.85,
            maxWidth: '32ch',
            textAlign: 'center',
            margin: '36px 0 0',
            lineHeight: 1.4,
          }}>“What stands in shadow, brought into light.”</p>
        </div>
      </div>
    </Page>
  );
}

// ============================================
// 02 — THE MARK (meaning + construction)
// ============================================
function MarkPage({ idx, total }) {
  return (
    <Page id="mark" theme="navy" section="01 · The Mark" idx={idx} total={total}>
      <div style={{ padding: '120px 64px 80px', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center', flex: 1 }}>
        <div>
          <h2 className="eyebrow">01 · The Mark</h2>
          <h1 className="title">The Eclipse.</h1>
          <p className="lede">
            Noura means “light.” In litigation, our work is to bring what stands in shadow into open court. The mark is a disc of light with a crescent of shadow withdrawing — the moment of revelation.
          </p>
          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '14px 22px', maxWidth: 460 }}>
            <Spec k="Form" v="Disc · diameter 1.00 r"/>
            <Spec k="Shadow" v="Crescent · offset 0.35 r"/>
            <Spec k="Reserved space" v="½ r on all sides"/>
            <Spec k="Minimum print" v="14 mm wide"/>
            <Spec k="Minimum screen" v="28 px wide"/>
          </div>
        </div>

        {/* Construction grid */}
        <div style={{ position: 'relative', aspectRatio: 1, alignSelf: 'center', maxWidth: 480, margin: '0 auto', width: '100%' }}>
          <svg width="100%" height="100%" viewBox="0 0 400 400">
            {/* outer frame */}
            <rect x="20" y="20" width="360" height="360" fill="none" stroke={GOLD} strokeWidth="0.5" opacity="0.4"/>
            {/* clear-space markers */}
            <g stroke={GOLD} strokeWidth="0.5" opacity="0.3" strokeDasharray="3 4">
              <line x1="20" y1="100" x2="380" y2="100"/>
              <line x1="20" y1="300" x2="380" y2="300"/>
              <line x1="100" y1="20" x2="100" y2="380"/>
              <line x1="300" y1="20" x2="300" y2="380"/>
            </g>
            {/* center crosshair */}
            <g stroke={GOLD} strokeWidth="0.6" opacity="0.45">
              <line x1="200" y1="60" x2="200" y2="340"/>
              <line x1="60" y1="200" x2="340" y2="200"/>
            </g>
            {/* primary disc construction circle */}
            <circle cx="200" cy="200" r="100" fill="none" stroke={GOLD} strokeWidth="0.6" opacity="0.45"/>
            {/* shadow construction circle */}
            <circle cx="240" cy="160" r="84" fill="none" stroke={GOLD} strokeWidth="0.6" opacity="0.35"/>

            {/* the mark */}
            <defs>
              <mask id="ecl-construct">
                <rect width="400" height="400" fill="white"/>
                <circle cx="240" cy="160" r="84" fill="black"/>
              </mask>
            </defs>
            <circle cx="200" cy="200" r="100" fill={GOLD} mask="url(#ecl-construct)"/>

            {/* dimension labels */}
            <text x="200" y="155" textAnchor="middle" fill={GOLD} fontSize="9" fontFamily="Inter" opacity="0.7" letterSpacing="2">r</text>
            <text x="280" y="195" textAnchor="middle" fill={GOLD} fontSize="9" fontFamily="Inter" opacity="0.7" letterSpacing="2">0.84 r</text>
          </svg>
        </div>
      </div>
    </Page>
  );
}

function Spec({ k, v }) {
  return (
    <>
      <div style={{ fontFamily: "'Cinzel', serif", fontSize: 9, letterSpacing: '0.3em', color: GOLD_SOFT, textTransform: 'uppercase', paddingTop: 3 }}>{k}</div>
      <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 17, color: CREAM }}>{v}</div>
    </>
  );
}

// ============================================
// 03 — LOCKUPS
// ============================================
function LockupsPage({ idx, total }) {
  return (
    <Page id="lockups" theme="deep" section="02 · Lockups" idx={idx} total={total}>
      <div style={{ padding: '120px 64px 100px', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h2 className="eyebrow">02 · Lockups</h2>
        <h1 className="title">Four arrangements.</h1>
        <p className="lede">Primary horizontal for letterheads and signage. Stacked for square placements. Bilingual for UAE-facing materials. Monogram for the smallest moments.</p>

        <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, flex: 1 }}>
          {/* primary */}
          <LockupTile label="Primary · Horizontal" caption="Letterhead, signage, web header.">
            <Lockup orientation="horizontal" scale={0.85} color={GOLD}/>
          </LockupTile>

          {/* stacked */}
          <LockupTile label="Stacked" caption="Square placements, social avatars.">
            <Lockup orientation="stacked" scale={0.7} color={GOLD}/>
          </LockupTile>

          {/* bilingual */}
          <LockupTile label="Bilingual" caption="UAE-facing collateral.">
            <BilingualLockup scale={0.85}/>
          </LockupTile>

          {/* monogram */}
          <LockupTile label="Monogram · Mark only" caption="Stamps, favicons, watermarks.">
            <EclipseMark size={130} fg={GOLD}/>
          </LockupTile>
        </div>
      </div>
    </Page>
  );
}

function LockupTile({ label, caption, children }) {
  return (
    <div style={{
      border: `1px solid ${GOLD}33`,
      padding: '40px 32px',
      display: 'flex', flexDirection: 'column',
      background: 'rgba(255,255,255,0.015)',
    }}>
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 200, padding: '20px 0' }}>
        {children}
      </div>
      <div style={{ borderTop: `1px solid ${GOLD}22`, paddingTop: 18, marginTop: 'auto' }}>
        <div style={{ fontFamily: "'Cinzel', serif", fontSize: 10, letterSpacing: '0.35em', color: GOLD, textTransform: 'uppercase' }}>{label}</div>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: 14, color: GOLD_PALE, opacity: 0.7, marginTop: 6 }}>{caption}</div>
      </div>
    </div>
  );
}

function BilingualLockup({ scale = 1 }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22 * scale }}>
      <EclipseMark size={110 * scale} fg={GOLD}/>
      <div style={{ width: 100 * scale, height: 1, background: GOLD, opacity: 0.55 }}/>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 28 * scale }}>
        <div style={{
          fontFamily: "'Cormorant Garamond', serif", fontWeight: 500,
          fontSize: 54 * scale, color: GOLD, letterSpacing: '0.06em', lineHeight: 1,
        }}>NOURA</div>
        <div style={{
          fontFamily: "'Amiri', serif", fontWeight: 700,
          fontSize: 46 * scale, color: GOLD, direction: 'rtl',
        }}>{FIRM.arabic}</div>
      </div>
      <div style={{
        fontFamily: "'Cinzel', serif", fontWeight: 500,
        fontSize: 10 * scale, color: GOLD, letterSpacing: '0.42em', textAlign: 'center',
      }}>LAWYERS &nbsp;·&nbsp; المحاماة</div>
    </div>
  );
}

// ============================================
// 04 — COLOR PALETTE
// ============================================
function ColorsPage({ idx, total }) {
  const swatches = [
    { name: 'Court Navy',  role: 'Primary',   hex: '#0F1B2D', rgb: '15 · 27 · 45',   cmyk: '85 · 70 · 45 · 55', tone: 'dark' },
    { name: 'Lawyer Gold', role: 'Accent',    hex: '#C9A961', rgb: '201 · 169 · 97', cmyk: '20 · 32 · 75 · 5',  tone: 'dark' },
    { name: 'Paper',       role: 'Ground',    hex: '#FAF7F1', rgb: '250 · 247 · 241', cmyk: '2 · 3 · 6 · 0',     tone: 'light' },
    { name: 'Ink',         role: 'Text',      hex: '#1A1410', rgb: '26 · 20 · 16',   cmyk: '70 · 75 · 80 · 90', tone: 'dark' },
    { name: 'Gold · Pale', role: 'Support',   hex: '#E8DCC4', rgb: '232 · 220 · 196', cmyk: '8 · 12 · 25 · 0',  tone: 'light' },
    { name: 'Navy · Mid',  role: 'Support',   hex: '#1A2942', rgb: '26 · 41 · 66',   cmyk: '78 · 65 · 40 · 30', tone: 'dark' },
  ];
  return (
    <Page id="colors" theme="cream" section="03 · Palette" idx={idx} total={total}>
      <div style={{ padding: '120px 64px 100px', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h2 className="eyebrow" style={{ color: GOLD_SOFT }}>03 · Palette</h2>
        <h1 className="title">Court & candlelight.</h1>
        <p className="lede" style={{ color: GOLD_SOFT }}>Deep navy carries authority; gold carries clarity. Paper and ink keep the documents legible. Two supports widen the system without diluting it.</p>

        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, flex: 1 }}>
          {swatches.map(s => <Swatch key={s.hex} {...s}/>)}
        </div>
      </div>
    </Page>
  );
}

function Swatch({ name, role, hex, rgb, cmyk, tone }) {
  const fg = tone === 'dark' ? CREAM : NAVY;
  const muted = tone === 'dark' ? 'rgba(245,241,234,0.55)' : 'rgba(15,27,45,0.55)';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', border: '1px solid rgba(0,0,0,0.1)' }}>
      <div style={{
        background: hex, color: fg,
        padding: '24px 22px 20px',
        aspectRatio: '4/3',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      }}>
        <div style={{ fontFamily: "'Cinzel', serif", fontSize: 9, letterSpacing: '0.35em', color: muted, textTransform: 'uppercase' }}>{role}</div>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 500, fontSize: 28, lineHeight: 1 }}>{name}</div>
      </div>
      <div style={{ background: '#fff', padding: '18px 22px', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '8px 18px', color: NAVY }}>
        <span style={{ fontFamily: "'Cinzel', serif", fontSize: 8, letterSpacing: '0.3em', color: GOLD_SOFT }}>HEX</span>
        <span style={{ fontFamily: 'Inter', fontSize: 12, color: NAVY, letterSpacing: '0.05em' }}>{hex}</span>
        <span style={{ fontFamily: "'Cinzel', serif", fontSize: 8, letterSpacing: '0.3em', color: GOLD_SOFT }}>RGB</span>
        <span style={{ fontFamily: 'Inter', fontSize: 12, color: NAVY, letterSpacing: '0.05em' }}>{rgb}</span>
        <span style={{ fontFamily: "'Cinzel', serif", fontSize: 8, letterSpacing: '0.3em', color: GOLD_SOFT }}>CMYK</span>
        <span style={{ fontFamily: 'Inter', fontSize: 12, color: NAVY, letterSpacing: '0.05em' }}>{cmyk}</span>
      </div>
    </div>
  );
}

// ============================================
// 05 — TYPOGRAPHY
// ============================================
function TypePage({ idx, total }) {
  return (
    <Page id="typography" theme="navy" section="04 · Typography" idx={idx} total={total}>
      <div style={{ padding: '120px 64px 100px', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h2 className="eyebrow">04 · Typography</h2>
        <h1 className="title">Four voices, in order.</h1>

        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, flex: 1 }}>
          <TypeCard
            family="Cormorant Garamond"
            role="Display & headlines"
            sample="Noura Lawyers"
            sampleStyle={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 500, fontSize: 64, lineHeight: 1, letterSpacing: '0.02em' }}
            meta="300 / 400 / 500 / 600 · italic"
          />
          <TypeCard
            family="Cinzel"
            role="Caps detail & subtitles"
            sample="LAWYERS · ADVOCATES"
            sampleStyle={{ fontFamily: "'Cinzel', serif", fontWeight: 500, fontSize: 28, letterSpacing: '0.3em' }}
            meta="500 / 600 · all caps only"
          />
          <TypeCard
            family="Inter"
            role="Body & UI"
            sample={<>The litigator's task is to bring what stands in shadow into open court.</>}
            sampleStyle={{ fontFamily: 'Inter', fontWeight: 400, fontSize: 18, lineHeight: 1.45, letterSpacing: '0.005em' }}
            meta="300 / 400 / 500 / 600 / 700"
          />
          <TypeCard
            family="Amiri"
            role="Arabic / bilingual"
            sample={<span style={{ direction: 'rtl' }}>نورة</span>}
            sampleStyle={{ fontFamily: "'Amiri', serif", fontWeight: 700, fontSize: 56, lineHeight: 1 }}
            meta="400 / 700 · regular & italic"
          />
        </div>
      </div>
    </Page>
  );
}

function TypeCard({ family, role, sample, sampleStyle, meta }) {
  return (
    <div style={{ border: `1px solid ${GOLD}33`, padding: 36, display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24 }}>
        <div style={{ fontFamily: "'Cinzel', serif", fontSize: 10, letterSpacing: '0.35em', color: GOLD, textTransform: 'uppercase' }}>{role}</div>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: 14, color: GOLD_PALE, opacity: 0.7 }}>{family}</div>
      </div>
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', color: CREAM, ...sampleStyle }}>{sample}</div>
      <div style={{ marginTop: 24, borderTop: `1px solid ${GOLD}22`, paddingTop: 14, fontFamily: 'Inter', fontSize: 11, color: GOLD_PALE, opacity: 0.6, letterSpacing: '0.1em' }}>{meta}</div>
    </div>
  );
}

Object.assign(window, { EclipseMark, Lockup, Page, Cover, MarkPage, LockupsPage, ColorsPage, TypePage, FIRM, NAVY, NAVY_DEEP, GOLD, GOLD_PALE, GOLD_SOFT, CREAM, CREAM_WARM, INK, PAPER });


// === stationery ===

// Stationery: Letterhead, Business Card, Envelope

// ============================================
// 06 — LETTERHEAD A4
// ============================================
function LetterheadPage({ idx, total }) {
  return (
    <Page id="letterhead" theme="cream" section="05 · Letterhead" idx={idx} total={total}>
      <div style={{ padding: '120px 64px 100px', flex: 1, display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 64, alignItems: 'center' }}>
        <div>
          <h2 className="eyebrow" style={{ color: GOLD_SOFT }}>05 · Letterhead</h2>
          <h1 className="title">A4 · for the record.</h1>
          <p className="lede" style={{ color: GOLD_SOFT }}>The mark anchors the top-left; the wordmark sits opposite. Contact information lives in a single restrained band along the footer. The body of the letter gets the whole page.</p>
          <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '12px 22px', maxWidth: 360, color: NAVY }}>
            <SpecLight k="Format" v="A4 · 210 × 297 mm"/>
            <SpecLight k="Margins" v="22 mm top / sides · 28 mm bottom"/>
            <SpecLight k="Logo size" v="42 mm wide"/>
            <SpecLight k="Body" v="Inter 10.5 / 16"/>
          </div>
        </div>

        {/* Letterhead preview */}
        <div style={{
          aspectRatio: '210 / 297',
          background: PAPER,
          boxShadow: '0 30px 60px rgba(15,27,45,0.25), 0 12px 24px rgba(15,27,45,0.15)',
          padding: '7% 7% 9%',
          display: 'flex', flexDirection: 'column',
          color: NAVY,
          fontFamily: 'Inter',
          fontSize: 9,
          lineHeight: 1.55,
          position: 'relative',
        }}>
          {/* Header */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <EclipseMark size={48} fg={NAVY}/>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 500, fontSize: 28, letterSpacing: '0.06em', color: NAVY, lineHeight: 0.95 }}>NOURA</div>
              <div style={{ fontFamily: "'Cinzel', serif", fontSize: 7, letterSpacing: '0.55em', color: NAVY, marginTop: 4 }}>LAWYERS</div>
            </div>
          </div>
          {/* hairline */}
          <div style={{ height: 1, background: GOLD, opacity: 0.5, margin: '14px 0 26px' }}/>

          {/* Body */}
          <div style={{ flex: 1 }}>
            <div style={{ marginBottom: 18, opacity: 0.65 }}>15 May 2026</div>
            <div style={{ marginBottom: 14 }}>
              Mr. Khalid Al-Suwaidi<br/>
              Suwaidi Holdings LLC<br/>
              Sheikh Zayed Road, Dubai
            </div>
            <div style={{ marginBottom: 14, fontWeight: 500 }}>Re: Commercial Arbitration — Matter No. 2026/0418</div>
            <div style={{ marginBottom: 10 }}>Dear Mr. Al-Suwaidi,</div>
            <div style={{ marginBottom: 10, opacity: 0.85 }}>Further to our meeting of the 12th instant, we write to confirm our engagement on the captioned matter and to outline the immediate procedural steps.</div>
            <div style={{ marginBottom: 10, opacity: 0.5 }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</div>
            <div style={{ marginBottom: 10, opacity: 0.3 }}>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</div>
          </div>

          {/* Footer */}
          <div style={{ borderTop: `1px solid ${GOLD}`, paddingTop: 10, fontSize: 6.5, letterSpacing: '0.04em', lineHeight: 1.6, opacity: 0.85 }}>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 600, fontSize: 8.5, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 3 }}>Noura Almaazmi Advocates &amp; Legal Consultancy</div>
            <div>1702, Anantara Downtown Dubai, Al A'Amal St, Business Bay, P.O. Box 414224, Dubai, UAE</div>
            <div style={{ display: 'flex', gap: 12, marginTop: 3 }}>
              <span>Tel · +971 4 241 3555</span>
              <span style={{ opacity: 0.5 }}>|</span>
              <span>info@almaazmilawyers.com</span>
              <span style={{ opacity: 0.5 }}>|</span>
              <span>www.almaazmilawyers.com</span>
            </div>
          </div>
        </div>
      </div>
    </Page>
  );
}

function SpecLight({ k, v }) {
  return (
    <>
      <div style={{ fontFamily: "'Cinzel', serif", fontSize: 9, letterSpacing: '0.3em', color: GOLD_SOFT, textTransform: 'uppercase', paddingTop: 3 }}>{k}</div>
      <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 17, color: NAVY }}>{v}</div>
    </>
  );
}

// ============================================
// 07 — BUSINESS CARD
// ============================================
function BusinessCardPage({ idx, total }) {
  return (
    <Page id="card" theme="deep" section="06 · Business Card" idx={idx} total={total}>
      <div style={{ padding: '120px 64px 100px', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h2 className="eyebrow">06 · Business Card</h2>
        <h1 className="title">85 × 55 mm.</h1>
        <p className="lede">A navy front shows the partner's name in serif; the reverse carries the mark in gold, full bleed. Bilingual block sits on the lower edge for UAE handovers.</p>

        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, flex: 1, alignItems: 'center' }}>
          {/* FRONT */}
          <div>
            <div style={{ fontFamily: "'Cinzel', serif", fontSize: 9, letterSpacing: '0.35em', color: GOLD_SOFT, marginBottom: 16, textTransform: 'uppercase' }}>Front</div>
            <div style={{
              aspectRatio: '85 / 55', background: NAVY,
              boxShadow: '0 30px 60px rgba(0,0,0,0.45), 0 12px 20px rgba(0,0,0,0.25)',
              padding: '7% 8%',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <EclipseMark size={36} fg={GOLD}/>
                <div style={{ width: 1, height: 32, background: GOLD, opacity: 0.7 }}/>
                <div>
                  <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 500, fontSize: 24, color: GOLD, letterSpacing: '0.06em', lineHeight: 0.9 }}>NOURA</div>
                  <div style={{ fontFamily: "'Cinzel', serif", fontSize: 6, letterSpacing: '0.55em', color: GOLD, marginTop: 4 }}>LAWYERS</div>
                </div>
              </div>

              <div>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 500, fontSize: 22, color: CREAM, letterSpacing: '0.04em', lineHeight: 1 }}>Noura Almaazmi</div>
                <div style={{ fontFamily: "'Cinzel', serif", fontSize: 7, letterSpacing: '0.35em', color: GOLD, marginTop: 6 }}>FOUNDING PARTNER · ADVOCATE</div>
              </div>

              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', fontFamily: 'Inter', fontSize: 7.5, color: CREAM, opacity: 0.85, letterSpacing: '0.04em' }}>
                <span>+971 4 241 3555</span>
                <span>noura@almaazmilawyers.com</span>
              </div>
            </div>
          </div>

          {/* BACK */}
          <div>
            <div style={{ fontFamily: "'Cinzel', serif", fontSize: 9, letterSpacing: '0.35em', color: GOLD_SOFT, marginBottom: 16, textTransform: 'uppercase' }}>Reverse</div>
            <div style={{
              aspectRatio: '85 / 55', background: GOLD,
              boxShadow: '0 30px 60px rgba(0,0,0,0.45), 0 12px 20px rgba(0,0,0,0.25)',
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
              position: 'relative', overflow: 'hidden',
            }}>
              {/* big eclipse mark in navy */}
              <EclipseMark size={120} fg={NAVY}/>
              <div style={{ position: 'absolute', bottom: '8%', left: 0, right: 0, textAlign: 'center' }}>
                <div style={{ fontFamily: "'Amiri', serif", fontWeight: 700, fontSize: 22, color: NAVY, direction: 'rtl', letterSpacing: '0.02em' }}>نورة</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Page>
  );
}

// ============================================
// 08 — ENVELOPE
// ============================================
function EnvelopePage({ idx, total }) {
  return (
    <Page id="envelope" theme="cream" section="07 · Envelope" idx={idx} total={total}>
      <div style={{ padding: '120px 64px 100px', flex: 1, display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'center' }}>
        <div>
          <h2 className="eyebrow" style={{ color: GOLD_SOFT }}>07 · Envelope</h2>
          <h1 className="title">DL · sent with care.</h1>
          <p className="lede" style={{ color: GOLD_SOFT }}>The return-address block lives in the top-left, anchored by the eclipse mark and a single hairline. White space carries the rest.</p>
          <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '12px 22px', maxWidth: 360, color: NAVY }}>
            <SpecLight k="Format" v="DL · 220 × 110 mm"/>
            <SpecLight k="Mark" v="22 mm wide · navy"/>
            <SpecLight k="Stock" v="120 gsm cream uncoated"/>
          </div>
        </div>

        <div>
          <div style={{
            aspectRatio: '220 / 110',
            background: PAPER,
            boxShadow: '0 30px 60px rgba(15,27,45,0.18), 0 12px 24px rgba(15,27,45,0.1)',
            padding: '4% 5%',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            color: NAVY,
            position: 'relative',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <EclipseMark size={36} fg={NAVY}/>
              <div style={{ width: 1, height: 32, background: NAVY, opacity: 0.7 }}/>
              <div>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 500, fontSize: 26, letterSpacing: '0.06em', lineHeight: 1 }}>NOURA</div>
                <div style={{ fontFamily: "'Cinzel', serif", fontSize: 7, letterSpacing: '0.55em', marginTop: 4 }}>LAWYERS</div>
              </div>
            </div>

            <div style={{ fontFamily: 'Inter', fontSize: 7.5, lineHeight: 1.6, opacity: 0.85, letterSpacing: '0.04em' }}>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 600, fontSize: 9, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 3 }}>Noura Almaazmi Advocates &amp; Legal Consultancy</div>
              1702, Anantara Downtown Dubai, Al A'Amal St,<br/>
              Business Bay, P.O. Box 414224, Dubai, UAE
            </div>
          </div>
        </div>
      </div>
    </Page>
  );
}

Object.assign(window, { LetterheadPage, BusinessCardPage, EnvelopePage });


// === app ===

// Digital touchpoints + closing + app mount

// ============================================
// 09 — EMAIL SIGNATURE
// ============================================
function EmailSigPage({ idx, total }) {
  return (
    <Page id="email" theme="navy" section="08 · Email Signature" idx={idx} total={total}>
      <div style={{ padding: '120px 64px 100px', flex: 1, display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 64, alignItems: 'center' }}>
        <div>
          <h2 className="eyebrow">08 · Email Signature</h2>
          <h1 className="title">Restrained, in correspondence.</h1>
          <p className="lede">A single table-based block. Mark at left, name and credentials in serif, contact lines in sans. No social links, no quotes — discretion is the brand.</p>
        </div>

        {/* Mock email client */}
        <div style={{
          background: '#fafafa',
          boxShadow: '0 30px 60px rgba(0,0,0,0.45), 0 12px 20px rgba(0,0,0,0.25)',
          color: '#222',
          fontFamily: 'Inter, system-ui, sans-serif',
          fontSize: 13,
          overflow: 'hidden',
        }}>
          {/* header */}
          <div style={{ background: '#f0eee9', padding: '14px 22px', borderBottom: '1px solid #e0ddd6', display: 'flex', gap: 18, alignItems: 'center' }}>
            <div style={{ display: 'flex', gap: 6 }}>
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#ff5f57' }}/>
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#febc2e' }}/>
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#28c840' }}/>
            </div>
            <div style={{ fontSize: 11, color: '#666' }}>Re: Engagement letter — Matter 2026/0418</div>
          </div>
          {/* body */}
          <div style={{ padding: '28px 32px 24px', color: '#1a1a1a', lineHeight: 1.55 }}>
            <div style={{ marginBottom: 14 }}>Dear Mr. Al-Suwaidi,</div>
            <div style={{ marginBottom: 14, color: '#444' }}>Attached please find the executed engagement letter and the preliminary procedural memorandum. We are at your disposal for any clarification.</div>
            <div style={{ marginBottom: 28, color: '#444' }}>Kind regards,</div>

            {/* SIGNATURE */}
            <table cellPadding="0" cellSpacing="0" style={{ borderCollapse: 'collapse' }}>
              <tbody>
                <tr>
                  <td style={{ paddingRight: 18, verticalAlign: 'top' }}>
                    <EclipseMark size={56} fg={NAVY}/>
                  </td>
                  <td style={{ borderLeft: `1.5px solid ${GOLD}`, paddingLeft: 18, verticalAlign: 'top' }}>
                    <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 600, fontSize: 18, color: NAVY, letterSpacing: '0.03em', lineHeight: 1 }}>Noura Almaazmi</div>
                    <div style={{ fontFamily: 'Inter', fontSize: 10, color: GOLD_SOFT, marginTop: 4, letterSpacing: '0.18em', textTransform: 'uppercase' }}>Founding Partner · Advocate</div>
                    <div style={{ height: 1, background: GOLD, opacity: 0.35, margin: '10px 0' }}/>
                    <div style={{ fontFamily: 'Inter', fontSize: 11, color: NAVY, lineHeight: 1.6 }}>
                      <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 600, fontSize: 14, letterSpacing: '0.08em' }}>NOURA LAWYERS</div>
                      <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: 10.5, color: GOLD_SOFT, marginBottom: 4 }}>Noura Almaazmi Advocates &amp; Legal Consultancy</div>
                      <div>1702, Anantara Downtown Dubai · Business Bay · Dubai, UAE</div>
                      <div>
                        <span>+971 4 241 3555</span>
                        <span style={{ color: GOLD_SOFT, padding: '0 8px' }}>·</span>
                        <span>noura@almaazmilawyers.com</span>
                        <span style={{ color: GOLD_SOFT, padding: '0 8px' }}>·</span>
                        <span>almaazmilawyers.com</span>
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </Page>
  );
}

// ============================================
// 10 — DIGITAL ICONS (app, favicon, social)
// ============================================
function DigitalPage({ idx, total }) {
  return (
    <Page id="digital" theme="deep" section="09 · Digital" idx={idx} total={total}>
      <div style={{ padding: '120px 64px 100px', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h2 className="eyebrow">09 · Digital</h2>
        <h1 className="title">From a tab to a billboard.</h1>
        <p className="lede">The mark is the constant. App icons crop the disc generously; the favicon trades detail for legibility at 16 px; the avatar reads as a single golden disc from across the room.</p>

        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, flex: 1, alignItems: 'center' }}>
          {/* iOS app icon */}
          <IconTile label="iOS app icon" sub="180 × 180 px">
            <div style={{ width: 130, height: 130, borderRadius: 28, background: NAVY, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 12px 28px rgba(0,0,0,0.55)', border: `1px solid ${GOLD}33` }}>
              <EclipseMark size={70} fg={GOLD}/>
            </div>
          </IconTile>

          {/* Android adaptive */}
          <IconTile label="Android adaptive" sub="108 × 108 dp">
            <div style={{ width: 130, height: 130, borderRadius: '50%', background: NAVY, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 12px 28px rgba(0,0,0,0.55)' }}>
              <EclipseMark size={70} fg={GOLD}/>
            </div>
          </IconTile>

          {/* Avatar (LinkedIn) */}
          <IconTile label="Social avatar" sub="LinkedIn · X · Meta">
            <div style={{ width: 130, height: 130, borderRadius: '50%', background: GOLD, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 12px 28px rgba(0,0,0,0.55)' }}>
              <EclipseMark size={68} fg={NAVY}/>
            </div>
          </IconTile>

          {/* Favicon */}
          <IconTile label="Favicon" sub="32 / 16 px">
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 }}>
              <div style={{ width: 64, height: 64, background: NAVY, display: 'flex', alignItems: 'center', justifyContent: 'center', border: `1px solid ${GOLD}33` }}>
                <EclipseMark size={42} fg={GOLD}/>
              </div>
              <div style={{ width: 32, height: 32, background: NAVY, display: 'flex', alignItems: 'center', justifyContent: 'center', border: `1px solid ${GOLD}33` }}>
                <EclipseMark size={22} fg={GOLD}/>
              </div>
              <div style={{ width: 16, height: 16, background: NAVY, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: GOLD }}/>
              </div>
            </div>
          </IconTile>
        </div>

        {/* Browser tab + LinkedIn header preview */}
        <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {/* Browser tab */}
          <div style={{ background: '#23252a', borderRadius: '10px 10px 0 0', overflow: 'hidden' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: '#33363c', padding: '10px 14px', maxWidth: 360, borderRadius: '8px 8px 0 0' }}>
              <div style={{ width: 16, height: 16, background: NAVY, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: GOLD }}/>
              </div>
              <span style={{ color: '#ddd', fontSize: 13, flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Noura Lawyers · Litigation &amp; Legal Counsel</span>
              <span style={{ color: '#888', fontSize: 16 }}>×</span>
            </div>
            <div style={{ background: '#1a1c20', padding: '12px 14px', display: 'flex', gap: 10, alignItems: 'center' }}>
              <span style={{ color: '#888', fontSize: 12 }}>🔒</span>
              <span style={{ color: '#ccc', fontSize: 12, fontFamily: 'Inter' }}>almaazmilawyers.com</span>
            </div>
          </div>

          {/* LinkedIn-style avatar in row */}
          <div style={{ background: '#fff', padding: 20, display: 'flex', gap: 18, alignItems: 'center', color: '#1a1a1a' }}>
            <div style={{ width: 64, height: 64, borderRadius: '50%', background: GOLD, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <EclipseMark size={34} fg={NAVY}/>
            </div>
            <div>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 600, fontSize: 20, color: NAVY, letterSpacing: '0.04em' }}>Noura Lawyers</div>
              <div style={{ fontFamily: 'Inter', fontSize: 12, color: '#666' }}>Law Practice · Dubai, United Arab Emirates</div>
              <div style={{ fontFamily: 'Inter', fontSize: 11, color: '#888', marginTop: 2 }}>2,148 followers</div>
            </div>
          </div>
        </div>
      </div>
    </Page>
  );
}

function IconTile({ label, sub, children }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20 }}>
      <div style={{ minHeight: 160, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{children}</div>
      <div style={{ textAlign: 'center' }}>
        <div style={{ fontFamily: "'Cinzel', serif", fontSize: 10, letterSpacing: '0.3em', color: GOLD, textTransform: 'uppercase' }}>{label}</div>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: 13, color: GOLD_PALE, opacity: 0.7, marginTop: 4 }}>{sub}</div>
      </div>
    </div>
  );
}

// ============================================
// 11 — CLOSING / CONTACT CARD
// ============================================
function ClosingPage({ idx, total }) {
  return (
    <Page id="contact" theme="deep" section="Contact" idx={idx} total={total}>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: '120px 64px',
      }}>
        <div style={{ maxWidth: 760, width: '100%', textAlign: 'center' }}>
          <EclipseMark size={120} fg={GOLD}/>
          <div style={{ width: 1, height: 48, background: GOLD, opacity: 0.4, margin: '36px auto 0' }}/>
          <div style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontWeight: 500,
            fontSize: 96,
            color: CREAM,
            letterSpacing: '0.05em',
            lineHeight: 1,
            marginTop: 36,
          }}>NOURA</div>
          <div style={{
            fontFamily: "'Cinzel', serif",
            fontSize: 15, letterSpacing: '0.55em', color: GOLD,
            marginTop: 14, paddingLeft: '0.55em',
          }}>LAWYERS</div>
          <div style={{
            fontFamily: "'Amiri', serif", fontWeight: 700,
            fontSize: 36, color: GOLD_PALE, direction: 'rtl', marginTop: 20, opacity: 0.9,
          }}>نورة</div>

          {/* hairline */}
          <div style={{ height: 1, background: GOLD, opacity: 0.3, maxWidth: 360, margin: '48px auto 32px' }}/>

          <div style={{
            fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic',
            fontSize: 15, color: GOLD_SOFT, letterSpacing: '0.04em', marginBottom: 14,
          }}>Registered as Noura Almaazmi Advocates &amp; Legal Consultancy</div>

          <div style={{
            fontFamily: 'Inter',
            fontSize: 14,
            color: GOLD_PALE,
            opacity: 0.85,
            lineHeight: 1.8,
            letterSpacing: '0.04em',
          }}>
            1702, Anantara Downtown Dubai, Al A'Amal St<br/>
            Business Bay · P.O. Box 414224 · Dubai · UAE
          </div>

          <div style={{
            marginTop: 24,
            display: 'flex', justifyContent: 'center', gap: 28,
            fontFamily: 'Inter', fontSize: 14, color: GOLD, letterSpacing: '0.05em',
          }}>
            <span>+971 4 241 3555</span>
            <span style={{ opacity: 0.4 }}>·</span>
            <span>info@almaazmilawyers.com</span>
            <span style={{ opacity: 0.4 }}>·</span>
            <span>www.almaazmilawyers.com</span>
          </div>

          <div style={{
            marginTop: 64,
            fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic',
            fontSize: 17, color: GOLD_SOFT, opacity: 0.8,
          }}>
            Brand guidelines · Eclipse · version 1.0 · 2026
          </div>
        </div>
      </div>
    </Page>
  );
}

// ============================================
// TABLE OF CONTENTS (fixed sidebar)
// ============================================
function TOC({ items, active }) {
  return (
    <nav className="toc">
      {items.map(it => (
        <a key={it.id} href={`#${it.id}`} className={active === it.id ? 'active' : ''}>{it.label}</a>
      ))}
    </nav>
  );
}

// ============================================
// APP
// ============================================
function App() {
  const sections = [
    { id: 'cover',       label: 'Cover',       comp: Cover },
    { id: 'mark',        label: 'Mark',        comp: MarkPage },
    { id: 'lockups',     label: 'Lockups',     comp: LockupsPage },
    { id: 'colors',      label: 'Palette',     comp: ColorsPage },
    { id: 'typography',  label: 'Type',        comp: TypePage },
    { id: 'letterhead',  label: 'Letterhead',  comp: LetterheadPage },
    { id: 'card',        label: 'Card',        comp: BusinessCardPage },
    { id: 'envelope',    label: 'Envelope',    comp: EnvelopePage },
    { id: 'email',       label: 'Email',       comp: EmailSigPage },
    { id: 'digital',     label: 'Digital',     comp: DigitalPage },
    { id: 'contact',     label: 'Contact',     comp: ClosingPage },
  ];

  const [active, setActive] = useState('cover');

  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      const visible = entries.filter(e => e.isIntersecting).sort((a,b) => b.intersectionRatio - a.intersectionRatio);
      if (visible[0]) setActive(visible[0].target.id);
    }, { threshold: [0.3, 0.6, 0.9] });
    sections.forEach(s => {
      const el = document.getElementById(s.id);
      if (el) obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);

  return (
    <>
      <TOC items={sections} active={active}/>
      {sections.map((s, i) => {
        const Comp = s.comp;
        return <Comp key={s.id} idx={i+1} total={sections.length}/>;
      })}
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);