// council-lineage.jsx — Two seed-system showcases.
//
// 1. FAMILY TREE — proves the sub-brand seeds derive from the parent.
//    EpochCore parent → Council / TradeXchange / Quick Start.
//    Shown as parent mark + three child marks connected by lines.
//
// 2. LINEAGE STRIP — proves the brand mark evolves quarter by quarter
//    and every past version stays verifiable forever. Shown as 6 epoch
//    seals across a time axis with the current quarter highlighted.

// ── Active quarter detection ──────────────────────────────────
function activeQuarter() {
  const d = new Date();
  return { year: d.getUTCFullYear(), quarter: Math.floor(d.getUTCMonth() / 3) + 1 };
}

function quarterLabel(year, q) {
  return `${year} Q${q}`;
}

function quarterDateRange(year, q) {
  const startMonth = (q - 1) * 3;
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  return `${months[startMonth]} – ${months[startMonth + 2]} ${year}`;
}

function recentQuarters(count = 6) {
  const out = [];
  const now = activeQuarter();
  // Show 4 past + current + 1 future
  for (let i = count - 2; i >= -1; i--) {
    let y = now.year;
    let q = now.quarter - i;
    while (q < 1) { q += 4; y -= 1; }
    while (q > 4) { q -= 4; y += 1; }
    out.push({ year: y, quarter: q, isCurrent: (y === now.year && q === now.quarter), isFuture: i < 0 });
  }
  return out;
}

