// variation-c.jsx — "Atmospheric" homepage.
// Uses the shared chrome (CGlobalStyles / CNav / CFooter) via CPage.

const C_W = 1440;
const C_H = 5900;

function VariationC() {
  return (
    <CPage active="Home" width={C_W} height={C_H}>
      <CHero />
      <CStatement />
      <CPortfolio />
      <CPrinciples />
      <CLeadership />
      <CContactCTA />
    </CPage>
  );
}

// ── Hero ────────────────────────────────────────────────────────
function CHero() {
  const tickerItems = ['operate', 'compound', 'steward', 'hold', 'operate'];
  return (
    <section className="c-section-pad c-hero-pad" style={{
      position: 'relative',
      padding: '80px 56px 140px',
      overflow: 'hidden',
    }}>
      {/* gradient orb */}
      <div aria-hidden className="c-orb" style={{
        position: 'absolute', left: '60%', top: 80, width: 900, height: 900,
        animation: 'c-orbFloat 14s ease-in-out infinite',
        pointerEvents: 'none',
      }}>
        <div style={{
          position: 'absolute', inset: 0, borderRadius: '50%',
          background: `radial-gradient(circle at 35% 35%, ${P1686.violetHi} 0%, ${P1686.violet} 22%, ${P1686.blue} 50%, transparent 72%)`,
          animation: 'c-orbHue 22s linear infinite',
          opacity: 0.55,
        }} />
      </div>

      {/* slow rotating dotted ring */}
      <div aria-hidden className="c-ring" style={{
        position: 'absolute', left: 'calc(60% + 450px)', top: 'calc(80px + 450px)',
        width: 1100, height: 1100, borderRadius: '50%',
        border: `1px dashed ${P1686.lineHi}`,
        transform: 'translate(-50%, -50%)',
        animation: 'c-ringSpin 90s linear infinite',
        pointerEvents: 'none',
      }} />

      {/* fade to bg at bottom */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `linear-gradient(180deg, transparent 70%, ${P1686.bg} 100%)`,
      }} />

      <div className="c-content">
      <div style={{ position: 'relative', maxWidth: 1100, paddingTop: 120 }}>
        <h1 className="c-headline-mega" style={{
          margin: 0, fontWeight: 500,
          fontSize: 132, lineHeight: 0.95, letterSpacing: -3.8,
          maxWidth: 1100, textWrap: 'balance',
        }}>
          We{' '}
          <span style={{
            display: 'inline-flex',
            height: '1em',
            verticalAlign: 'baseline',
            overflow: 'hidden',
            color: P1686.violetHi,
            paddingRight: '0.05em',
          }}>
            <span style={{
              display: 'inline-flex', flexDirection: 'column',
              animation: 'c-tickerSlide 7.2s steps(1) infinite',
              lineHeight: 1.2,
            }}>
              {tickerItems.map((t, i) => (
                <span key={i} style={{ height: '1.2em' }}>{t}</span>
              ))}
            </span>
          </span>
          {' '}<br />the companies we own.
        </h1>

        <p className="c-body-lg" style={{
          marginTop: 40, fontSize: 19, lineHeight: 1.55, color: P1686.muted,
          maxWidth: 640, fontWeight: 400,
        }}>
          1686 is a holding company for a small, deliberately chosen set of
          operating businesses. We are builders. We work alongside our
          companies, using AI to help them see and realize value over
          decades.
        </p>
      </div>

      {/* bottom strip — quiet stats */}
      <div className="c-stats-4" style={{
        position: 'relative', marginTop: 84,
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
        borderTop: `1px solid ${P1686.line}`, borderBottom: `1px solid ${P1686.line}`,
      }}>
        {[
          ['Companies under management', '04'],
          ['Sectors',  '03'],
          ['Average hold', 'indefinite'],
          ['Outside investors', 'none'],
        ].map(([k, v], i, arr) => (
          <div key={k} style={{
            padding: '28px 28px',
            borderRight: i < arr.length - 1 ? `1px solid ${P1686.line}` : 'none',
            display: 'flex', flexDirection: 'column', gap: 14,
          }}>
            <MonoLabel>{k}</MonoLabel>
            <span className="c-stat-val" style={{
              fontSize: 36, fontWeight: 500, letterSpacing: -0.8,
              color: P1686.text, lineHeight: 1,
            }}>{v}</span>
          </div>
        ))}
      </div>
      </div>
    </section>
  );
}

// ── Statement ───────────────────────────────────────────────────
function CStatement() {
  return (
    <section className="c-section-pad c-section-pad-y" style={{
      padding: '140px 56px',
      borderBottom: `1px solid ${P1686.line}`,
    }}>
      <div className="c-content c-grid-stack-md" style={{
        display: 'grid', gridTemplateColumns: '3fr 9fr', gap: 56, alignItems: 'start',
      }}>
        <div>
          <MonoLabel style={{ color: P1686.violetHi }}>About</MonoLabel>
          <div style={{ marginTop: 14, fontSize: 13, color: P1686.muted }}>What we do</div>
        </div>
        <p className="c-headline-statement" style={{
          margin: 0, fontWeight: 400,
          fontSize: 44, lineHeight: 1.18, letterSpacing: -1, color: P1686.text,
          maxWidth: 1080, textWrap: 'pretty',
        }}>
          We build with operators who think in decades. The portfolio is
          small on purpose:{' '}
          <span style={{ color: P1686.muted }}>four operating companies in
          compliance &amp; trust, professional services, developer
          infrastructure, and hospitality. Each is stewarded for the long
          arc.</span>
        </p>
      </div>
    </section>
  );
}

