/* ============================================================
   Founder — dark band between "How we work" and Services.
   Two columns: founder photo (left) + story (right). Stacks
   on mobile. Last line is a distinct accent-bordered pull-quote.
   ============================================================ */

const FOUNDER_STORY = [
  "I'm Manav, founder of 3point.",
  "I started 3point because I kept seeing the same pattern: businesses spending real money on marketing without a clear strategy behind it. Content was being created, ads were being launched, but there was little research, testing, or measurement guiding the decisions.",
  "Coming from a software engineering background, I approach marketing as a system. Every campaign starts with understanding the customer, identifying opportunities, testing ideas, and measuring results. The goal isn't simply to create more content—it's to create marketing that drives business growth.",
  "I lead every strategy personally and work alongside a dedicated production team, including video and content specialists, to ensure quality, consistency, and fast execution.",
];

function Founder() {
  const { Reveal, Container } = window;
  const { Eyebrow } = window.EditorialCSDesignSystem_8c71a4;
  return (
    <section id="founder" data-screen-label="Founder" style={{ background: 'var(--ink)', color: 'var(--inverse-ink)' }}>
      <Container style={{ padding: 'var(--space-section) clamp(20px,5vw,40px)' }}>
        <div className="founder-grid" style={{
          display: 'grid', gridTemplateColumns: '0.85fr 1.15fr',
          gap: 'clamp(32px,5vw,72px)', alignItems: 'center',
        }}>
          {/* Photo */}
          <Reveal y={24}>
            <div style={{
              padding: 6, borderRadius: 'calc(var(--radius-xl) + 6px)',
              border: '1.5px solid color-mix(in srgb, var(--accent) 60%, transparent)',
            }}>
              <image-slot id="founder-photo" radius="16"
                src="assests/founder.jpg.png"
                placeholder="Add founder photo"
                style={{ display: 'block', width: '100%', height: 'auto', aspectRatio: '4 / 5' }}></image-slot>
            </div>
          </Reveal>

          {/* Story */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-lg)' }}>
            <Reveal><Eyebrow dot tone="fin" style={{ color: 'var(--inverse-ink-muted)' }}>The person behind 3point</Eyebrow></Reveal>
            {FOUNDER_STORY.map((p, i) => (
              <Reveal key={i} delay={70 + i * 50} as="p"
                className={i === 0 ? 't-subhead' : 't-body'}
                style={{
                  margin: 0,
                  color: i === 0 ? 'var(--inverse-ink)' : 'var(--inverse-ink-muted)',
                  fontWeight: i === 0 ? 500 : 400,
                  textWrap: 'pretty',
                }}>
                {p}
              </Reveal>
            ))}
            <Reveal delay={70 + FOUNDER_STORY.length * 50}>
              <blockquote style={{
                margin: 'var(--space-sm) 0 0', paddingLeft: 'var(--space-lg)',
                borderLeft: '3px solid var(--accent)',
              }}>
                <p className="t-body-lg" style={{ margin: 0, color: 'var(--inverse-ink)', fontWeight: 500, textWrap: 'pretty' }}>
                  "When you message 3point, you're talking directly to me. The person responsible for your strategy is the same person you can call."
                </p>
              </blockquote>
            </Reveal>
          </div>
        </div>
      </Container>
    </section>
  );
}

window.Founder = Founder;