// ── Family Tree ──────────────────────────────────────────────
function FamilyTree() {
  const parent = (typeof BRAND_PARENT !== 'undefined') ? BRAND_PARENT : 0;
  const children = [
    { name: 'COUNCIL',      seed: (typeof COUNCIL_SEED    !== 'undefined') ? COUNCIL_SEED    : 0, hue: '#42f977', field: '#28239b', tag: 'the 25 verifiers' },
    { name: 'TRADEXCHANGE', seed: (typeof TX_SEED         !== 'undefined') ? TX_SEED         : 0, hue: '#a334f3', field: '#42f977', tag: 'the trading platform' },
    { name: 'QUICK START',  seed: (typeof QUICKSTART_SEED !== 'undefined') ? QUICKSTART_SEED : 0, hue: '#23c8e9', field: '#c6207a', tag: 'the SMB onboarding' },
  ];

  return (
    <div>
      <div style={{ marginBottom: 22, maxWidth: 760 }}>
        <Mono color={T.allow} weight={500}>§ 09 · FAMILY</Mono>
        <h2 style={{
          fontFamily: GEIST, fontWeight: 600, fontSize: 36, letterSpacing: -1.2, lineHeight: 1.05,
          margin: '10px 0 6px', color: T.textInv,
        }}>One parent. Three properties. Provably descended.</h2>
        <p style={{
          margin: 0, fontSize: 15, lineHeight: 1.55,
          color: T.muteInv, letterSpacing: -0.1,
        }}>
          Every EpochCore property pulls its identity from the same parent seed. The marks below aren't designed independently — they're derived. Anyone can replay <span style={{ fontFamily: GMONO, color: T.textInv }}>derive(parent, "subbrand:&lt;name&gt;")</span> and verify the family resemblance is real, not assumed.
        </p>
      </div>

      <div style={{
        position: 'relative',
        padding: '36px 24px 40px',
        border: `1px solid ${T.inkBorder}`, background: 'rgba(244,244,240,0.02)',
      }}>
        {/* PARENT */}
        <div style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          marginBottom: 36,
        }}>
          {typeof BrandMark === 'function' && <BrandMark size={88}/>}
          <div style={{
            marginTop: 14,
            fontFamily: GMONO, fontSize: 16, fontWeight: 600, letterSpacing: 1.6,
            color: T.textInv,
          }}>EPOCHCORE</div>
          <Mono color={T.muteInv} size={10} style={{ marginTop: 4 }}>PARENT SEED · {String(parent)}</Mono>
        </div>

        {/* connector lines — visual proof of descent */}
        <svg width="100%" height="40" style={{ display: 'block', marginBottom: 8 }} viewBox="0 0 600 40" preserveAspectRatio="none">
          <line x1="300" y1="0"  x2="300" y2="14" stroke={T.inkBorder} strokeWidth="1"/>
          <line x1="100" y1="14" x2="500" y2="14" stroke={T.inkBorder} strokeWidth="1"/>
          <line x1="100" y1="14" x2="100" y2="40" stroke={T.inkBorder} strokeWidth="1"/>
          <line x1="300" y1="14" x2="300" y2="40" stroke={T.inkBorder} strokeWidth="1"/>
          <line x1="500" y1="14" x2="500" y2="40" stroke={T.inkBorder} strokeWidth="1"/>
        </svg>

        {/* CHILDREN */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }}>
          {children.map(c => (
            <div key={c.name} style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center',
              padding: '20px 16px',
              border: `1px solid ${T.inkBorder}`, background: T.ink,
            }}>
              {typeof SeedSigil === 'function' && (
                <SeedSigil seed={c.seed} size={72} variant="sigil"
                  colors={{ ring: c.hue, field: c.field, core: c.hue }}/>
              )}
              <div style={{
                marginTop: 14, fontFamily: GMONO, fontSize: 13, fontWeight: 600,
                letterSpacing: 1.4, color: T.textInv, textAlign: 'center',
              }}>{c.name}</div>
              <Mono color={T.muteInv} size={9.5} style={{ marginTop: 4, textAlign: 'center' }}>{c.tag}</Mono>
              <Mono color={T.muteInv} size={9} style={{ marginTop: 10, letterSpacing: 0.5, textAlign: 'center' }}>
                SEED · {c.seed.toString(16).padStart(8, '0')}
              </Mono>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 24, padding: '10px 14px',
          border: `1px dashed ${T.inkBorder}`,
        }}>
          <Mono color={T.allow} weight={500} size={9.5}>HOW IT WORKS</Mono>
          <p style={{
            margin: '6px 0 0', fontSize: 12, lineHeight: 1.55,
            color: 'rgba(244,244,240,0.78)', letterSpacing: -0.05,
            fontFamily: GMONO,
          }}>
            child_seed = mix(parent_seed, hash("subbrand:" + name))
          </p>
          <p style={{
            margin: '8px 0 0', fontSize: 12, lineHeight: 1.5,
            color: 'rgba(244,244,240,0.6)', letterSpacing: -0.05,
          }}>
            Adding a new sub-brand never weakens the parent — the parent's information is preserved bit-for-bit in every child. No dilution, ever.
          </p>
        </div>
      </div>
    </div>
  );
}

