// Founder section — Nicole Holmes (@sobergul)

const { useState: useFSS, useEffect: useFSE } = React;
function useWindowWidth() {
  const [w, setW] = useFSS(window.innerWidth);
  useFSE(() => {
    const h = () => setW(window.innerWidth);
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);
  return w;
}

function FounderSection() {
  const L = window.LandingTokens;
  const w = useWindowWidth();
  const mob = w < 768;
  const photoSize = mob ? 240 : 380;

  return (
    <section style={{
      background: L.bg,
      padding: mob ? '80px 24px 80px' : '140px 40px',
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: mob ? '1fr' : '1fr 1fr',
        gap: mob ? 52 : 100,
        alignItems: 'center',
      }}>

        {/* Photo column */}
        <div style={{ display: 'flex', justifyContent: mob ? 'center' : 'flex-start' }}>
          <div style={{ position: 'relative', width: photoSize, flexShrink: 0 }}>
            {/* Decorative rings */}
            <div style={{
              position: 'absolute',
              top: -32, left: -32,
              width: photoSize + 64, height: photoSize + 64,
              borderRadius: '50%',
              border: '1px solid rgba(21,71,52,0.12)',
            }}/>
            <div style={{
              position: 'absolute',
              top: -16, left: -16,
              width: photoSize + 32, height: photoSize + 32,
              borderRadius: '50%',
              border: '1px solid rgba(21,71,52,0.18)',
            }}/>

            {/* Portrait */}
            <div style={{
              width: photoSize, height: photoSize,
              borderRadius: '50%',
              overflow: 'hidden',
              position: 'relative',
              boxShadow: '0 32px 64px -16px rgba(21,71,52,0.2)',
            }}>
              <img
                src="assets/nicole.jpeg"
                alt="Nicole Holmes — founder of Sobella"
                style={{
                  width: '100%', height: '100%',
                  objectFit: 'cover',
                  objectPosition: 'center top',
                }}
              />
            </div>

            {/* Floating badge */}
            <div style={{
              position: 'absolute',
              bottom: 16, right: mob ? -16 : 0,
              background: L.primary,
              color: '#fff',
              borderRadius: 20,
              padding: mob ? '10px 14px' : '14px 20px',
              boxShadow: '0 12px 32px -8px rgba(21,71,52,0.35)',
              maxWidth: mob ? 160 : 200,
            }}>
              <div style={{
                fontWeight: 900, fontSize: 9, letterSpacing: '0.3em',
                textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)',
                marginBottom: 4,
              }}>@sobergul</div>
              <div style={{ fontWeight: 700, fontSize: mob ? 11 : 14, lineHeight: 1.3 }}>
                2.5 years sober · mum of two
              </div>
            </div>
          </div>
        </div>

        {/* Copy column */}
        <div>
          <span style={{
            fontWeight: 900, fontSize: 11, letterSpacing: '0.3em',
            textTransform: 'uppercase', color: L.fg3,
          }}>The person behind Sobella</span>

          <h2 style={{
            marginTop: 20, fontSize: mob ? 36 : 52, fontWeight: 700,
            lineHeight: 1.06, letterSpacing: '-0.03em',
            color: L.charcoal, textWrap: 'balance',
          }}>
            Built by someone<br/>
            <span style={{ color: L.primary }}>who's lived it.</span>
          </h2>

          <p style={{
            marginTop: 28, fontSize: mob ? 16 : 18, lineHeight: 1.65,
            color: L.fg2, maxWidth: 500,
          }}>
            Nicole Holmes is a sober influencer and mum who quit drinking to be fully present for her kids. She didn't find an app that felt like her — quiet, honest, without the shame or the streak-chasing — so she built one.
          </p>

          <p style={{
            marginTop: 16, fontSize: mob ? 16 : 18, lineHeight: 1.65,
            color: L.fg2, maxWidth: 500,
          }}>
            Every screen in Sobella was shaped by what she actually needed at 9pm on a hard Tuesday. Real tools, real words, built around real life.
          </p>

          {/* Pull quote */}
          <div style={{
            marginTop: 36,
            borderLeft: `3px solid ${L.primary}`,
            paddingLeft: 24,
          }}>
            <p style={{
              fontSize: mob ? 17 : 20, fontWeight: 500, lineHeight: 1.4,
              color: L.charcoal, letterSpacing: '-0.01em',
              fontStyle: 'italic',
            }}>
              "I wanted my kids to see a version of me I was proud of. That was enough."
            </p>
            <div style={{
              marginTop: 12, fontWeight: 700, fontSize: 13,
              color: L.primary, letterSpacing: '0.02em',
            }}>Nicole Holmes · Founder</div>
          </div>

          {/* Social links */}
          <div style={{
            marginTop: 40, display: 'flex', gap: 12,
            flexWrap: 'wrap',
            flexDirection: mob ? 'column' : 'row',
          }}>
            <a
              href="https://www.tiktok.com/@sobergul"
              target="_blank"
              rel="noopener noreferrer"
              style={{
                display: 'flex', alignItems: 'center', gap: 8,
                background: L.charcoal, color: '#fff',
                borderRadius: 9999, padding: '12px 20px',
                textDecoration: 'none', fontWeight: 700, fontSize: 14,
                justifyContent: mob ? 'center' : 'flex-start',
              }}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.3 6.3 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.22 8.22 0 004.8 1.54V6.79a4.85 4.85 0 01-1.03-.1z"/>
              </svg>
              TikTok · @sobergul
            </a>

            <a
              href="https://www.instagram.com/sobergul/"
              target="_blank"
              rel="noopener noreferrer"
              style={{
                display: 'flex', alignItems: 'center', gap: 8,
                background: 'transparent', color: L.charcoal,
                border: `1.5px solid rgba(31,30,29,0.2)`,
                borderRadius: 9999, padding: '11.5px 20px',
                textDecoration: 'none', fontWeight: 700, fontSize: 14,
                justifyContent: mob ? 'center' : 'flex-start',
              }}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
              </svg>
              Instagram · @sobergul
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.LandingFounder = FounderSection;