/* global React, Section, Placeholder, useReveal */

/* ============================================================
   04 — THE SUN
   "Mavericks Are Needed More Than Ever..."
   ============================================================ */
function SunSection() {
  return (
    <Section id="sun" num={4} kicker="The Spread">
      <h2 className="h-serif sun-h">
        Mavericks are needed more than ever.{' '}
        <em>In every sector, industry and category.</em>
      </h2>
      <p className="lede sun-sub">
        Business as usual got us here. It won't get us out. The world is calling for the founders who think differently — who see what others miss, build what others won't, and believe business can be the greatest lever
        {' '}<em>for impact, and even the way to nudge consciousness on the planet.</em>
      </p>

      <div className="sun-stage">
        <img
          src="assets/sun-disciplines.png"
          alt="Hand-drawn sun radiating disciplines: media, medicine, food, communities, tech, working, art, transportation, energy, leadership, living, education, money, relationships."
          className="sun-img"
        />
      </div>

      <p className="sun-foot">
        <span className="sun-line">One Maverick can transform an industry.</span>
        <strong className="sun-line">A thousand together can transform the world.</strong>
      </p>

      <style>{`
        .sun-h {
          font-size: clamp(38px, 6vw, 72px);
          line-height: 1.06;
          letter-spacing: -0.018em;
          max-width: 22ch;
        }
        .sun-h em { font-style: italic; color: var(--green); }
        .sun-sub {
          margin-top: 24px;
          color: var(--ink-2);
          font-style: normal;
          max-width: 60ch;
          line-height: 1.55;
        }
        .sun-sub em { font-style: italic; color: var(--green); }
        .sun-stage {
          position: relative;
          margin: 64px auto 56px;
          max-width: 720px;
          padding: 24px;
        }
        .sun-img {
          display: block;
          width: 100%;
          height: auto;
          filter: invert(0.92) hue-rotate(180deg) saturate(0.6) brightness(1.05) contrast(1.15);
          mix-blend-mode: screen;
        }
        .sun-foot {
          font-family: var(--serif);
          font-size: clamp(20px, 2.6vw, 28px);
          color: var(--ink);
          max-width: 30ch;
          margin: 0 auto;
          text-align: center;
          line-height: 1.5;
          text-wrap: balance;
        }
        .sun-line {
          display: block;
        }
        .sun-foot strong {
          color: var(--green);
          font-weight: 400;
        }
      `}</style>
    </Section>
  );
}

/* ============================================================
   05 — MAVERICK DNA
   ============================================================ */
