// js/page-shared.jsx — Editorial layout for the inner pages
// Distinct rhythm from the home page: 2-col with sticky "dossier" sidebar,
// Roman-numeral chapters, drop caps, gold rules, marginalia.
//
// Exports: Breadcrumb, EditorialMasthead, EditorialLayout, Chapter,
//          EditorialList, TimelineChapters, SessionFlowVertical,
//          EditorialBenefits, PracticalSidebar, EditorialCTA, GoldRuleDivider

// ─── Helper : split a title around an italic word ─────────────────────────
function renderItalic(title, italicWord, italicColor = 'var(--eq-gold)') {
  if (!italicWord || !title.includes(italicWord)) return title;
  const [before, ...rest] = title.split(italicWord);
  return (
    <>
      {before}
      <span style={{ fontStyle: 'italic', color: italicColor }}>{italicWord}</span>
      {rest.join(italicWord)}
    </>
  );
}

// ─── SmartNav : NavBar desktop ou MobileNav selon taille écran ───────────
function SmartNav({ current }) {
  const [isMobile, setIsMobile] = React.useState(
    () => typeof window !== 'undefined' && window.innerWidth < 820
  );
  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: 819px)');
    const handler = (e) => setIsMobile(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, []);
  return isMobile ? <MobileNav current={current} /> : <NavBar current={current} />;
}

// ─── Breadcrumb : Accueil › Accompagnements › <Page> ──────────────────────
function Breadcrumb({ trail }) {
  return (
    <nav className="eq-crumb" style={{
      padding: typeof window !== 'undefined' && window.innerWidth < 820 ? '16px 20px 0' : '24px 64px 0', maxWidth: 1280, margin: '0 auto',
      fontFamily: 'var(--eq-font-mono)', fontSize: 10.5, letterSpacing: '0.22em',
      textTransform: 'uppercase',
      display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap'
    }}>
      {trail.map((item, i) => {
        const last = i === trail.length - 1;
        return (
          <React.Fragment key={i}>
            {item.href ? (
              <a href={item.href} style={{
                color: 'var(--eq-ink-soft)', textDecoration: 'none'
              }}>{item.label}</a>
            ) : (
              <span style={{ color: 'var(--eq-gold)' }}>{item.label}</span>
            )}
            {!last && <span style={{ color: 'var(--eq-ink-muted)', opacity: 0.6 }}>—</span>}
          </React.Fragment>
        );
      })}
    </nav>
  );
}

// ─── Editorial masthead : eyebrow + huge italic-anchored title + lede ─────
function EditorialMasthead({ eyebrow, title, italicWord, lede, monogram = true }) {
  return (
    <section className="eq-edsec" style={{
      position: 'relative', padding: typeof window !== 'undefined' && window.innerWidth < 820 ? '40px 20px 36px' : '72px 64px 56px', overflow: 'hidden',
      borderBottom: '1px solid var(--eq-line-soft)'
    }}>
      <div style={{ position: 'absolute', top: -20, right: -80, opacity: 0.55 }}>
        <CircuitOrnament width={300} height={300} color="var(--eq-gold)" opacity={0.4} />
      </div>

      <div className="eq-mh-grid" style={{
        position: 'relative', maxWidth: 1280, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'flex-end'
      }}>
        <div style={{ maxWidth: 880 }}>
          {eyebrow && (
            <div style={{
              fontFamily: 'var(--eq-font-mono)', fontSize: 11, letterSpacing: '0.28em',
              textTransform: 'uppercase', color: 'var(--eq-gold)',
              display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28
            }}>
              <span style={{ width: 28, height: 1, background: 'var(--eq-gold)' }} />
              {eyebrow}
            </div>
          )}
          <h1 className="eq-mh-title" style={{
            margin: 0, fontFamily: 'var(--eq-font-display)',
            fontWeight: 'var(--eq-display-weight)', letterSpacing: 'var(--eq-display-tracking)',
            fontSize: 88, lineHeight: 0.98, color: 'var(--eq-ink)',
            textTransform: 'var(--eq-display-case)', textWrap: 'balance'
          }}>{renderItalic(title, italicWord)}</h1>
          {lede && (
            <p style={{
              margin: '32px 0 0', fontFamily: 'var(--eq-font-display)',
              fontStyle: 'italic', fontWeight: 400,
              fontSize: 22, lineHeight: 1.45,
              color: 'var(--eq-ink-soft)', maxWidth: 720
            }}>{lede}</p>
          )}
        </div>
        {monogram && (
          <div style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
            padding: '6px 18px 14px', borderLeft: '1px solid var(--eq-line)'
          }}>
            <LogoMark size={56} />
            <span style={{
              fontFamily: 'var(--eq-font-mono)', fontSize: 9.5, letterSpacing: '0.32em',
              textTransform: 'uppercase', color: 'var(--eq-ink-muted)', whiteSpace: 'nowrap'
            }}>Equilys · Dossier</span>
          </div>
        )}
      </div>
    </section>
  );
}

