// Founder section — text on left, image placeholder on right.
const Founder = () => {
  const [revealRef, shown] = useReveal(0.1);
  const isMobile = useResponsive();
  return (
    <Section eyebrow="About" style={{ background: '#0a0a0c', borderTop: '1px solid #18181B', borderBottom: '1px solid #18181B' }}>
      <div ref={revealRef} style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>
        <div className="bf-founder-grid" style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.1fr', gap: isMobile ? 40 : 60, alignItems: 'flex-start' }}>
          <div style={{
            opacity: shown ? 1 : 0,
            transform: shown ? 'translateX(0)' : 'translateX(-12px)',
            transition: 'opacity 600ms cubic-bezier(0.2,0,0,1), transform 600ms cubic-bezier(0.2,0,0,1)',
          }}>
            <Eyebrow color="#BF94FF">Bridging the gap</Eyebrow>
            <h2 className="bf-section-h2" style={{
              fontSize: isMobile ? 28 : 50, fontWeight: 800, letterSpacing: '-0.025em',
              color: '#EFEFF1', margin: '0 0 24px', lineHeight: 1.1,
            }}>
              Customer insights meet cutting-edge AI.
            </h2>
            <p style={{ fontSize: 18.75, color: '#ADADB8', lineHeight: 1.65, margin: '0 0 16px' }}>
              Ali Awad is an AI entrepreneur and enthusiast with a deep, PhD-level academic
              background in AI-based computer vision. He has published research, released datasets,
              and spent years turning hard AI problems — like image enhancement and object detection —
              into tools that work in the real world.
            </p>
            <p style={{ fontSize: 18.75, color: '#ADADB8', lineHeight: 1.65, margin: '0 0 32px' }}>
              At BlinkFree, Ali leads product and engineering. From conversations with users to
              rapid prototyping and lightning-fast deployments, the mission is clear: transform
              ordinary CCTV systems into an intelligent security assistant that sees, analyzes, and
              never blinks.
            </p>
            <blockquote style={{
              margin: '0', padding: '20px 24px',
              background: 'rgba(145,70,255,0.06)',
              borderLeft: '3px solid #9146FF',
              borderRadius: '0 6px 6px 0',
              fontSize: 18.75, lineHeight: 1.5, color: '#EFEFF1', fontStyle: 'normal',
            }}>
              "Leadership centers on clarity, craftsmanship, and speed. Building tight-knit teams
              that stay close to customers, learn relentlessly, and deliver products that raise the bar."
            </blockquote>
          </div>

          {/* Right: image with caption */}
          <div style={{
            opacity: shown ? 1 : 0,
            transform: shown ? 'translateX(0)' : 'translateX(12px)',
            transition: 'opacity 600ms cubic-bezier(0.2,0,0,1) 120ms, transform 600ms cubic-bezier(0.2,0,0,1) 120ms',
          }}>
            <img src="uploads/Ali_Awad.jpg" alt="Ali Awad, Founder & CEO" style={{
              width: '100%', borderRadius: 6, border: '1px solid #2F2F35', display: 'block',
            }} />
            <div style={{ marginTop: 16, textAlign: 'center' }}>
              <div style={{ fontSize: 16.25, fontWeight: 700, color: '#EFEFF1' }}>Ali Awad</div>
              <div style={{ fontSize: 13, color: '#ADADB8' }}>Founder & CEO</div>
            </div>
          </div>
        </div>

        {/* Three value boxes spanning full width below */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {[
            { t: 'Clarity', d: 'We cut through the noise to deliver actionable security insights that matter.' },
            { t: 'Craftsmanship', d: 'We take pride in robust, reliable software that handles complex AI tasks elegantly.' },
            { t: 'Speed', d: 'Rapid deployment and real-time analysis are at the core of our technology stack.' },
          ].map((v, i) => (
            <div key={v.t} style={{
              padding: 20, background: '#18181B', borderRadius: 6, border: '1px solid #2F2F35',
              opacity: shown ? 1 : 0,
              transform: shown ? 'translateY(0)' : 'translateY(8px)',
              transition: `opacity 500ms cubic-bezier(0.2,0,0,1) ${300 + i * 100}ms, transform 500ms cubic-bezier(0.2,0,0,1) ${300 + i * 100}ms`,
            }}>
              <div style={{
                fontSize: 13.75, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
                color: '#9146FF', marginBottom: 8,
              }}>{v.t}</div>
              <div style={{ fontSize: 16.25, color: '#ADADB8', lineHeight: 1.55 }}>{v.d}</div>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
};

window.Founder = Founder;