function DnaSection() {
  return (
    <Section id="dna" num={5} kicker="Maverick DNA">
      <h2 className="h-serif dna-h">Growth. Impact. Fun.</h2>
      <p className="dna-tag">Three pillars.</p>

      <div className="dna-triplet" aria-hidden="true">
        <span>Growth.</span><span>Impact.</span><span>Fun.</span>
      </div>

      <div className="dna-stage">
        <div className="dna-art">
          <img src="assets/dna-venn.jpg" alt="Maverick DNA Venn — Business Growth & Profits, Impact & Giving Forward, Entrepreneurial Lifestyle, with eye at center." className="dna-venn-img" />
        </div>
      </div>

      <div className="dna-captions">
        <div className="dna-cap" style={{'--c':'#7bb02b'}}>
          <div className="dna-cap-dot" />
          <h4 className="dna-cap-h" style={{color:'var(--green)'}}>Growth.</h4>
          <p className="dna-cap-p">Evolutionary and transformative growth. Surrounded by founders building bigger futures than their pasts.</p>
        </div>
        <div className="dna-cap" style={{'--c':'#c490e0'}}>
          <div className="dna-cap-dot" />
          <h4 className="dna-cap-h" style={{color:'#c490e0'}}>Impact.</h4>
          <p className="dna-cap-p">$3.3M+ raised for cause partners. 10% of dues fund impact projects worldwide. Mentorship of young entrepreneurs.</p>
        </div>
        <div className="dna-cap" style={{'--c':'#f0c040'}}>
          <div className="dna-cap-dot" />
          <h4 className="dna-cap-h" style={{color:'#f0c040'}}>Fun.</h4>
          <p className="dna-cap-p">Maverick magic, mischief, and once-in-a-lifetime experiences. Because if you're not having fun, what's the point of any of it?</p>
        </div>
      </div>

      <style>{`
        .dna-h {
          font-size: clamp(40px, 6.4vw, 76px);
          line-height: 1.02;
          letter-spacing: -0.018em;
          color: var(--ink);
        }
        .dna-tag {
          margin-top: 16px;
          font-family: var(--serif);
          font-style: italic;
          font-size: clamp(18px, 2.2vw, 22px);
          color: var(--ink-mute);
        }
        .dna-triplet { display: none; }

        .dna-stage {
          margin: 72px 0 56px;
          display: flex;
          justify-content: center;
        }
        .dna-art {
          position: relative;
          width: 100%;
          max-width: 560px;
          aspect-ratio: 1 / 1;
          background: #f3ead6;
          border-radius: 4px;
          padding: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 30px 80px -30px rgba(151,196,89,0.18), 0 0 0 1px var(--rule);
        }
        .dna-art::before {
          content: "Brand canon";
          position: absolute;
          top: 12px; left: 16px;
          font-family: var(--sans);
          font-size: 9px;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          color: var(--ink-faint);
        }
        .dna-venn-img {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
        }

        .dna-captions {
          display: grid;
          grid-template-columns: 1fr;
          gap: 32px;
          margin-top: 24px;
        }
        @media (min-width: 720px) {
          .dna-captions { grid-template-columns: repeat(3, 1fr); gap: 40px; }
        }
        .dna-cap {
          padding-top: 18px;
          border-top: 1px solid var(--rule);
          position: relative;
        }
        .dna-cap-dot {
          width: 10px; height: 10px;
          background: var(--c);
          border-radius: 50%;
          margin-bottom: 14px;
        }
        .dna-cap-h {
          font-family: var(--serif);
          font-style: italic;
          font-size: 26px;
          margin-bottom: 8px;
          color: var(--ink);
        }
        .dna-cap-p {
          font-family: var(--serif);
          color: var(--ink-2);
          font-size: 17px;
          line-height: 1.5;
        }
      `}</style>
    </Section>
  );
}

/* ============================================================
   06 — EIGHTEEN+ YEARS
   ============================================================ */
