// All section blocks used across pages — minimal aesthetic, restrained type

const { Container, Eyebrow, Btn, Placeholder, Tag, Reveal, RevealWords } = window.Primitives;
const { ArrowRight, Plus, SLogoImg } = window.Icons;

// ─────────── HERO (home) — luxury slideshow ───────────
const HERO_SLIDES = [
{ src: 'https://images.unsplash.com/photo-1567157577867-05ccb1388e66?w=2400&q=85', label: 'Urban India · dusk' },
{ src: 'https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=2400&q=85', label: 'Creator space' },
{ src: 'https://images.unsplash.com/photo-1582719508461-905c673771fd?w=2400&q=85', label: 'Conversations · India' },
{ src: 'https://images.unsplash.com/photo-1611605698335-8b1569810432?w=2400&q=85', label: 'Mumbai · everyday energy' },
{ src: 'https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=2400&q=85', label: 'Community energy' },
{ src: 'https://images.unsplash.com/photo-1483985988355-763728e1935b?w=2400&q=85', label: 'In conversation' }];


const Hero = () => {
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    // Preload only the next slide ahead of time; the first one renders immediately.
    const t = setInterval(() => setActive((a) => (a + 1) % HERO_SLIDES.length), 5500);
    return () => clearInterval(t);
  }, []);

  return (
    <section id="top" style={{
      position: 'relative', overflow: 'hidden',
      minHeight: '100vh',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      paddingTop: 120, paddingBottom: 120,
      color: 'var(--fg)',
      textAlign: 'center'
    }}>
      <div style={{ position: 'absolute', inset: 0, zIndex: 0 }}>
        {HERO_SLIDES.map((s, i) =>
        <div key={i} style={{
          position: 'absolute', inset: 0,
          backgroundImage: `url(${s.src})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          opacity: i === active ? 1 : 0,
          transition: 'opacity 2.2s cubic-bezier(.4,0,.2,1), transform 9s linear',
          transform: i === active ? 'scale(1.08)' : 'scale(1.0)',
          filter: 'contrast(1.06) saturate(0.78) brightness(0.72)',
          willChange: 'transform, opacity'
        }} />
        )}
        {/* Cinematic gradient: dark sky → mid-tone centre → deep base for type */}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(15,13,23,0.78) 0%, rgba(15,13,23,0.42) 30%, rgba(15,13,23,0.55) 60%, rgba(15,13,23,0.92) 88%, var(--bg) 100%)' }} />
        {/* Magenta + violet film wash */}
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 15% 110%, rgba(255,127,181,0.26) 0%, transparent 55%), radial-gradient(ellipse at 90% -8%, rgba(138,107,255,0.24) 0%, transparent 55%)', mixBlendMode: 'screen', pointerEvents: 'none' }} />
        {/* Vignette */}
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,0.65) 100%)', pointerEvents: 'none' }} />
        {/* Film grain */}
        <div style={{
          position: 'absolute', inset: 0, opacity: 0.16, mixBlendMode: 'overlay', pointerEvents: 'none',
          backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.65 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")`
        }} />
      </div>

      {/* Slide indicator removed per design */}

      <Container style={{ position: 'relative', zIndex: 2, width: '100%' }}>
        <h1 className="serif-display" style={{
          fontSize: 'clamp(52px, 7.8vw, 128px)',
          lineHeight: 1.0, letterSpacing: '-0.025em',
          margin: '0 auto 32px', fontWeight: 400,
          maxWidth: 1240,
          textShadow: '0 4px 30px rgba(0,0,0,0.45)'
        }}>
          <RevealWords gap={42}>Brands, in conversation</RevealWords>
          <br />
          <RevealWords delay={220} gap={42}>
            <span>with <span style={{ color: 'var(--pink)' }}>India</span>.<span className="caret" /></span>
          </RevealWords>
        </h1>

        <Reveal delay={460}>
          <p style={{
            fontSize: 'clamp(17px, 1.55vw, 22px)',
            lineHeight: 1.5, color: 'var(--fg-2)',
            margin: '0 auto 52px',
            maxWidth: 680,
            textShadow: '0 2px 16px rgba(0,0,0,0.5)'
          }}>
            Influencer marketing and strategic communication.
          </p>
        </Reveal>

        <Reveal delay={600}>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' }}>
            <Btn variant="ghost" size="lg" href="/experience">See Our Work</Btn>
            <Btn variant="ghost" size="lg" href="/contact">Get In Touch</Btn>
          </div>
        </Reveal>
      </Container>
    </section>);

};

// ─────────── CREDIBILITY BAR ───────────
// Count-up hook — animates a number from 0 → target when scrolled into view.
const useCountUp = (target, { duration = 1600, suffix = '+' } = {}) => {
  const ref = React.useRef(null);
  const [display, setDisplay] = React.useState('0');
  React.useEffect(() => {
    if (!ref.current) return;
    let raf;
    const node = ref.current;
    const fmt = (v) => {
      // big numbers: append 'M' suffix style if target was 100M
      if (target >= 1_000_000) return (v / 1_000_000).toFixed(0) + 'M' + suffix;
      return Math.round(v) + suffix;
    };
    const animate = () => {
      const start = performance.now();
      const tick = (now) => {
        const t = Math.min(1, (now - start) / duration);
        const eased = 1 - Math.pow(1 - t, 3);
        setDisplay(fmt(target * eased));
        if (t < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
    };
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {animate();io.disconnect();}
    }, { threshold: 0.4 });
    io.observe(node);
    return () => {io.disconnect();if (raf) cancelAnimationFrame(raf);};
  }, [target, duration, suffix]);
  return [ref, display];
};

const Stat = ({ index, total, value, target, suffix, label, detail, accent, barPct }) => {
  // If target is provided, use count-up; else render static value (e.g. "Mumbai")
  const [ref, counted] = target != null ? useCountUp(target, { suffix: suffix || '+' }) : [null, null];
  const accentColor = accent === 'indigo' ? 'var(--indigo)' : 'var(--pink)';
  return (
    <div style={{
      padding: '2px 26px 4px',
      borderLeft: index > 0 ? '1px solid var(--line)' : 'none',
      display: 'flex', flexDirection: 'column', gap: 12,
      position: 'relative'
    }}>
      {/* Top row: breathing pulse dot */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
        <span className="cred-pulse" style={{ background: accentColor, boxShadow: `0 0 10px ${accentColor}` }} />
      </div>

      {/* Micro accent bar — width hints at relative scale */}
      <span className="cred-bar" style={{
        width: `${barPct}%`,
        background: `linear-gradient(90deg, ${accentColor} 0%, transparent 100%)`
      }} />

      {/* The number */}
      <div
        ref={ref}
        className="serif-display"
        style={{
          fontSize: 'clamp(38px, 4vw, 52px)',
          lineHeight: 1,
          letterSpacing: '-0.025em',
          color: 'var(--fg)',
          fontVariantNumeric: 'tabular-nums',
          minHeight: 52
        }}>
        
        {target != null ? counted : value}
      </div>

      {/* Label + italic serif sub-detail */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 2 }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--fg-2)' }}>{label}</div>
        <div className="serif" style={{ fontSize: 13.5, color: 'var(--fg-3)', letterSpacing: '-0.005em' }}>{detail}</div>
      </div>
    </div>);

};

const Credibility = () => {
  const stats = [
  { target: 20, suffix: '+', label: 'Consumer brands', detail: 'creator-led work', accent: 'pink', barPct: 28 },
  { target: 100_000_000, suffix: '+', label: 'Audience reached', detail: 'through creator-led work', accent: 'indigo', barPct: 92 },
  { target: 5, suffix: '+', label: 'Years of practice', detail: 'in Indian consumer marketing', accent: 'pink', barPct: 18 }];


  // mobile marquee triple
  const mobileItems = [...stats, ...stats, ...stats];

  return (
    <section style={{
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
      background: 'var(--bg-2)',
      position: 'relative',
      overflow: 'hidden'
    }}>
      {/* Subtle radial accent in the background */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(ellipse at 12% 50%, rgba(138,107,255,0.08) 0%, transparent 55%), radial-gradient(ellipse at 88% 50%, rgba(255,127,181,0.07) 0%, transparent 55%)'
      }} />

      {/* Section eyebrow strip */}
      <Container style={{ paddingTop: 30, paddingBottom: 0, position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <span className="mono" style={{ fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>
            The shape of the work
          </span>
          <div style={{ flex: 1, height: 1, background: 'var(--line)' }} />
        </div>
      </Container>

      {/* Desktop grid */}
      <Container className="cred-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', padding: '40px 40px 40px', position: 'relative' }}>
        {stats.map((s, i) =>
        <Reveal key={i} delay={i * 90} kind="reveal">
            <Stat index={i} total={stats.length} {...s} />
          </Reveal>
        )}
      </Container>

      {/* Mobile auto-scrolling marquee — simplified card-style */}
      <div className="cred-marquee" style={{ display: 'none', padding: '24px 0 30px', overflow: 'hidden', position: 'relative' }}>
        <div className="marquee-track" style={{ gap: 0, animationDuration: '40s' }}>
          {mobileItems.map((s, i) => {
            const accentColor = s.accent === 'indigo' ? 'var(--indigo)' : 'var(--pink)';
            return (
              <div key={i} style={{
                flexShrink: 0, padding: '4px 26px',
                borderLeft: '1px solid var(--line)',
                display: 'flex', flexDirection: 'column', gap: 8, minWidth: 200
              }}>
                <span className="cred-pulse" style={{ background: accentColor, boxShadow: `0 0 10px ${accentColor}` }} />
                <div className="serif-display" style={{ fontSize: 34, lineHeight: 1, letterSpacing: '-0.02em', color: 'var(--fg)' }}>
                  {s.value || (s.target >= 1_000_000 ? '100M+' : s.target + (s.suffix || '+'))}
                </div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--fg-2)' }}>{s.label}</div>
                <div className="serif" style={{ fontSize: 12.5, color: 'var(--fg-3)' }}>{s.detail}</div>
              </div>);

          })}
        </div>
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'linear-gradient(90deg, var(--bg-2) 0%, transparent 8%, transparent 92%, var(--bg-2) 100%)' }} />
      </div>

      {/* Category line removed */}
    </section>);

};

// ─────────── CINEMATIC BREAK — full-bleed image moment ───────────
const CinematicBreak = ({ src, quote, attribution }) =>
<section style={{
  position: 'relative', overflow: 'hidden',
  minHeight: 520,
  display: 'flex', alignItems: 'center',
  borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)'
}}>
    <div style={{
    position: 'absolute', inset: 0, zIndex: 0,
    backgroundImage: `url(${src})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center'
  }} />
    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(15,13,23,0.85) 0%, rgba(15,13,23,0.55) 50%, rgba(15,13,23,0.25) 100%)' }} />
    <Container style={{ position: 'relative', zIndex: 2, width: '100%' }}>
      <Reveal>
        <div style={{ maxWidth: 780 }}>
          <Eyebrow color="var(--pink)">A note on the work</Eyebrow>
          <p className="editorial" style={{
          fontSize: 'clamp(22px, 2.9vw, 38px)',
          lineHeight: 1.42, margin: '24px 0 0',
          color: 'var(--fg)',
          maxWidth: 760,
          letterSpacing: '-0.012em',
          textShadow: '0 2px 24px rgba(0,0,0,0.4)'
        }}>
            “{quote}”
          </p>
          <div className="mono" style={{ marginTop: 28, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-2)' }}>
            {attribution}
          </div>
        </div>
      </Reveal>
    </Container>
  </section>;

const MARQUEE_LOGOS = [
{ name: 'Amazon', file: 'assets/logos/amazon.png', w: 140 },
{ name: 'Schwarzkopf', file: 'assets/logos/schwarzkopf.png', w: 170 },
{ name: 'Cadbury', file: 'assets/logos/cadbury.jpg', w: 130, bg: true },
{ name: 'Tuborg', file: 'assets/logos/tuborg.png', w: 140 },
{ name: 'Welspun', file: 'assets/logos/welspun.png', w: 200 },
{ name: 'Mochi', file: 'assets/logos/mochi.png', w: 120 },
{ name: 'Timezone', file: 'assets/logos/timezone.jpg', w: 170, bg: true },
{ name: 'Pocket 52', file: 'assets/logos/pocket52.png', w: 170 },
{ name: 'Fratelli', file: 'assets/logos/fratelli.png', w: 90 },
{ name: 'Instamart', file: 'assets/logos/instamart.png', w: 110 },
{ name: 'Joy', file: 'assets/logos/joy.png', w: 130 },
{ name: 'Sunfeast', file: 'assets/logos/sunfeast.jpg', w: 110, bg: true },
{ name: 'Sylvi', file: 'assets/logos/sylvi.png', w: 150 },
{ name: 'Max', file: 'assets/logos/max.jpg', w: 130, bg: true },
{ name: 'Azorte', file: 'assets/logos/azorte.jpg', w: 150, bg: true },
{ name: 'Eatopia', file: 'assets/logos/eatopia.png', w: 110 }];


const LogoStrip = () => {
  const all = [...MARQUEE_LOGOS, ...MARQUEE_LOGOS];
  return (
    <section style={{ padding: '72px 0 76px', borderBottom: '1px solid var(--line)', overflow: 'hidden' }}>
      <Container>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24, marginBottom: 36 }}>
          <span className="mono" style={{ fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>
            Brands worked across
          </span>
          <div style={{ flex: 1, height: 1, background: 'var(--line)' }} />
        </div>
      </Container>

      {/* Desktop: auto-marquee. Mobile: native horizontal scroll w/ snap */}
      <div className="logo-marquee-wrap" style={{ position: 'relative' }}>
        <div className="marquee-track logo-marquee-track" style={{ gap: 48, animationDuration: '58s' }}>
          {all.map((b, i) =>
          <div key={i} style={{
            flexShrink: 0,
            width: b.w + 40,
            height: 90,
            background: '#f7f4ee',
            borderRadius: 14,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: '14px 20px',
            scrollSnapAlign: 'start'
          }}>
              <img src={b.file} alt={b.name} style={{
              maxWidth: '100%', maxHeight: '100%',
              objectFit: 'contain', display: 'block'
            }} />
            </div>
          )}
        </div>
        <div className="logo-marquee-fade" style={{ position: 'absolute', inset: '0 0 0 0', pointerEvents: 'none', background: 'linear-gradient(90deg, var(--bg) 0%, transparent 6%, transparent 94%, var(--bg) 100%)' }} />
      </div>
    </section>);

};

// ─────────── ABOUT THE AGENCY (home) ───────────
const AboutTease = () =>
<section style={{ padding: '140px 0', position: 'relative', overflow: 'hidden' }}>
    <div className="blob" style={{ width: 520, height: 520, background: 'rgba(107,83,255,0.14)', top: '10%', left: '-200px' }} />
    <Container style={{ position: 'relative' }}>
      <Reveal>
        <Eyebrow color="var(--pink)">About the agency</Eyebrow>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 0.9fr', gap: 80, alignItems: 'flex-start', marginTop: 28 }}>
        <div>
          <h2 style={{
          fontSize: 'clamp(30px, 3.6vw, 52px)',
          lineHeight: 1.15, letterSpacing: '-0.02em',
          margin: 0, fontWeight: 500, maxWidth: 680
        }}>
            <RevealWords gap={36}>
              <span>
                An influencer marketing and strategic communication agency, helping brands earn presence where <span className="serif" style={{ color: 'var(--pink)' }}>attention</span> turns into trust.
              </span>
            </RevealWords>
          </h2>
          <Reveal delay={220}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, fontSize: 16, lineHeight: 1.7, color: 'var(--fg-2)', maxWidth: 560, marginTop: 36 }}>
              <p style={{ margin: 0 }}>
                We build creator ecosystems, shape narratives, and place brands inside the conversations that influence decisions, before people search, compare, or buy.
              </p>
              <p style={{ margin: 0 }}>
                The work is built on years of creator-led campaigns across consumer categories. The discipline is what carries it forward.
              </p>
            </div>
          </Reveal>
        </div>
        <Reveal delay={300}>
          <div style={{
          aspectRatio: '4/5',
          borderRadius: 18, overflow: 'hidden',
          border: '1px solid var(--line)',
          backgroundImage: 'linear-gradient(180deg, rgba(15,13,23,0) 55%, rgba(15,13,23,0.55) 100%), url(https://images.unsplash.com/photo-1543269664-7eef42226a21?w=1600&q=85)',
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          position: 'relative'
        }}>
            <div className="mono" style={{
            position: 'absolute', bottom: 22, left: 22, right: 22,
            fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg)'
          }}>

          </div>
          </div>
        </Reveal>
      </div>

      <Reveal delay={400}>
        <div style={{ marginTop: 56, display: 'flex', justifyContent: 'flex-end' }}>
          <Btn variant="ghost" href="/about">More about the agency</Btn>
        </div>
      </Reveal>
    </Container>
  </section>;


// ─────────── SERVICES TEASE (home) ───────────
const ServicesTease = () =>
<section style={{ padding: '120px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', background: 'var(--bg-2)' }}>
    <Container>
      <Reveal>
        <div style={{ textAlign: 'center', marginBottom: 72 }}>
          <Eyebrow>How we work</Eyebrow>
          <h2 style={{
          fontSize: 'clamp(36px, 4.4vw, 64px)',
          lineHeight: 1.06, letterSpacing: '-0.025em',
          margin: '22px 0 16px', fontWeight: 500
        }}>
            Two disciplines. One <span className="serif" style={{ color: 'var(--pink)' }}>pursuit</span>.
          </h2>
          <p style={{ maxWidth: 520, margin: '0 auto', fontSize: 15.5, lineHeight: 1.6, color: 'var(--fg-2)' }}>
            Authentic creator-led work, done consistently over time, earns the kind of presence that turns into trust.
          </p>
        </div>
      </Reveal>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
        <Reveal delay={0}>
          <ServiceCardLite
          number="01" title="Influencer Marketing" accent="indigo"
          lead="Creator partnerships, campaign planning, and content scaled across audiences."
          body="We select creators on audience fit and voice, not follower count, and build campaigns measured against consideration and recall."
          href="/services#influencer-marketing" />
        
        </Reveal>
        <Reveal delay={140}>
          <ServiceCardLite
          number="02" title="Strategic Communication" accent="pink"
          lead="Positioning, messaging, and sustained brand communication for consideration and choice."
          body="The longer work, narrative, position, perception, shaped over months and years, holding the brand's place in the conversation."
          href="/services#strategic-communication" />
        
        </Reveal>
      </div>
    </Container>
  </section>;


const ServiceCardLite = ({ number, title, accent, lead, body, href }) => {
  const accentColor = accent === 'indigo' ? 'var(--indigo)' : 'var(--pink)';
  return (
    <div className="card-lift surface" style={{
      borderRadius: 20, padding: '40px 36px 32px',
      position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column', gap: 18, minHeight: 360
    }}>
      <div style={{ position: 'absolute', top: -100, right: -100, width: 260, height: 260, background: `radial-gradient(circle, ${accentColor}22 0%, transparent 70%)`, pointerEvents: 'none' }} />
      <div style={{ position: 'relative' }}>
        <Tag tone={accent}>Service</Tag>
      </div>
      <h3 style={{ margin: 0, fontSize: 30, letterSpacing: '-0.025em', fontWeight: 500, lineHeight: 1.1, position: 'relative' }}>{title}</h3>
      <p style={{ margin: 0, fontSize: 15.5, lineHeight: 1.5, color: 'var(--fg)', fontWeight: 400, position: 'relative' }}>{lead}</p>
      <p style={{ margin: 0, fontSize: 14, lineHeight: 1.65, color: 'var(--fg-2)', position: 'relative' }}>{body}</p>
      <div style={{ marginTop: 'auto', paddingTop: 6, position: 'relative' }}>
        <a href={href} className="link-underline mono" style={{ fontSize: 11, letterSpacing: '0.20em', textTransform: 'uppercase', color: 'var(--fg)', display: 'inline-flex', alignItems: 'center', gap: 10 }}>
          Learn more <ArrowRight size={12} />
        </a>
      </div>
    </div>);

};

// ─────────── FULL SERVICE CARD (services page) ───────────
const ServiceCardFull = ({ number, title, accent, lead, body, formats, suited, id }) => {
  const accentColor = accent === 'indigo' ? 'var(--indigo)' : 'var(--pink)';
  return (
    <div id={id} className="card-lift surface" style={{
      borderRadius: 24, padding: '48px 48px 36px',
      display: 'flex', flexDirection: 'column', gap: 24,
      position: 'relative', overflow: 'hidden'
    }}>
      <div style={{ position: 'absolute', top: -120, right: -120, width: 320, height: 320, background: `radial-gradient(circle, ${accentColor}22 0%, transparent 70%)`, pointerEvents: 'none' }} />
      <div style={{ position: 'relative' }}>
        <Tag tone={accent}>Service</Tag>
      </div>
      <h2 style={{ margin: 0, fontSize: 'clamp(32px, 3.4vw, 48px)', letterSpacing: '-0.025em', fontWeight: 500, lineHeight: 1.06, position: 'relative' }}>{title}</h2>
      <p style={{ margin: 0, fontSize: 17, lineHeight: 1.45, color: 'var(--fg)', fontWeight: 400, position: 'relative', maxWidth: 620 }}>{lead}</p>
      <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.7, color: 'var(--fg-2)', position: 'relative', maxWidth: 680 }}>{body}</p>

      {formats &&
      <div style={{ borderTop: '1px solid var(--line)', paddingTop: 22, position: 'relative' }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 16 }}>What's included</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {formats.map(([f, d], i) =>
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 18, fontSize: 14, paddingBottom: 12, borderBottom: i < formats.length - 1 ? '1px dashed var(--line)' : 'none' }}>
                <div style={{ fontWeight: 500, color: 'var(--fg)' }}>{f}</div>
                <div style={{ color: 'var(--fg-2)' }}>{d}</div>
              </div>
          )}
          </div>
        </div>
      }
      {suited &&
      <div style={{ borderTop: '1px solid var(--line)', paddingTop: 22, position: 'relative' }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 16 }}>Best suited for</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {suited.map((s, i) =>
          <div key={i} style={{ fontSize: 14, color: 'var(--fg-2)', display: 'flex', gap: 12, alignItems: 'baseline' }}>
                <span style={{ color: accentColor, fontSize: 11 }}>→</span> {s}
              </div>
          )}
          </div>
        </div>
      }
      <div style={{ marginTop: 'auto', paddingTop: 8, position: 'relative' }}>
        <Btn variant={accent === 'indigo' ? 'indigo' : 'pink'} size="sm" href="/contact">Start a conversation</Btn>
      </div>
    </div>);

};

// ─────────── FOUNDER ───────────
const Founder = ({ compact = false }) =>
<section style={{ padding: compact ? '100px 0' : '120px 0', position: 'relative', overflow: 'hidden', borderTop: compact ? '1px solid var(--line)' : 'none' }}>
    <div className="blob" style={{ width: 480, height: 480, background: 'rgba(107,83,255,0.14)', top: '10%', left: '-180px' }} />
    <Container style={{ position: 'relative' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 64, alignItems: 'flex-start' }}>
        <Reveal>
          <div>
            <div style={{
            aspectRatio: '4/5',
            borderRadius: 14,
            overflow: 'hidden',
            border: '1px solid var(--line)',
            backgroundImage: 'linear-gradient(180deg, rgba(21,19,28,0) 60%, rgba(21,19,28,0.55) 100%), url(https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=1200&q=85)',
            backgroundSize: 'cover',
            backgroundPosition: 'center'
          }} />
            <div style={{ marginTop: 18 }}>
              <div style={{ fontSize: 18, letterSpacing: '-0.01em', color: 'var(--fg)' }}>Jimit Panchal</div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-3)', marginTop: 4 }}>Founder · Socializare</div>
            </div>
          </div>
        </Reveal>
        <Reveal delay={150}>
          <div>
            <Eyebrow color="var(--pink)">From the founder</Eyebrow>
            <h2 style={{ fontSize: 'clamp(30px, 3.6vw, 52px)', lineHeight: 1.1, letterSpacing: '-0.02em', margin: '20px 0 28px', fontWeight: 500 }}>
              Not more creative. Not bigger. <span className="serif" style={{ color: 'var(--pink)' }}>Better</span>.
            </h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, fontSize: 15.5, lineHeight: 1.7, color: 'var(--fg-2)', maxWidth: 640 }}>
              <p style={{ margin: 0 }}>I started Socializare because I believed the work could be better. Not more creative. Not bigger. Better.</p>
              <p style={{ margin: 0 }}>That means choosing creators on fit, not followers. Building partnerships that last years, not weeks. Placing brands inside conversations that actually influence decisions.</p>
              <p style={{ margin: 0 }}>This comes from years of creator-led work across retail, beauty, beverage, gaming, home, entertainment, and travel. Every project taught me what works and what doesn't.</p>
              <p style={{ margin: 0 }}>What I'm building now is the discipline that carries that learning forward.</p>
              <p style={{ margin: '10px 0 0', fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontSize: 22, color: 'var(--fg)' }}>Jimit</p>
            </div>
          </div>
        </Reveal>
      </div>
    </Container>
  </section>;


// ─────────── FAQ ───────────
const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
  { q: "What is Socializare's specialism?",
    a: "Socializare works as an influencer marketing and strategic communication agency for brands serious about the Indian consumer. Our depth is in creator-led campaigns and long-term brand positioning, with experience across travel, retail, beauty, beverage, gaming, home, and entertainment. The thread connecting all of it is familiarity, building brands the Indian consumer recognises and trusts before they're in the market." },
  { q: "Does Socializare only work on travel?",
    a: "No. Travel is a specialism, not a constraint. We work with consumer brands across most categories serious about the Indian audience." },
  { q: "How does Socializare select creators for a campaign?",
    a: "Three things: audience fit (do their viewers match the brand's actual buyer), content quality (does their existing work clear the bar the brand needs), and genuine relevance (would the partnership make sense to the audience without being explained). Follower counts inform the decision but don't drive it. The cost of the wrong creator is always greater than the cost of finding the right one." },
  { q: "How is the work measured?",
    a: "Measurement depends on the brief. Awareness campaigns are measured against reach, engagement, and audience composition. Consideration campaigns are measured against saves, search lift, and qualitative response. The comments section is data, not noise. Strategic communication is measured against share of voice, perception movement, and the position the brand holds in unprompted recall. We don't promise outcomes we can't define before the work starts." },
  { q: "What does an engagement with Socializare look like?",
    a: "Three shapes. One-off campaigns, run around a brand launch, a seasonal moment, or a market-entry need. Always-on retainers, structured around three to twelve months. And strategic communication mandates, which work on a longer arc, typically twelve months and up. Most enquiries start with one shape and expand into another." }];


  return (
    <section style={{ padding: '120px 0', background: 'var(--bg-2)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'flex-start' }}>
          <Reveal>
            <div style={{ position: 'sticky', top: 120 }}>
              <Eyebrow>Common questions</Eyebrow>
              <h2 style={{ fontSize: 'clamp(30px, 3.6vw, 52px)', lineHeight: 1.1, letterSpacing: '-0.02em', margin: '20px 0 18px', fontWeight: 500 }}>
                What prospects ask before they reach out.
              </h2>
              <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0, maxWidth: 360 }}>
                Don't see your question? Ask us directly. We usually reply the same day.
              </p>
            </div>
          </Reveal>
          <div>
            {items.map((it, i) =>
            <Reveal key={i} delay={i * 70}>
                <FAQItem {...it} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />
              </Reveal>
            )}
          </div>
        </div>
      </Container>
    </section>);

};

const FAQItem = ({ q, a, open, onClick }) =>
<div onClick={onClick} style={{ borderTop: '1px solid var(--line)', padding: '24px 0', cursor: 'pointer' }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24 }}>
      <h3 style={{ margin: 0, fontSize: 18.5, letterSpacing: '-0.015em', fontWeight: 500, color: 'var(--fg)' }}>{q}</h3>
      <div style={{
      width: 34, height: 34, borderRadius: 99,
      border: '1px solid var(--line-strong)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      background: open ? 'var(--pink)' : 'transparent',
      color: open ? '#fff' : 'var(--fg)',
      boxShadow: open ? '0 0 24px var(--pink-glow), inset 0 1px 0 rgba(255,255,255,0.28)' : 'none',
      transition: 'all .35s cubic-bezier(.2,.8,.2,1)'
    }}>
        <span style={{ transform: open ? 'rotate(45deg)' : 'none', transition: 'transform .35s', display: 'flex' }}><Plus size={14} /></span>
      </div>
    </div>
    <div style={{ maxHeight: open ? 240 : 0, overflow: 'hidden', transition: 'max-height .45s ease, opacity .35s', opacity: open ? 1 : 0 }}>
      <p style={{ margin: '16px 0 0', fontSize: 14.5, lineHeight: 1.7, color: 'var(--fg-2)', maxWidth: 680 }}>{a}</p>
    </div>
  </div>;


// ─────────── CTA STRIP ───────────
const CTAStrip = ({ title, sub, ctaLabel = 'Get in touch', ctaHref = '/contact' }) =>
<section style={{ padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
    <div className="blob" style={{ width: 540, height: 540, background: 'rgba(255,111,168,0.20)', bottom: -200, left: -150, animation: 'pulse-glow 10s ease-in-out infinite' }} />
    <div className="blob" style={{ width: 480, height: 480, background: 'rgba(107,83,255,0.22)', top: -160, right: -140, animation: 'pulse-glow 12s ease-in-out infinite .5s' }} />
    <Container style={{ position: 'relative' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 60, alignItems: 'center' }}>
        <Reveal>
          <div>
            <Eyebrow color="var(--pink)">Get in touch</Eyebrow>
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 76px)', lineHeight: 1.02, letterSpacing: '-0.03em', margin: '20px 0 0', fontWeight: 500 }}>
              {title}
            </h2>
            <p style={{ fontSize: 16.5, lineHeight: 1.55, color: 'var(--fg-2)', margin: '24px 0 0', maxWidth: 520 }}>{sub}</p>
          </div>
        </Reveal>
        <Reveal delay={180}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 16 }}>
            <Btn variant="primary" size="lg" href={ctaHref}>{ctaLabel}</Btn>
            <a href="mailto:business@socializare.in" className="mono link-underline" style={{ fontSize: 12, letterSpacing: '0.14em', color: 'var(--fg-2)' }}>
              business@socializare.in
            </a>
          </div>
        </Reveal>
      </div>
    </Container>
  </section>;


window.Blocks = {
  Hero, Credibility, LogoStrip, AboutTease, ServicesTease,
  ServiceCardLite, ServiceCardFull, Founder, FAQ, CTAStrip, CinematicBreak
};