// AboutSection.jsx — Editorial bios, no card fills

const AboutSection = ({ tweaks }) => {
  return (
    <section style={{ background: '#fafaf7', padding: '64px 32px 0' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        {/* Header */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 80, alignItems: 'end', marginBottom: 36
        }} className="two-col">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div className="eyebrow tag">Who we are</div>
            <h2 style={{
              fontSize: 'clamp(40px, 5.4vw, 80px)',
              margin: 0, maxWidth: 480
            }}>The philosophy and humans behind <em>coLiberate</em>.</h2>
          </div>
          <p style={{
            fontFamily: "'Geist', sans-serif",
            fontSize: 19, color: '#2a2a26', lineHeight: 1.6,
            fontWeight: 400, maxWidth: 500, paddingBottom: 6
          }}>We're here to help you grow a business that not only creates clients but gives you the freedom to live the life you want. Our mission is our name.</p>
        </div>

        {/* Note on the name — editorial callout (moved up under philosophy intro) */}
        <div className="name-callout" style={{
          position: 'relative',
          background: '#1a1a1a',
          color: '#fafaf7',
          padding: '48px 48px',
          borderRadius: 4,
          marginBottom: 24,
          overflow: 'hidden',
          display: 'grid',
          gridTemplateColumns: '1fr 1.2fr',
          gap: 56,
          alignItems: 'start'
        }}>
          {/* Decorative oversized glyph */}
          <span aria-hidden="true" style={{
            position: 'absolute',
            right: -40, bottom: -120,
            fontFamily: "'Instrument Serif', serif",
            fontStyle: 'italic',
            fontSize: 520,
            color: 'rgba(250,247,247,0.04)',
            lineHeight: 1,
            pointerEvents: 'none',
            userSelect: 'none'
          }}>co</span>

          {/* Left: eyebrow + word */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, position: 'relative' }}>
            <div className="eyebrow tag" style={{
              background: 'rgba(212, 176, 95, 0.20)',
              color: '#d4b05f'
            }}>A note on the name</div>
            <div style={{
              fontFamily: "'Instrument Serif', serif",
              fontStyle: 'italic',
              fontSize: 'clamp(48px, 5.6vw, 84px)',
              color: '#fafaf7',
              letterSpacing: '-0.02em',
              lineHeight: 1,
              fontWeight: 400,
              marginTop: 8
            }}>co·Li·ber·ate</div>
            <div style={{
              fontFamily: "'Fraunces', serif",
              fontStyle: 'italic', fontWeight: 300,
              fontSize: 15, color: 'rgba(250,247,247,0.55)'
            }}>/ kəˌlɪbəˈreɪt /  verb</div>
          </div>

          {/* Right: definitions */}
          <div style={{ display: 'flex', flexDirection: 'column', position: 'relative' }}>
            {[
            { n: '1', text: <>A fusion of <em style={{ fontFamily: "'Instrument Serif', serif", color: '#d4b05f' }}>co-create</em> and <em style={{ fontFamily: "'Instrument Serif', serif", color: '#d4b05f' }}>liberate</em>.</> },
            { n: '2', text: 'To jointly engage in the act of setting free.' },
            { n: '3', text: 'The ongoing process of creating, transforming, or transitioning toward freedom, independence, and empowerment.' }].
            map((item, i) =>
            <div key={item.n} style={{
              display: 'grid',
              gridTemplateColumns: '36px 1fr',
              gap: 20, alignItems: 'baseline',
              padding: '20px 0',
              borderTop: i === 0 ? 'none' : '1px solid rgba(250,247,247,0.12)'
            }}>
                <span style={{
                fontFamily: "'Instrument Serif', serif",
                fontStyle: 'italic',
                fontSize: 22, color: 'rgba(250,247,247,0.45)'
              }}>{item.n}</span>
                <p style={{
                fontFamily: "'Geist', sans-serif",
                fontSize: 17, color: '#fafaf7',
                lineHeight: 1.55, margin: 0, fontWeight: 300
              }}>{item.text}</p>
              </div>
            )}
          </div>
        </div>

        {/* Divider line above partners eyebrow */}
        <div style={{ borderTop: '1px solid rgba(26,26,26,0.18)' }}></div>

        {/* Your partners — eyebrow above bios */}
        <div style={{ marginTop: 64, marginBottom: 0 }}>
          <div className="eyebrow tag">YOUR PRIMARY PARTNERS</div>
        </div>

        {/* Diara — editorial spread */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 2fr',
          gap: 56, padding: '20px 0 28px',
          borderTop: 'none'
        }} className="about-grid">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div style={{ width: '100%', aspectRatio: '4/5' }}>
              <image-slot
                id="about-diara"
                shape="rounded"
                radius="8"
                src="assets/people/Diara.png?v=2"
                placeholder="Drop Diara's photo"
                style={{
                  display: 'block',
                  width: '100%',
                  height: '100%',
                  background: '#ecebe5'
                }} />
              
            </div>
            <div>
              <div className="eyebrow">Founder + CEO</div>
              <div style={{
                fontFamily: "'Fraunces', serif",
                fontVariationSettings: "'opsz' 144",
                fontSize: 32, color: '#1a1a1a',
                letterSpacing: '-0.025em', marginTop: 8,
                lineHeight: 1.05, fontWeight: 500
              }}>Diara Parker</div>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
            <p style={{
              fontFamily: "'Geist', sans-serif",
              fontSize: 19, color: '#1a1a1a', lineHeight: 1.6,
              fontWeight: 300, margin: 0, maxWidth: 640
            }}>Diara spent most of her career consulting U.S. companies on vision and strategy across people, culture, and growth, as well as leading community engagement projects on a city, state, and national level. After a major burnout in 2017, she rebuilt everything around a different premise and never looked back.

Today, she helps solo consultants and boutique consulting firms create clients on LinkedIn and grow businesses that put their life first. It’s the work she wishes someone had handed her years ago, and the timeline below is why:</p>

            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>A short timeline</div>
              {[
              { year: '2017', text: 'Began her 9-5 consulting career doing statewide policy and systems change. Hit maaajor burnout.' },
              { year: '2019', text: 'Launched her solo consulting business. Hit $10K months in year 1.' },
              { year: '2020', text: 'Became employee #1 at a consulting startup as COO. Co-led a 2x revenue increase + 3x team expansion. Was invited to begin the transition into the CEO role, but realized it wasn\'t what she wanted.' },
              { year: '2022', text: 'Ditched the traditional life setup and decided to travel the world. Hit 9 countries in 1 year.' },
              { year: '2022–2023', text: 'Went independent full time and grew to $20K months working ~20 hrs/week.' },
              { year: '2023–', text: 'Made it her mission to help other consultants do the same. She and her clients have used her life-first model to hit $30K+ months and generate (as of October 2025) $15.9M.' }].
              map((item, i) =>
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '120px 1fr', gap: 24,
                padding: '20px 0',
                borderTop: '1px solid rgba(26,26,26,0.08)'
              }}>
                  <span style={{
                  fontFamily: "'Fraunces', serif", fontStyle: 'italic',
                  fontSize: 16, color: '#9a9a93'
                }}>{item.year}</span>
                  <p style={{
                  fontFamily: "'Geist', sans-serif",
                  fontSize: 16, color: '#3a3a36', lineHeight: 1.7,
                  fontWeight: 300, margin: 0
                }}>{item.text}</p>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Jan — editorial spread (image on top) */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 2fr',
          gap: 56, padding: '28px 0',
          borderTop: '1px solid rgba(26,26,26,0.18)',
          borderBottom: '1px solid rgba(26,26,26,0.18)'
        }} className="about-grid">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div style={{ width: '100%', aspectRatio: '4/5' }}>
              <image-slot
                id="about-jan"
                shape="rounded"
                radius="8"
                src="assets/people/Jan.jpg?v=3"
                placeholder="Drop Jan's photo"
                style={{
                  display: 'block',
                  width: '100%',
                  height: '100%',
                  background: '#ecebe5'
                }} />
              
            </div>
            <div>
              <div className="eyebrow">Success + Alignment Coach</div>
              <div style={{
                fontFamily: "'Fraunces', serif",
                fontVariationSettings: "'opsz' 144",
                fontSize: 32, color: '#1a1a1a',
                letterSpacing: '-0.025em', marginTop: 8,
                lineHeight: 1.05, fontWeight: 500
              }}>Jan Trautwein</div>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
            {[
            "Jan has never had a 9-5 job. After finishing his physics degree, he co-founded a social startup in Germany. It was aligned and fun, until it wasn't. That's when he started asking a question that changed his life: what if your internal state matters more than what you focus on?",
            "In 2018 he found coaching and committed to it fully. Since then he's worked with over 100 clients around the world, helping them build businesses that feel as good on the inside as they look on the outside. He specializes in helping people move through fear and into the clarity to pursue what they actually want.",
            "Jan practices what he preaches. He's learned from some of the best coaches in the world, done two Vipassana retreats, multiple plant medicine ceremonies, an 8-day darkness retreat, and invested in other experiences that have helped him live the life he wants while running a business he actually loves.",
            "He's dedicated his life to helping his clients do the same and coLiberate is lucky to have him on the team."].
            map((para, i) =>
            <p key={i} style={{
              fontFamily: "'Geist', sans-serif",
              fontSize: 19, color: '#1a1a1a', lineHeight: 1.6,
              fontWeight: 300, margin: 0, maxWidth: 640
            }}>{para}</p>
            )}
          </div>
        </div>

      </div>
    </section>);

};

Object.assign(window, { AboutSection });