// ── Portfolio ───────────────────────────────────────────────────
function CPortfolio() {
  return (
    <section id="portfolio" className="c-section-pad c-section-pad-y" style={{
      padding: '120px 56px',
      borderBottom: `1px solid ${P1686.line}`,
    }}>
      <div className="c-content">
      <header className="c-section-h-row" style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'end',
        marginBottom: 64,
      }}>
        <div>
          <MonoLabel style={{ color: P1686.violetHi }}>Portfolio</MonoLabel>
          <h2 className="c-headline-mid" style={{
            margin: '14px 0 0', fontWeight: 500,
            fontSize: 68, lineHeight: 1, letterSpacing: -1.8,
          }}>Four held, four operating.</h2>
        </div>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontSize: 13, color: P1686.muted,
        }}>
          <span style={{ width: 8, height: 8, borderRadius: 99, background: P1686.moss }} />
          All active
        </span>
      </header>

      <div className="c-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {HOLDINGS.map((h, i) => <CPortfolioCard key={h.key} h={h} idx={i} />)}
      </div>
      </div>
    </section>
  );
}

function CPortfolioCard({ h, idx }) {
  const hasLink = h.href && h.href !== '#';
  const Tag = hasLink ? 'a' : 'div';
  const linkProps = hasLink ? { href: h.href } : {};
  return (
    <Tag {...linkProps} className="c-card" style={{
      display: 'block', textDecoration: 'none', color: 'inherit',
      background: P1686.surface, border: `1px solid ${P1686.line}`,
      borderRadius: 16, overflow: 'hidden', position: 'relative',
    }}>
      <HoldingTexture which={h.key} style={{ height: 300 }} />
      <div style={{
        position: 'absolute', top: 24, left: 28, right: 28,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <MonoLabel style={{ color: P1686.text }}>{h.wordmark}</MonoLabel>
        <MonoLabel style={{
          color: P1686.text,
          padding: '4px 10px', borderRadius: 99,
          background: 'rgba(8,5,15,0.5)', backdropFilter: 'blur(8px)',
          border: `1px solid ${P1686.lineHi}`,
        }}>{String(idx + 1).padStart(2, '0')} · {h.year}</MonoLabel>
      </div>
      <div className="c-card-pad" style={{ padding: '32px 36px 36px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
          <h3 className="c-pcard-h" style={{
            margin: 0, fontWeight: 500,
            fontSize: 38, letterSpacing: -0.8,
          }}>{h.name}</h3>
          <MonoLabel>{h.sector}</MonoLabel>
        </div>
        <p style={{
          marginTop: 16, fontSize: 16, lineHeight: 1.55, color: P1686.muted,
          maxWidth: 520,
        }}>{h.desc}</p>
        <div style={{
          marginTop: 28, paddingTop: 20, borderTop: `1px solid ${P1686.line}`,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        }}>
          <span style={{ fontSize: 13, color: P1686.muted }}>{h.stake}</span>
          {hasLink ? (
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              fontSize: 13, color: P1686.text,
            }}>Visit company <Arrow size={12} /></span>
          ) : (
            <span style={{ fontSize: 13, color: P1686.mute2 }}>Site coming soon</span>
          )}
        </div>
      </div>
    </Tag>
  );
}

// ── Principles ──────────────────────────────────────────────────
function CPrinciples() {
  return (
    <section id="approach" className="c-section-pad c-section-pad-y" style={{
      padding: '120px 56px',
      borderBottom: `1px solid ${P1686.line}`,
      position: 'relative',
    }}>
      <div className="c-content">
      <header style={{ marginBottom: 64, maxWidth: 900 }}>
        <MonoLabel style={{ color: P1686.violetHi }}>Approach</MonoLabel>
        <h2 className="c-headline-mid" style={{
          margin: '14px 0 0', fontWeight: 500,
          fontSize: 68, lineHeight: 1, letterSpacing: -1.8,
        }}>Held for the long arc.</h2>
      </header>

      <div className="c-grid-3" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, position: 'relative' }}>
        {PILLARS.map((p, i) => (
          <div key={p.n} style={{
            position: 'relative',
            background: P1686.surface, border: `1px solid ${P1686.line}`,
            borderRadius: 16, padding: '36px 32px 40px', overflow: 'hidden',
          }}>
            <div aria-hidden style={{
              position: 'absolute', top: -100, right: -100, width: 280, height: 280,
              borderRadius: '50%',
              background: `radial-gradient(circle, ${i === 0 ? P1686.violet : i === 1 ? P1686.blue : P1686.moss}33 0%, transparent 65%)`,
              filter: 'blur(20px)', pointerEvents: 'none',
            }} />
            <div style={{
              position: 'relative',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              marginBottom: 32,
            }}>
              <span style={{
                fontSize: 56, fontWeight: 300, letterSpacing: -2,
                color: P1686.violetHi, lineHeight: 1,
              }}>{p.n}</span>
              <span style={{
                width: 36, height: 36, borderRadius: 99,
                border: `1px solid ${P1686.lineHi}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: P1686.muted,
              }}><Arrow size={13} /></span>
            </div>
            <h3 style={{
              margin: 0, fontWeight: 500, position: 'relative',
              fontSize: 26, lineHeight: 1.2, letterSpacing: -0.5, marginBottom: 14,
            }}>{p.title}</h3>
            <p style={{
              margin: 0, position: 'relative',
              fontSize: 15, lineHeight: 1.6, color: P1686.muted,
            }}>{p.body}</p>
          </div>
        ))}
      </div>
      </div>
    </section>
  );
}

// ── Leadership teaser ───────────────────────────────────────────
function CLeadership() {
  return (
    <section id="leadership" className="c-section-pad c-section-pad-y" style={{
      padding: '120px 56px',
      borderBottom: `1px solid ${P1686.line}`,
    }}>
      <div className="c-content">
      <header className="c-section-h-row" style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'end',
        marginBottom: 56,
      }}>
        <div>
          <MonoLabel style={{ color: P1686.violetHi }}>Leadership</MonoLabel>
          <h2 className="c-headline-mid" style={{
            margin: '14px 0 0', fontWeight: 500,
            fontSize: 68, lineHeight: 1, letterSpacing: -1.8,
          }}>The principals.</h2>
        </div>
        <a href="/leadership" className="c-link" style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontSize: 14, color: P1686.muted, textDecoration: 'none',
        }}>Full team <Arrow size={12} /></a>
      </header>

      <div className="c-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
        {PRINCIPALS.map((p, i) => (
          <div key={p.initials} className="c-card" style={{
            background: P1686.surface, border: `1px solid ${P1686.line}`,
            borderRadius: 12, overflow: 'hidden',
          }}>
            <div style={{
              height: 260, position: 'relative', overflow: 'hidden',
              background: `radial-gradient(80% 80% at 30% 30%, ${i % 2 ? P1686.violet : P1686.blue}22 0%, ${P1686.surface} 100%)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <span style={{
                fontSize: 96, fontWeight: 300, letterSpacing: -3,
                color: P1686.lineHi, lineHeight: 1,
              }}>{p.initials}</span>
              <span style={{
                position: 'absolute', top: 16, left: 18,
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: 11, color: P1686.muted, letterSpacing: 0.1, textTransform: 'uppercase',
              }}>P—{String(i + 1).padStart(2, '0')}</span>
            </div>
            <div style={{ padding: '20px 24px 24px', borderTop: `1px solid ${P1686.line}` }}>
              <div style={{ fontSize: 20, fontWeight: 500, letterSpacing: -0.3 }}>{p.name}</div>
              <div style={{ fontSize: 13, color: P1686.muted, marginTop: 4 }}>{p.role}</div>
            </div>
          </div>
        ))}
      </div>
      </div>
    </section>
  );
}

// ── Contact CTA (homepage section, not the Contact page) ────────
function CContactCTA() {
  return (
    <section id="contact" className="c-section-pad c-section-pad-y" style={{
      position: 'relative',
      padding: '160px 56px',
      overflow: 'hidden',
    }}>
      <div aria-hidden className="c-orb" style={{
        position: 'absolute', left: '50%', top: '50%', width: 800, height: 800,
        transform: 'translate(-50%, -50%)',
        background: `radial-gradient(circle, ${P1686.violet}33 0%, transparent 60%)`,
        filter: 'blur(80px)', pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative', textAlign: 'center', maxWidth: 900, margin: '0 auto' }}>
        <MonoLabel style={{ color: P1686.violetHi }}>Inquiries</MonoLabel>
        <h2 className="c-headline-big" style={{
          margin: '24px 0 0', fontWeight: 500,
          fontSize: 88, lineHeight: 0.98, letterSpacing: -2.6,
          textWrap: 'balance',
        }}>
          Founders, operators, prospective partners. We read every note.
        </h2>
        <div style={{
          marginTop: 48, display: 'inline-flex', flexDirection: 'column', gap: 12,
        }}>
          <a href="mailto:contact@1686holdings.com" className="c-cta" style={{
            display: 'inline-flex', alignItems: 'center', gap: 14,
            padding: '18px 28px', borderRadius: 999,
            background: P1686.text, color: P1686.bg, textDecoration: 'none',
            fontSize: 17, fontWeight: 500,
          }}>
            contact@1686holdings.com
            <span className="c-cta-arrow" style={{ display: 'inline-flex', transition: 'transform .25s' }}>
              <Arrow size={15} color={P1686.bg} />
            </span>
          </a>
          <MonoLabel>Replies within five business days.</MonoLabel>
        </div>
      </div>
    </section>
  );
}

window.VariationC = VariationC;
window.C_DIMS = { w: C_W, h: C_H };