// ─── Layout : 2-column with sticky right "dossier" rail ───────────────────
function EditorialLayout({ children, sidebar }) {
  const [isMobile, setIsMobile] = React.useState(
    () => typeof window !== 'undefined' && window.innerWidth < 820
  );
  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: 819px)');
    const handler = (e) => setIsMobile(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, []);

  return (
    <section className="eq-edsec" style={{ padding: isMobile ? '32px 20px 0' : '64px 64px 0' }}>
      <div className="eq-lay-grid" style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 360px',
        gap: isMobile ? 32 : 80,
        alignItems: 'flex-start'
      }}>
        <main style={{ minWidth: 0, width: '100%' }}>{children}</main>
        {!isMobile && (
          <aside className="eq-lay-aside" style={{ position: 'sticky', top: 100, zIndex: 1, alignSelf: 'flex-start' }}>
            {sidebar}
          </aside>
        )}
        {isMobile && (
          <div style={{ width: '100%', marginBottom: 32 }}>
            {sidebar}
          </div>
        )}
      </div>
    </section>
  );
}

// ─── Chapter : Roman numeral + title + body ───────────────────────────────
function Chapter({ numeral, kicker, title, italicWord, children, last = false }) {
  return (
    <article style={{
      paddingBottom: last ? 64 : 72,
      marginBottom: last ? 0 : 64,
      borderBottom: last ? 'none' : '1px solid var(--eq-line-soft)'
    }}>
      <header style={{ marginBottom: 36, position: 'relative' }}>
        <div style={{
          display: 'flex', alignItems: 'baseline', gap: 24, flexWrap: 'wrap', marginBottom: 8
        }}>
          <span className="eq-chap-num" style={{
            fontFamily: 'var(--eq-font-display)',
            fontSize: 88, lineHeight: 0.85, fontStyle: 'italic',
            color: 'var(--eq-gold)', letterSpacing: '0.02em',
            fontWeight: 400
          }}>{numeral}.</span>
          {kicker && (
            <span style={{
              fontFamily: 'var(--eq-font-mono)', fontSize: 10.5, letterSpacing: '0.28em',
              textTransform: 'uppercase', color: 'var(--eq-ink-muted)'
            }}>{kicker}</span>
          )}
        </div>
        <h2 className="eq-chap-title" style={{
          margin: 0, fontFamily: 'var(--eq-font-display)',
          fontWeight: 'var(--eq-display-weight)', letterSpacing: '0.01em',
          fontSize: 44, lineHeight: 1.05, color: 'var(--eq-ink)',
          maxWidth: 720
        }}>{renderItalic(title, italicWord)}</h2>
      </header>
      {children}
    </article>
  );
}

// ─── Body paragraph with optional drop cap (via CSS ::first-letter) ───────
function Lede({ children, dropCap = false }) {
  return (
    <p className={dropCap ? 'eq-dropcap' : undefined} style={{
      margin: '0 0 22px', fontSize: 16.5, lineHeight: 1.75,
      color: 'var(--eq-ink)', maxWidth: 680
    }}>{children}</p>
  );
}