function EighteenSection({ photoDensity = 'medium' }) {
  // Mosaic shapes match the wireframe: 3x2, 2x2, 1x2, 2x1 tiles
  const shapesByDensity = {
    sparse: [
      { c: 3, r: 2, label: 'Hero retreat' },
      { c: 3, r: 2, label: 'Necker' },
      { c: 2, r: 2, label: 'Antarctica' },
      { c: 2, r: 2, label: 'Atlanta' },
      { c: 2, r: 2, label: 'Family group' },
    ],
    medium: [
      { c: 3, r: 2, label: 'Hero retreat' },
      { c: 2, r: 2, label: 'Necker' },
      { c: 1, r: 2, label: 'Portrait' },
      { c: 2, r: 1, label: 'Antarctica' },
      { c: 2, r: 1, label: 'Atlanta' },
      { c: 2, r: 1, label: 'Vermont' },
      { c: 2, r: 2, label: 'Summit' },
      { c: 2, r: 2, label: 'Green couch' },
      { c: 2, r: 2, label: 'Family group' },
    ],
    dense: [
      { c: 3, r: 2, label: 'Hero retreat' },
      { c: 2, r: 2, label: 'Necker' },
      { c: 1, r: 2, label: 'Portrait' },
      { c: 2, r: 1, label: 'Antarctica' },
      { c: 2, r: 1, label: 'Atlanta' },
      { c: 2, r: 1, label: 'Vermont' },
      { c: 2, r: 2, label: 'Summit' },
      { c: 2, r: 2, label: 'Green couch' },
      { c: 2, r: 2, label: 'Family group' },
      { c: 2, r: 1, label: 'Ceremony' },
      { c: 2, r: 1, label: 'Branson' },
      { c: 2, r: 2, label: 'Cousteau' },
    ],
  };
  const shapes = shapesByDensity[photoDensity] || shapesByDensity.medium;

  const stories = [
    {
      lead: <>Mentoring the women who won <strong>Sara Blakely's</strong> $250K grant in Atlanta.</>,
      meta: '— Maverick Impact Day, with the Sara Blakely Foundation & the Center for Civic Innovation',
      body: ['Mavericks gathered in Atlanta to brainstorm Evolved Enterprise models with the female social entrepreneurs selected by the Sara Blakely Foundation. The Foundation funded the $250,000 in grants. Mavericks went to work brainstorming, visioning and mentoring to help the winners scale.'],
    },
    {
      lead: <>Saving a Pearl Harbor survivor and turning it into a reef with <strong>Sir Richard Branson</strong>.</>,
      meta: '— Necker Island, with Virgin Unite',
      body: [
        'Each year, Mavericks brainstorm with Sir Richard on Necker for Virgin Unite, his family\'s charitable foundation. One year, the question was: how do you take a decommissioned WWII Navy ship and turn it into a self-sustaining impact project?',
        'We saved the YO-44, one of the last five ships to survive Pearl Harbor, from the scrap heap. Today she\'s an artificial reef and dive site rehabilitating overfished marine populations off the BVI coast. Income for local dive operators. A research site for marine scientists. A stewardship program for BVI kids. And a breathtaking sculpture on the ocean floor.',
      ],
    },
    {
      lead: <><em>Antarctica.</em> Working on krill overfishing at the bottom of the world with <strong>Philippe &amp; Ashlan Cousteau</strong>.</>,
      meta: '— In support of Ocean Unite\'s 30×30 initiative',
      body: [
        'Mavericks expeditioned to Antarctica with Philippe and Ashlan Cousteau, carrying his grandfather Jacques\'s mission forward as a partnership. On the ship: conversations about the food web, krill overfishing, and the fragility of the planet\'s last wild ocean.',
        'Then Mavericks went to work. Using the talent and resources on board, we designed a new product to help address the krill problem at scale. The expedition was in support of Ocean Unite\'s 30×30 initiative — to conserve 30% of the world\'s ocean by 2030, with a focus on preserving Antarctica.',
      ],
    },
  ];

  const luminaries = [
    { name: 'John Paul DeJoria', title: 'Patrón co-founder', moment: '80\'s road rally. Patrón shots (not at the same time).', size: 'lg' },
    { name: 'Russell Simmons', title: 'Hip-hop mogul', moment: 'Private yoga and meditation.', size: 'md' },
    { name: 'Chris Blackwell', title: 'Island Records founder', moment: 'Private farm. Untold stories about Marley and Bono.', size: 'lg' },
    { name: 'Tim Ferriss', title: '4-Hour Workweek author', moment: 'Evasive driving training.', size: 'md' },
    { name: 'Joe DeSena', title: 'Spartan Race founder', moment: 'A private Spartan Race on his Vermont farm.', size: 'md' },
    { name: 'Jesse James', title: 'Motorcycle mogul', moment: 'Dune buggy racing in Baja.', size: 'md' },
    { name: 'Tony Hawk', title: 'Skateboarding legend', moment: 'Zero-G flight.', size: 'md' },
  ];

  return (
    <Section id="years" num={6} kicker="Eighteen+ years">
      <div className="years-head">
        <h2 className="h-serif years-h">
          A Constellation of <em>Maverick Moments,<br/>Mischief, and Magic.</em>
        </h2>
        <p className="lede years-intro">
          18+ years of gatherings with the luminaries shaping the future — and the founders who built right alongside them.
        </p>
      </div>

      <div className="mosaic" data-density={photoDensity}>
        {shapes.map((s, i) => (
          <div key={i} className="mosaic-tile" style={{ gridColumn: `span ${s.c}`, gridRow: `span ${s.r}` }}>
            <Placeholder label={s.label} sub="Photo" />
          </div>
        ))}
      </div>

      <h3 className="stories-h">A few of the stories.</h3>
      <div className="flagships">
        {stories.map((f, i) => (
          <article key={i} className="story-item">
            <p className="story-line">{f.lead}</p>
            <p className="story-meta">{f.meta}</p>
            {f.body.map((b, j) => <p key={j} className="story-body">{b}</p>)}
          </article>
        ))}
      </div>

      <div className="lum-block">
        <div className="lum-head">
          <div>
            <h3 className="h-serif lum-h">A few more Maverick luminaries.</h3>
            <p className="lum-h-sub">Definitely not keynotes.</p>
          </div>
          <div className="lum-legend">
            <span className="lum-legend-dot" aria-hidden="true" />
            <span>Hover a card for the moment.</span>
          </div>
        </div>

        <div className="lum-rail" role="list">
          {luminaries.map((l, i) => (
            <article key={l.name} className="lum-tile" role="listitem">
              <div className="lum-tile-top">
                <span className="lum-idx">№ {String(i + 1).padStart(2, '0')}</span>
                <span className="lum-tick" aria-hidden="true" />
              </div>
              <h4 className="lum-name">{l.name}</h4>
              <p className="lum-title">{l.title}</p>
              <div className="lum-moment-wrap">
                <span className="lum-moment-label">The moment ⟶</span>
                <p className="lum-moment">{l.moment}</p>
              </div>
            </article>
          ))}
        </div>
      </div>

      <div className="stat-strip">
        <div className="stat">
          <div className="stat-num h-serif">18+</div>
          <div className="stat-label">Years gathering Mavericks</div>
        </div>
        <div className="stat">
          <div className="stat-num h-serif">$3.3M+</div>
          <div className="stat-label">Raised for cause partners</div>
        </div>
        <div className="stat">
          <div className="stat-num h-serif">∞</div>
          <div className="stat-label">Once-in-a-lifetime moments</div>
        </div>
      </div>

      <style>{`
        .years-head { max-width: 880px; }
        .years-h {
          font-size: clamp(36px, 5.6vw, 64px);
          line-height: 1.06;
          letter-spacing: -0.015em;
        }
        .years-h em { font-style: italic; color: var(--green); }
        .years-intro {
          margin-top: 20px;
          font-style: italic;
          color: var(--ink-2);
          max-width: 56ch;
        }
        .mosaic {
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          grid-auto-rows: 60px;
          gap: 8px;
          margin: 64px 0 80px;
        }
        @media (min-width: 720px) {
          .mosaic { grid-template-columns: repeat(8, 1fr); grid-auto-rows: 80px; gap: 10px; }
        }
        @media (min-width: 1024px) {
          .mosaic { grid-template-columns: repeat(10, 1fr); grid-auto-rows: 92px; gap: 12px; }
        }
        .mosaic-tile { min-height: 0; }
        .mosaic-tile .ph { width: 100%; height: 100%; aspect-ratio: auto; }

        .stories-h {
          font-family: var(--serif);
          font-style: italic;
          font-size: clamp(22px, 3vw, 28px);
          color: var(--ink);
          margin-bottom: 28px;
          padding-top: 20px;
          border-top: 1px solid var(--rule);
        }
        .flagships {
          display: grid;
          grid-template-columns: 1fr;
          gap: 28px;
        }
        @media (min-width: 900px) {
          .flagships { grid-template-columns: repeat(3, 1fr); gap: 40px; }
        }
        .story-item { padding: 8px 0; }
        .story-line {
          font-family: var(--serif);
          font-size: clamp(17px, 2vw, 19px);
          line-height: 1.45;
          color: var(--ink);
          margin-bottom: 8px;
          text-wrap: pretty;
        }
        .story-line strong { color: var(--green); font-weight: 400; }
        .story-line em { color: var(--green); font-style: italic; }
        .story-meta {
          font-family: var(--serif);
          font-style: italic;
          font-size: 12px;
          color: var(--ink-faint);
          letter-spacing: 0.04em;
          margin-bottom: 12px;
        }
        .story-body {
          font-family: var(--serif);
          font-size: 14px;
          line-height: 1.6;
          color: var(--ink-2);
          margin-bottom: 10px;
          text-wrap: pretty;
        }

        .lum-block { margin-top: 96px; }
        .lum-head {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          gap: 24px;
          margin-bottom: 32px;
          flex-wrap: wrap;
        }
        .lum-h {
          font-size: clamp(28px, 4vw, 40px);
          line-height: 1.15;
          color: var(--ink);
          margin-bottom: 4px;
        }
        .lum-h-sub {
          font-family: var(--serif);
          font-style: italic;
          color: var(--green);
          font-size: clamp(18px, 2.2vw, 22px);
        }
        .lum-legend {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-family: var(--serif);
          font-size: 11px;
          letter-spacing: 0.13em;
          text-transform: uppercase;
          color: var(--ink-faint);
        }
        .lum-legend-dot {
          width: 6px; height: 6px;
          border-radius: 999px;
          background: var(--green);
        }

        .lum-rail {
          display: grid;
          grid-template-columns: repeat(7, minmax(0, 1fr));
          gap: 0;
          border-top: 1px solid var(--ink);
          border-bottom: 1px solid var(--rule);
        }
        @media (max-width: 1100px) {
          .lum-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        }
        @media (max-width: 640px) {
          .lum-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }

        .lum-tile {
          position: relative;
          padding: 18px 16px 22px;
          border-right: 1px solid var(--rule);
          background: var(--paper);
          transition: background 240ms ease;
          display: flex;
          flex-direction: column;
          min-height: 240px;
        }
        .lum-tile:last-child { border-right: none; }
        @media (max-width: 1100px) {
          .lum-tile:nth-child(4n) { border-right: none; }
          .lum-tile { border-bottom: 1px solid var(--rule); }
          .lum-tile:nth-last-child(-n+4) { border-bottom: none; }
        }
        @media (max-width: 640px) {
          .lum-tile { border-right: 1px solid var(--rule) !important; min-height: 200px; }
          .lum-tile:nth-child(2n) { border-right: none !important; }
          .lum-tile:nth-last-child(-n+1) { border-bottom: none; }
        }
        .lum-tile:hover { background: rgba(28,89,55,0.04); }
        .lum-tile:hover .lum-tick { width: 100%; }
        .lum-tile:hover .lum-moment-wrap { opacity: 1; transform: translateY(0); }

        .lum-tile-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          margin-bottom: 18px;
        }
        .lum-idx {
          font-family: var(--serif);
          font-size: 11px;
          letter-spacing: 0.13em;
          text-transform: uppercase;
          color: var(--ink-faint);
        }
        .lum-tick {
          flex: 0 0 24px;
          width: 24px;
          height: 1px;
          background: var(--green);
          transition: width 320ms ease;
        }

        .lum-name {
          font-family: var(--serif);
          color: var(--ink);
          font-size: clamp(17px, 1.6vw, 20px);
          line-height: 1.15;
          margin-bottom: 6px;
          text-wrap: balance;
        }
        .lum-title {
          font-family: var(--serif);
          font-size: 11px;
          letter-spacing: 0.13em;
          text-transform: uppercase;
          color: var(--ink-faint);
          margin-bottom: 12px;
        }
        .lum-moment-wrap {
          margin-top: auto;
          padding-top: 12px;
          border-top: 1px dashed var(--rule);
          opacity: 0.55;
          transform: translateY(2px);
          transition: opacity 240ms ease, transform 240ms ease;
        }
        .lum-moment-label {
          display: block;
          font-family: var(--serif);
          font-size: 10px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--ink-faint);
          margin-bottom: 4px;
        }
        .lum-moment {
          font-family: var(--serif);
          font-style: italic;
          font-size: 13px;
          line-height: 1.45;
          color: var(--green);
        }

        .stat-strip {
          margin-top: 96px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
          padding: 36px 0;
          border-top: 1px solid var(--rule);
          border-bottom: 1px solid var(--rule);
        }
        .stat { text-align: center; }
        .stat-num {
          font-size: clamp(40px, 6vw, 64px);
          line-height: 1;
          color: var(--green);
          font-style: italic;
        }
        .stat-label {
          margin-top: 12px;
          font-family: var(--serif);
          font-style: italic;
          font-size: 13px;
          color: var(--ink-2);
        }
      `}</style>
    </Section>
  );
}

Object.assign(window, { SunSection, DnaSection, EighteenSection });