// ── Lineage Strip — quarter-by-quarter brand evolution ───────
function LineageStrip() {
  const quarters = recentQuarters(6);
  const [hover, setHover] = React.useState(null);

  return (
    <div>
      <div style={{ marginBottom: 22, maxWidth: 760 }}>
        <Mono color={T.allow} weight={500}>§ 10 · LINEAGE</Mono>
        <h2 style={{
          fontFamily: GEIST, fontWeight: 600, fontSize: 36, letterSpacing: -1.2, lineHeight: 1.05,
          margin: '10px 0 6px', color: T.textInv,
        }}>The Council mark evolves every quarter.</h2>
        <p style={{
          margin: 0, fontSize: 15, lineHeight: 1.55,
          color: T.muteInv, letterSpacing: -0.1,
        }}>
          Each quarter the brand mark cycles to its next deterministic form. Past versions never change — anyone can replay <span style={{ fontFamily: GMONO, color: T.textInv }}>epochSeed(year, quarter)</span> and reconstruct exactly what the brand looked like at any point in its history. Future quarters are reachable too: the brand's whole timeline is mathematically defined, today and forever.
        </p>
      </div>

      <div style={{
        position: 'relative',
        padding: '32px 28px 36px',
        border: `1px solid ${T.inkBorder}`, background: 'rgba(244,244,240,0.02)',
      }}>
        {/* time axis */}
        <div style={{
          position: 'absolute', top: 84, left: 32, right: 32,
          height: 1, background: T.inkBorder,
        }}/>

        <div style={{
          display: 'grid', gridTemplateColumns: `repeat(${quarters.length}, 1fr)`, gap: 16,
          position: 'relative',
        }}>
          {quarters.map((q, i) => {
            const seed = (typeof epochSeed === 'function') ? epochSeed(q.year, q.quarter) : 0;
            const isHover = hover === i;
            const dimColor = q.isFuture ? '#888888' : '#42f977';
            const dimField = q.isFuture ? '#444444' : '#28239b';
            return (
              <div key={i}
                onMouseEnter={() => setHover(i)}
                onMouseLeave={() => setHover(null)}
                style={{
                  display: 'flex', flexDirection: 'column', alignItems: 'center',
                  gap: 8, cursor: 'help',
                  opacity: q.isFuture ? 0.42 : 1,
                  transition: 'opacity .2s ease, transform .2s ease',
                  transform: isHover ? 'translateY(-2px)' : 'translateY(0)',
                }}>
                {/* current quarter ring */}
                <div style={{
                  position: 'relative',
                  padding: 6,
                  border: q.isCurrent ? `1px solid ${T.allow}` : '1px solid transparent',
                  background: q.isCurrent ? 'rgba(45,216,129,0.06)' : 'transparent',
                }}>
                  {typeof SeedSigil === 'function' && (
                    <SeedSigil seed={seed} size={64} variant="sigil"
                      colors={{ ring: dimColor, field: dimField, core: dimColor }}/>
                  )}
                </div>
                {/* axis tick */}
                <div style={{
                  width: 1, height: 12, background: q.isCurrent ? T.allow : T.inkBorder,
                }}/>
                <Mono color={q.isCurrent ? T.allow : T.muteInv} weight={q.isCurrent ? 600 : 400}>
                  {quarterLabel(q.year, q.quarter)}
                </Mono>
                <Mono color={T.muteInv} size={9} style={{ letterSpacing: 0.4 }}>
                  {q.isCurrent ? 'CURRENT' : q.isFuture ? 'FUTURE' : 'ARCHIVED'}
                </Mono>
                {isHover && (
                  <Mono color={T.muteInv} size={9} style={{ letterSpacing: 0.5, textAlign: 'center' }}>
                    {quarterDateRange(q.year, q.quarter)}
                  </Mono>
                )}
              </div>
            );
          })}
        </div>

        <div style={{
          marginTop: 28, paddingTop: 16, borderTop: `1px dashed ${T.inkBorder}`,
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18,
        }}>
          <div>
            <Mono color={T.allow} weight={500} size={9.5}>VERIFIABLE PAST</Mono>
            <p style={{
              margin: '6px 0 0', fontSize: 11.5, lineHeight: 1.55,
              color: 'rgba(244,244,240,0.7)', letterSpacing: -0.05,
            }}>
              Past quarters are permanently reachable. Anyone with the parent seed can re-render any prior brand state, exactly.
            </p>
          </div>
          <div>
            <Mono color={T.allow} weight={500} size={9.5}>REACHABLE FUTURE</Mono>
            <p style={{
              margin: '6px 0 0', fontSize: 11.5, lineHeight: 1.55,
              color: 'rgba(244,244,240,0.7)', letterSpacing: -0.05,
            }}>
              Future quarters aren't designed — they're already implied. The brand of 2028 is mathematically determined, today.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  FamilyTree, LineageStrip,
  activeQuarter, quarterLabel, quarterDateRange, recentQuarters,
});