// ─── Editorial list : hanging-number prose ────────────────────────────────
// `body` is optional — when absent, only the numbered title shows.
function EditorialList({ items }) {
  return (
    <ol style={{ margin: 0, padding: 0, listStyle: 'none',
                 display: 'flex', flexDirection: 'column', gap: 28 }}>
      {items.map((it, i) => (
        <li key={i} style={{
          display: 'grid', gridTemplateColumns: '48px 1fr', gap: 24,
          alignItems: 'baseline'
        }}>
          <span style={{
            fontFamily: 'var(--eq-font-display)', fontSize: 28,
            color: 'var(--eq-gold)', fontStyle: 'italic',
            textAlign: 'right'
          }}>{String(i + 1).padStart(2, '0')}</span>
          <div>
            <div style={{
              fontFamily: 'var(--eq-font-display)', fontSize: 22, lineHeight: 1.25,
              color: 'var(--eq-ink)', fontWeight: 'var(--eq-display-weight)',
              marginBottom: it.body ? 8 : 0
            }}>{it.title}</div>
            {it.body && (
              <p style={{
                margin: 0, fontSize: 15.5, lineHeight: 1.7, color: 'var(--eq-ink-soft)',
                maxWidth: 640
              }}>{it.body}</p>
            )}
          </div>
        </li>
      ))}
    </ol>
  );
}

