// Hierarchy.jsx — the three-tier brand hierarchy. Editorial, restrained.
const Hierarchy = () => {
  const isMobile = useIsMobile();
  const tiers = [
    {
      numeral: '01',
      mark: 'The Art of Living Digitally',
      tm: '™',
      kind: 'The Institution',
      desc: 'As the cultural body, it stewards the doctrine, the archive, and the public-facing institutional record.',
      domain: 'theartoflivingdigitally.com',
      current: true,
    },
    {
      numeral: '02',
      mark: 'Living Digitally',
      tm: '™',
      kind: 'The Learning Platform',
      desc: 'As the applied curriculum and product surface, it teaches publicly across social media. There, the doctrine becomes practice in the lives of learners.',
      domain: 'livingdigitally.co',
      current: false,
    },
    {
      numeral: '03',
      mark: 'The Tech Lifestyle',
      tm: '',
      kind: 'The Private Community',
      desc: "As the members' circle, it holds the lifestyle in common through closed-room discourse, open to those who claim a seat.",
      domain: 'A private community',
      current: false,
    },
  ];

  return (
    <section style={{
      background: 'var(--ld-pearl-50)',
      paddingTop: isMobile ? 'clamp(48px, 10vw, 120px)' : 'clamp(96px, 12vw, 180px)',
      paddingBottom: isMobile ? 'clamp(48px, 10vw, 120px)' : 'clamp(96px, 12vw, 180px)',
    }}>
      <div className="container" style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'minmax(180px, 1fr) minmax(0, 3fr)',
        gap: isMobile ? 32 : 'clamp(48px, 8vw, 120px)',
        alignItems: 'start',
      }}>
        <div style={{ position: isMobile ? 'static' : 'sticky', top: 120 }}>
          <div className="eyebrow-gold" style={{ marginBottom: 18 }}>III.</div>
          <div className="smallcap-display" style={{ fontSize: 22, color: 'var(--ld-navy)', lineHeight: 1.2 }}>
            The Brand{isMobile ? ' ' : <br />}Hierarchy
          </div>
          <hr className="rule-gold" style={{ marginTop: 20, width: 36 }} />
          <p style={{
            fontFamily: 'Montserrat, sans-serif', fontSize: 13, lineHeight: 1.75,
            color: 'var(--ld-ink-3)', marginTop: 24, maxWidth: isMobile ? '100%' : 220,
          }}>
            Three tiers stand in steady relation: the institution holds the
            doctrine, the platform teaches it, and the community lives it.
          </p>
        </div>

        <div>
          {tiers.map((t, i) => (
            <article key={t.numeral} style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '40px 1fr' : '64px 1fr',
              gap: isMobile ? 20 : 32,
              padding: isMobile ? '28px 0' : '40px 0',
              borderTop: i === 0 ? '1px solid var(--ld-line)' : 'none',
              borderBottom: '1px solid var(--ld-line)',
              alignItems: 'start',
            }}>
              <div style={{
                fontFamily: 'Cormorant Garamond, serif',
                fontStyle: 'italic', fontWeight: 400, fontSize: isMobile ? 26 : 36,
                color: t.current ? 'var(--ld-gold)' : 'var(--ld-ink-3)',
                lineHeight: 1,
              }}>{t.numeral}</div>

              <div style={{
                display: 'grid',
                gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 2fr) minmax(0, 1fr)',
                gap: isMobile ? 20 : 32,
                alignItems: isMobile ? 'start' : 'baseline',
              }}>
                <div>
                  <div className="eyebrow-ink" style={{ marginBottom: 12 }}>{t.kind}</div>
                  <h3 style={{
                    fontFamily: 'Cormorant Garamond, serif',
                    fontWeight: 400,
                    fontSize: isMobile ? 'clamp(22px, 6vw, 28px)' : 'clamp(28px, 3vw, 40px)',
                    lineHeight: 1.15, letterSpacing: '-0.005em',
                    color: 'var(--ld-navy)', margin: 0,
                  }}>
                    {t.mark}
                    {t.tm && <sup style={{ fontSize: '0.4em', verticalAlign: 'super', color: 'var(--ld-gold)' }}>{t.tm}</sup>}
                  </h3>
                  <p style={{
                    fontFamily: 'Montserrat, sans-serif',
                    fontSize: isMobile ? 14 : 15, lineHeight: 1.75,
                    color: 'var(--ld-ink-2)',
                    margin: '18px 0 0', maxWidth: 520,
                  }}>{t.desc}</p>
                </div>

                <div style={{ textAlign: isMobile ? 'left' : 'right' }}>
                  <div className="eyebrow-ink" style={{ marginBottom: 8, color: t.current ? 'var(--ld-gold)' : 'var(--ld-ink-3)' }}>
                    {t.current ? 'You are here' : 'Resides at'}
                  </div>
                  <div style={{
                    fontFamily: 'Cormorant Garamond, serif',
                    fontStyle: 'italic', fontSize: 16, color: 'var(--ld-ink-2)',
                    wordBreak: 'break-word',
                  }}>{t.domain}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Hierarchy = Hierarchy;