// ─── Timeline chapters : 3 movements, typographic only ────────────────────
// ─── Timeline chapters : typographic chapters (no week column) ────────────
// Each chapter accepts either body+bullets, or a `sections` array of
// { body, bullets } pairs for multi-paragraph chapters.
function TimelineChapters({ chapters }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
      {chapters.map((ch, i) => {
        const sections = ch.sections || [{ body: ch.body, bullets: ch.bullets }];
        return (
          <div key={i} style={{
            padding: '32px 0',
            borderTop: i === 0 ? '1px solid var(--eq-gold)' : '1px solid var(--eq-line-soft)',
            borderBottom: i === chapters.length - 1 ? '1px solid var(--eq-gold)' : 'none'
          }}>
            <div style={{
              fontFamily: 'var(--eq-font-mono)', fontSize: 10.5, letterSpacing: '0.28em',
              textTransform: 'uppercase', color: 'var(--eq-ink-muted)', marginBottom: 8
            }}>{ch.kicker}</div>
            <h3 style={{
              margin: '0 0 18px', fontFamily: 'var(--eq-font-display)',
              fontSize: 28, lineHeight: 1.1, color: 'var(--eq-ink)',
              fontWeight: 'var(--eq-display-weight)',
              letterSpacing: 'var(--eq-display-tracking)'
            }}>{ch.title}</h3>
            {sections.map((sec, j) => (
              <div key={j} style={{
                marginTop: j > 0 ? 24 : 0,
                paddingTop: j > 0 ? 24 : 0,
                borderTop: j > 0 ? '1px dashed var(--eq-line-soft)' : 'none'
              }}>
                {sec.body && (
                  <p style={{ margin: 0, fontSize: 15, lineHeight: 1.7,
                              color: 'var(--eq-ink-soft)', maxWidth: 680,
                              whiteSpace: 'pre-line' }}>{sec.body}</p>
                )}
                {sec.bullets && (
                  <ul style={{
                    margin: '14px 0 0', padding: 0, listStyle: 'none',
                    display: 'flex', flexWrap: 'wrap', gap: 8
                  }}>
                    {sec.bullets.map((b, k) => (
                      <li key={k}>
                        <Badge tone="soft">{b}</Badge>
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            ))}
          </div>
        );
      })}
    </div>
  );
}

// ─── Session flow, vertical : time → step ─────────────────────────────────
function SessionFlowVertical({ steps }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <div style={{
        position: 'absolute', left: 75, top: 36, bottom: 36, width: 1,
        background: 'var(--eq-line)'
      }} />
      {steps.map((s, i) => (
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: '90px 56px 1fr', gap: 24,
          alignItems: 'flex-start',
          padding: '20px 0'
        }}>
          <span style={{
            fontFamily: 'var(--eq-font-display)', fontSize: 26, fontStyle: 'italic',
            color: 'var(--eq-gold)', textAlign: 'right', paddingTop: 6
          }}>{s.time}</span>
          <span style={{
            width: 12, height: 12, borderRadius: '50%',
            background: 'var(--eq-gold)', boxShadow: '0 0 0 5px var(--eq-bg)',
            justifySelf: 'center', marginTop: 14, position: 'relative', zIndex: 1
          }} />
          <div>
            <h3 style={{
              margin: 0, fontFamily: 'var(--eq-font-display)',
              fontSize: 22, lineHeight: 1.15, color: 'var(--eq-ink)',
              fontWeight: 'var(--eq-display-weight)',
              letterSpacing: 'var(--eq-display-tracking)'
            }}>{s.title}</h3>
            <p style={{
              margin: '8px 0 0', fontSize: 15, lineHeight: 1.65,
              color: 'var(--eq-ink-soft)', maxWidth: 580
            }}>{s.body}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

// ─── Benefits : 2-col prose with gold tick ────────────────────────────────
function EditorialBenefits({ items }) {
  return (
    <div className="eq-2col" style={{
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '28px 56px'
    }}>
      {items.map((it, i) => (
        <div key={i} style={{
          paddingTop: 18,
          borderTop: '1px solid var(--eq-line-soft)'
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 14, marginBottom: 10
          }}>
            <span style={{
              width: 24, height: 24, borderRadius: '50%',
              background: 'rgba(217,183,116,0.15)', border: '1px solid rgba(217,183,116,0.5)',
              color: 'var(--eq-gold)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
            }}>
              <svg width="12" height="12" viewBox="0 0 14 14" fill="none">
                <path d="M2 7l3 3 7-7" stroke="currentColor" strokeWidth="1.8"
                      strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>
            <h3 style={{
              margin: 0, fontFamily: 'var(--eq-font-display)', fontSize: 22,
              lineHeight: 1.15, color: 'var(--eq-ink)',
              fontWeight: 'var(--eq-display-weight)'
            }}>{it.title}</h3>
          </div>
          <p style={{
            margin: 0, fontSize: 14.5, lineHeight: 1.7, color: 'var(--eq-ink-soft)'
          }}>{it.body}</p>
        </div>
      ))}
    </div>
  );
}

// ─── Sticky "dossier" sidebar : cream card with key facts + CTA ───────────
function PracticalSidebar({
  reference,
  facts,
  ctaLabel, ctaHref = '#',
  secondaryCtaLabel, secondaryCtaHref = '#',
  footnote
}) {
  return (
    <div style={{
      background: '#F4EFE2', color: '#2A3D4D',
      borderRadius: 4, overflow: 'hidden',
      boxShadow: '0 18px 50px -22px rgba(0,0,0,0.45)',
      border: '1px solid rgba(244,239,226,0.5)'
    }}>
      {/* Letterhead strip */}
      <div style={{
        padding: '20px 24px',
        borderBottom: '1px solid rgba(42,61,77,0.12)',
        display: 'flex', alignItems: 'center', gap: 14
      }}>
        <LogoMark size={48} />
        <div>
          <div style={{
            fontFamily: 'var(--eq-font-mono)', fontSize: 9.5,
            letterSpacing: '0.28em', textTransform: 'uppercase',
            color: 'rgba(42,61,77,0.55)'
          }}>Dossier · réf.</div>
          <div style={{
            fontFamily: 'var(--eq-font-display)', fontSize: 18,
            color: '#2A3D4D', lineHeight: 1.1, marginTop: 2,
            letterSpacing: '0.02em'
          }}>{reference}</div>
        </div>
      </div>

      {/* Facts list */}
      <div style={{ padding: '6px 24px' }}>
        {facts.map((f, i) => (
          <div key={i} style={{
            padding: '14px 0',
            borderBottom: i < facts.length - 1 ? '1px solid rgba(42,61,77,0.10)' : 'none',
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12,
            flexWrap: 'wrap'
          }}>
            <span style={{
              fontFamily: 'var(--eq-font-mono)', fontSize: 9.5, letterSpacing: '0.22em',
              textTransform: 'uppercase', color: 'rgba(42,61,77,0.55)'
            }}>{f.label}</span>
            <span style={{
              fontSize: 13.5, color: '#2A3D4D', fontWeight: 500, textAlign: 'right',
              fontFamily: f.font === 'display' ? 'var(--eq-font-display)' : 'var(--eq-font-body)',
              fontStyle: f.font === 'display' ? 'italic' : 'normal',
              fontSize: f.font === 'display' ? 17 : 13.5,
              color: f.font === 'display' ? 'rgba(42,61,77,0.85)' : '#2A3D4D'
            }}>{f.value}</span>
          </div>
        ))}
      </div>

      {/* CTA block */}
      <div style={{
        padding: '20px 24px 24px',
        borderTop: '1px solid rgba(42,61,77,0.12)',
        background: 'rgba(42,61,77,0.04)',
        display: 'flex', flexDirection: 'column', gap: 10
      }}>
        {ctaLabel && (
          <a href={ctaHref} style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            gap: 10, padding: '14px 18px',
            background: '#2A3D4D', color: '#F4EFE2',
            fontFamily: 'var(--eq-font-body)', fontSize: 13.5, letterSpacing: '0.04em',
            fontWeight: 500, textDecoration: 'none', borderRadius: 2
          }}>
            {ctaLabel}
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.2"
                    strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        )}
        {secondaryCtaLabel && (
          <a href={secondaryCtaHref} style={{
            textAlign: 'center', fontSize: 12, letterSpacing: '0.04em',
            color: 'rgba(42,61,77,0.7)', textDecoration: 'underline',
            textDecorationColor: 'rgba(42,61,77,0.25)', textUnderlineOffset: 4
          }}>{secondaryCtaLabel}</a>
        )}
        {footnote && (
          <div style={{
            marginTop: 6, fontFamily: 'var(--eq-font-mono)', fontSize: 9.5,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            color: 'rgba(42,61,77,0.45)', textAlign: 'center'
          }}>{footnote}</div>
        )}
      </div>
    </div>
  );
}

// ─── Closing CTA : typographic, not card-based ────────────────────────────
function EditorialCTA({ title, italicWord, body, primaryCta, primaryHref = '#',
                       secondaryCta, secondaryHref = '#' }) {
  return (
    <section className="eq-cta-sec" style={{
      position: 'relative', padding: '120px 64px 100px', overflow: 'hidden',
      borderTop: '1px solid var(--eq-line-soft)', marginTop: 80
    }}>
      <div style={{ position: 'absolute', bottom: -160, right: -100, opacity: 0.7,
                    pointerEvents: 'none' }}>
        <BrushSplash width={520} height={520} color="var(--eq-ink-soft)" />
      </div>
      <div className="eq-cta-grid" style={{
        position: 'relative', maxWidth: 1280, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1fr auto', gap: 60,
        alignItems: 'center'
      }}>
        <div style={{ maxWidth: 720 }}>
          <div style={{
            fontFamily: 'var(--eq-font-mono)', fontSize: 11, letterSpacing: '0.28em',
            textTransform: 'uppercase', color: 'var(--eq-gold)',
            display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24
          }}>
            <span style={{ width: 28, height: 1, background: 'var(--eq-gold)' }} />
            Prochaine étape
          </div>
          <h2 className="eq-cta-title" style={{
            margin: 0, fontFamily: 'var(--eq-font-display)',
            fontWeight: 'var(--eq-display-weight)', letterSpacing: 'var(--eq-display-tracking)',
            fontSize: 60, lineHeight: 1.02, color: 'var(--eq-ink)', textWrap: 'balance'
          }}>{renderItalic(title, italicWord)}</h2>
          {body && (
            <p style={{
              margin: '24px 0 0', fontSize: 17, lineHeight: 1.7,
              color: 'var(--eq-ink-soft)', maxWidth: 600
            }}>{body}</p>
          )}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12,
                      minWidth: 240 }}>
          {primaryCta && (
            <a href={primaryHref} style={{ textDecoration: 'none' }}>
              <Button variant="primary" size="lg" fullWidth
                      icon={<Arrow color="var(--eq-bg)" />}>{primaryCta}</Button>
            </a>
          )}
          {secondaryCta && (
            <a href={secondaryHref} style={{ textDecoration: 'none' }}>
              <Button variant="ghost" size="lg" fullWidth>{secondaryCta}</Button>
            </a>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Breadcrumb, EditorialMasthead, EditorialLayout, Chapter, Lede,
  EditorialList, TimelineChapters, SessionFlowVertical,
  EditorialBenefits, PracticalSidebar, EditorialCTA
});
