// Page compositions + page-specific blocks

const { Container, Eyebrow, Btn, Tag, Reveal, RevealWords, PageOpener, Placeholder } = window.Primitives;
const { Hero, Credibility, LogoStrip, AboutTease, ServicesTease, ServiceCardFull, Founder, FAQ, CTAStrip, CinematicBreak } = window.Blocks;
const { ArrowRight, SLogoImg } = window.Icons;

// ═══════════ HOME PAGE ═══════════
const HomePage = () => (
  <>
    <Hero/>
    <Credibility/>
    <LogoStrip/>
    <AboutTease/>
    <ServicesTease/>
    <CTAStrip
      title={<>Ready to <span className="serif" style={{color:'var(--pink)'}}>collaborate</span>?</>}
      sub="The best work starts with a clear conversation."/>
  </>
);

// ═══════════ ABOUT PAGE ═══════════
const WhatWeHoldTo = () => {
  const principles = [
    ['Creator Authenticity', 'We select creators on audience fit and voice, not follower count. Real relationships compound over time. Transactional ones don\'t.'],
    ['Long-Term Thinking', 'Single campaigns spike. Long-term creator partnerships build brand recall. We optimize for the latter.'],
    ['Conversation First', 'Awareness is cheap. Consideration is harder. We place brands inside conversations that influence decisions, not just awareness metrics.'],
    ['Discipline and Consistency', 'Years of work inform the next project. The discipline is what carries it forward.'],
  ];
  return (
    <section style={{padding:'120px 0', borderTop:'1px solid var(--line)'}}>
      <Container>
        <Reveal>
          <Eyebrow>What we hold to</Eyebrow>
          <h2 style={{fontSize:'clamp(30px, 3.6vw, 52px)', lineHeight:1.08, letterSpacing:'-0.02em', margin:'18px 0 56px', fontWeight:500, maxWidth:720}}>
            The discipline underneath the work.
          </h2>
        </Reveal>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}}>
          {principles.map(([title,body],i)=>(
            <Reveal key={i} delay={i*100}>
              <div className="card-lift" style={{
                background:'var(--bg-2)', border:'1px solid var(--line)',
                borderRadius:18, padding:'28px 30px',
                display:'flex', flexDirection:'column', gap:12,
                minHeight:180
              }}>
                <span className="mono" style={{fontSize:10.5, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--fg-3)'}}>
                  0{i+1}
                </span>
                <h3 style={{margin:0, fontSize:22, letterSpacing:'-0.02em', fontWeight:500, color:'var(--fg)'}}>{title}</h3>
                <p style={{margin:0, fontSize:14.5, lineHeight:1.65, color:'var(--fg-2)'}}>{body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
};

const AboutPage = () => (
  <>
    <PageOpener
      eyebrow="About"
      title="Built on a single conviction."
      bg="https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=2400&q=85"
      bgLabel="Conversation · India"
      lead="Authentic creator-led work, done consistently over time, earns the kind of presence that turns into trust."/>
    <section style={{padding:'80px 0 100px'}}>
      <Container>
        <Reveal>
          <div style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:60, alignItems:'flex-start'}}>
            <div>
              <p style={{fontSize:18.5, lineHeight:1.55, color:'var(--fg)', margin:'0 0 24px', fontWeight:400, maxWidth:580}}>
                This isn't a theory. It's what happens when brands stop chasing attention and start building familiarity, the work that happens before a consumer searches, compares, or buys.
              </p>
              <p style={{fontSize:15.5, lineHeight:1.7, color:'var(--fg-2)', margin:0, maxWidth:520}}>
                Socializare was built on the conviction that creator partnerships, narrative strategy, and sustained communication compound over time. The discipline is what carries it forward.
              </p>
            </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.45) 100%), url(https://images.unsplash.com/photo-1542751371-adc38448a05e?w=1600&q=85)',
              backgroundSize:'cover', backgroundPosition:'center'
            }}/>
          </div>
        </Reveal>
      </Container>
    </section>
    <WhatWeHoldTo/>
    <Founder compact/>
    <CTAStrip
      title={<>Ready to <span className="serif" style={{color:'var(--pink)'}}>collaborate</span>?</>}
      sub="The best work starts with a clear conversation. If you are building for the Indian consumer, I would welcome the conversation."/>
  </>
);

// ═══════════ SERVICES PAGE ═══════════
const ServicesPage = () => (
  <>
    <PageOpener
      eyebrow="Services"
      title="How we work."
      bg="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=2400&q=85"
      bgLabel="Creator space · India"
      lead="Two disciplines. One pursuit. The work of putting brands into India's conversation, campaign-led, and continuous."/>
    <section style={{padding:'60px 0 120px'}}>
      <Container>
        <div style={{display:'grid', gridTemplateColumns:'1fr', gap:18}}>
          <Reveal>
            <ServiceCardFull
              id="influencer-marketing"
              number="01" title="Influencer Marketing" accent="indigo"
              lead="Creator-led campaigns designed to drive awareness, engagement, and consideration."
              body="This isn't about renting follower counts. It's about selecting creators whose audiences align with your brand, building real partnerships, and placing your message inside conversations that actually influence decisions."
              formats={[
                ['Creator Selection','Audience demographics, engagement authenticity, voice fit. Recommendations based on your brand, not their follower count.'],
                ['Campaign Strategy','Narrative, content formats, and clear success metrics defined before a single post goes live.'],
                ['Content Direction','We guide creators on brand voice while preserving their authenticity. The best campaigns feel native to the creator, not imposed.'],
                ['Sustained Partnerships','Single campaigns spike and fade. We build multi-month partnerships that compound brand familiarity over time.'],
                ['Measurement','Engagement, reach, sentiment, and conversion impact. Every campaign informs the next.'],
              ]}
            />
          </Reveal>
          <Reveal delay={140}>
            <ServiceCardFull
              id="strategic-communication"
              number="02" title="Strategic Communication" accent="pink"
              lead="Positioning, messaging, and sustained brand communication for consideration and choice."
              body="Beyond individual campaigns, brands need a coherent narrative that positions them in the minds of consumers. We develop that positioning, craft the messaging that carries it, and build sustained communication strategies that work across channels and seasons."
              formats={[
                ['Brand Positioning','How your brand sits in the market relative to competitors and consumer expectations. The foundation for all messaging.'],
                ['Narrative Strategy','The brand story, the \u2018why\u2019 behind what you do, carried across campaigns, seasons, and categories.'],
                ['Messaging Framework','Core messages for consumers, trade, and media. Each message true to the narrative while speaking to specific needs.'],
                ['Multi-Channel Planning','How the narrative and messages live across paid, earned, and owned channels. Consistency across touchpoints builds trust.'],
                ['Reputation & Crisis','Navigating moments that test positioning. Real communication during crisis builds or breaks trust.'],
                ['Seasonal & Tactical','Short-term campaigns that reinforce strategic positioning, not conflict with it.'],
              ]}
            />
          </Reveal>
        </div>
      </Container>
    </section>
    <FAQ/>
    <CTAStrip
      title={<>Get in <span className="serif" style={{color:'var(--pink)'}}>touch</span>.</>}
      sub="The best work starts with a clear conversation. Most engagements start with one service and grow into both."/>
  </>
);

// ═══════════ EXPERIENCE PAGE ═══════════
const SectorExperience = () => (
  <section style={{padding:'80px 0 100px', borderBottom:'1px solid var(--line)'}}>
    <Container>
      <Reveal>
        <div style={{display:'flex', flexDirection:'column', gap:18, fontSize:17, lineHeight:1.7, color:'var(--fg-2)', maxWidth:820}}>
          <p style={{margin:0, color:'var(--fg)', fontSize:19, lineHeight:1.55}}>Years of experience across creator-led campaigns involving strategy, creator partnerships, campaign direction, and audience engagement.</p>
          <p style={{margin:0}}>The work spans retail, beauty, beverage, gaming, home, entertainment, and travel, shaping the understanding of how influence works across the Indian consumer.</p>
          <p style={{margin:0}}>That experience now informs how Socializare approaches creator ecosystems and long-term communication.</p>
        </div>
      </Reveal>
    </Container>
  </section>
);

const BRAND_GROUPS = [
  ['Retail & E-Commerce','pink',['Amazon','Metro','Snitch','Instamart','Mochi']],
  ['Beauty & Lifestyle','indigo',['Schwarzkopf','Sylvi','Joy','Azorte']],
  ['Beverage & FMCG','pink',['Cadbury',"Tuborg","Sunfeast Mom's Magic",'Dabur Real Active']],
  ['Gaming & Entertainment','indigo',['Pocket 52','Timezone','Max']],
  ['Home & Living','pink',['Welspun','Spaces','Eatopia']],
  ['Travel & Hospitality','indigo',['Fratelli Vineyards']],
];

const BrandsWorkedAcross = () => (
  <section style={{padding:'100px 0', background:'var(--bg-2)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
    <Container>
      <Reveal>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:48, gap:40, flexWrap:'wrap'}}>
          <div>
            <Eyebrow color="var(--pink)">Brands we've worked across</Eyebrow>
            <h2 style={{fontSize:'clamp(28px, 3.2vw, 44px)', lineHeight:1.1, letterSpacing:'-0.02em', margin:'18px 0 0', fontWeight:500}}>
              Twenty consumer brands.<br/>Seven categories.
            </h2>
          </div>
          <span className="mono" style={{fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--fg-3)'}}>20+ brands · 7 categories</span>
        </div>
      </Reveal>

      <div style={{borderTop:'1px solid var(--line)'}}>
        {BRAND_GROUPS.map(([cat,tone,brands],i)=>(
          <Reveal key={i} delay={i*50} kind="reveal">
            <div style={{
              display:'grid', gridTemplateColumns:'260px 1fr',
              gap:48, padding:'26px 6px',
              borderBottom:'1px solid var(--line)',
              alignItems:'baseline',
            }}>
              <div style={{display:'flex', alignItems:'center', gap:12}}>
                <span style={{width:6, height:6, borderRadius:99, background: tone==='indigo'?'var(--indigo)':'var(--pink)', boxShadow:`0 0 8px ${tone==='indigo'?'var(--indigo)':'var(--pink)'}`}}/>
                <div style={{fontSize:18, letterSpacing:'-0.01em', color:'var(--fg)'}}>{cat}</div>
              </div>
              <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
                {brands.map((b,j)=>(
                  <span key={j} style={{
                    fontSize:18, letterSpacing:'-0.01em', color:'var(--fg-2)',
                    fontFamily: j%2 ? "'Instrument Serif', serif" : 'Inter',
                    fontStyle: j%2 ? 'italic' : 'normal',
                  }}>
                    {b}{j<brands.length-1 && <span style={{margin:'0 14px', color:'var(--fg-3)'}}>·</span>}
                  </span>
                ))}
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </Container>
  </section>
);

const Categories = () => {
  const cats = [
    ['Travel & Tourism','Including Middle East destination awareness for the Indian outbound market.'],
    ['Retail',''],['E-commerce',''],['Beauty',''],['Beverage',''],['Home & Living',''],['Entertainment',''],['Gaming',''],
  ];
  return (
    <section style={{padding:'100px 0'}}>
      <Container>
        <Reveal>
          <Eyebrow>Categories</Eyebrow>
          <h2 style={{fontSize:'clamp(28px, 3.2vw, 44px)', lineHeight:1.1, letterSpacing:'-0.02em', margin:'18px 0 48px', fontWeight:500, maxWidth:760}}>
            Cross-industry depth, with travel as a specialism.
          </h2>
        </Reveal>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14}}>
          {cats.map(([c,note],i)=>(
            <Reveal key={i} delay={i*60}>
              <div className="card-lift" style={{
                padding:'22px 22px 24px',
                background: i===0 ? 'linear-gradient(135deg, rgba(107,83,255,0.10), rgba(255,111,168,0.06))' : 'var(--bg-2)',
                border:`1px solid ${i===0 ? 'var(--line-strong)' : 'var(--line)'}`,
                borderRadius:14, minHeight: i===0 ? 140 : 90,
                display:'flex', flexDirection:'column', justifyContent:'space-between'
              }}>
                <div style={{fontSize:i===0?18:16, fontWeight:500, letterSpacing:'-0.015em', color:'var(--fg)'}}>{c}</div>
                {note && <div className="mono" style={{fontSize:10.5, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--fg-3)', marginTop:14, lineHeight:1.55}}>{note}</div>}
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
};

const SELECTED_WORK = [
  ['Beauty','Schwarzkopf','Creator partnership driving category trust','Launched alongside seasonal peak','https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=1200&q=85'],
  ['Retail','Snitch','Founder-led storytelling on Reels','Sustained creator presence','https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1200&q=85'],
  ['Beverage','Tuborg','Occasion-led brand recall','Multi-creator campaign','https://images.unsplash.com/photo-1551024709-8f23befc6f87?w=1200&q=85'],
  ['Gaming','Pocket 52','Audience-native creator partnerships','Always-on retainer','https://images.unsplash.com/photo-1542751371-adc38448a05e?w=1200&q=85'],
  ['Home','Welspun','Festive-season creator storytelling','Lifestyle category positioning','https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=1200&q=85'],
  ['Entertainment','Max','Platform-native campaign rollout','Reach and community engagement','https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?w=1200&q=85'],
  ['Beauty','Joy','Product trust through creator advocacy','Category relevance and recall','https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=1200&q=85'],
  ['Travel','Fratelli Vineyards','Destination partnership for outbound audience','Experience-led creator trip','https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=85'],
];

const SelectedWork = () => (
  <section style={{padding:'100px 0', borderTop:'1px solid var(--line)'}}>
    <Container>
      <Reveal>
        <Eyebrow color="var(--pink)">Selected collaborations</Eyebrow>
        <h2 style={{fontSize:'clamp(28px, 3.2vw, 44px)', lineHeight:1.1, letterSpacing:'-0.02em', margin:'18px 0 56px', fontWeight:500, maxWidth:760}}>
          A view across categories and campaign shapes.
        </h2>
      </Reveal>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:18}}>
        {SELECTED_WORK.map(([cat,brand,caption,context,img], i) => (
          <Reveal key={i} delay={(i%4)*80}>
            <div className="card-lift" style={{
              background:'var(--bg-2)', border:'1px solid var(--line)',
              borderRadius:14, overflow:'hidden',
              display:'flex', flexDirection:'column',
              minHeight: 380
            }}>
              <div style={{
                aspectRatio:'4/3',
                backgroundImage:`linear-gradient(180deg, rgba(21,19,28,0) 50%, rgba(21,19,28,0.55) 100%), url(${img})`,
                backgroundSize:'cover', backgroundPosition:'center',
              }}/>
              <div style={{padding:'20px 22px 22px', display:'flex', flexDirection:'column', gap:10, flex:1}}>
                <span className="mono" style={{fontSize:10, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--fg-3)'}}>
                  {cat}
                </span>
                <div style={{fontSize:17, letterSpacing:'-0.01em', color:'var(--fg)', fontWeight:500}}>{brand}</div>
                <p style={{margin:0, fontSize:13.5, lineHeight:1.55, color:'var(--fg-2)'}}>{caption}</p>
                <div className="editorial-italic" style={{marginTop:'auto', fontSize:13, color:'var(--fg-3)', paddingTop:8}}>
                  {context}
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </Container>
  </section>
);

const WhatThisMeans = () => (
  <section style={{padding:'120px 0', borderTop:'1px solid var(--line)', background:'var(--bg-2)'}}>
    <Container>
      <Reveal>
        <div style={{maxWidth:860}}>
          <Eyebrow>What this means</Eyebrow>
          <h2 style={{fontSize:'clamp(30px, 3.6vw, 52px)', lineHeight:1.12, letterSpacing:'-0.02em', margin:'20px 0 0', fontWeight:500}}>
            The categories will change. The consumer will shift. But the <span className="serif" style={{color:'var(--pink)'}}>discipline</span>, building presence through authentic creators, over time, is what carries forward.
          </h2>
        </div>
      </Reveal>
    </Container>
  </section>
);

const SocializareEngagements = () => (
  <section style={{padding:'100px 0', borderTop:'1px solid var(--line)'}}>
    <Container>
      <Reveal>
        <Eyebrow color="var(--pink)">Socializare engagements</Eyebrow>
        <div style={{
          marginTop:24,
          padding:'48px 48px',
          border:'1px solid var(--line-strong)',
          borderRadius:20,
          background:'linear-gradient(135deg, rgba(107,83,255,0.08), rgba(255,111,168,0.04))',
          position:'relative', overflow:'hidden',
          display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:48, alignItems:'center'
        }}>
          <div style={{position:'absolute', right:-80, top:-80, opacity:0.18}}>
            <SLogoImg size={320}/>
          </div>
          <div style={{position:'relative'}}>
            <h2 style={{fontSize:'clamp(26px, 2.8vw, 36px)', lineHeight:1.15, letterSpacing:'-0.02em', margin:'0 0 18px', fontWeight:500}}>
              New work, under our own name.
            </h2>
            <p style={{margin:0, fontSize:15, lineHeight:1.65, color:'var(--fg-2)', maxWidth:560}}>
              Case studies of engagements delivered under the Socializare name will be added here as new client work is completed and approved for public reference. In the meantime, available case studies and confidential engagement details are shared on request.
            </p>
          </div>
          <div style={{position:'relative', display:'flex', flexDirection:'column', gap:14, alignItems:'flex-end'}}>
            <Btn variant="primary" href="/contact">Enquire for details</Btn>
            <a href="mailto:business@socializare.in" className="mono link-underline" style={{fontSize:11.5, letterSpacing:'0.14em', color:'var(--fg-2)'}}>
              business@socializare.in
            </a>
          </div>
        </div>
      </Reveal>
    </Container>
  </section>
);

const ExperiencePage = () => (
  <>
    <PageOpener
      eyebrow="Work"
      title="The work."
      bg="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=2400&q=85"
      bgLabel="Community energy · India"
      lead="The work spans retail, beauty, beverage, gaming, home, entertainment, and travel."/>
    <SectorExperience/>
    <BrandsWorkedAcross/>
    <SelectedWork/>
    <WhatThisMeans/>
    <CTAStrip
      title={<>More on <span className="serif" style={{color:'var(--pink)'}}>request</span>.</>}
      sub="Detailed case studies, references, and credentials available under NDA."/>
  </>
);

// ═══════════ CONTACT PAGE ═══════════
const ContactBlock = () => (
  <section style={{padding:'60px 0 100px'}}>
    <Container>
      <div style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:48}}>
        <Reveal>
          <div style={{
            background:'var(--bg-2)', border:'1px solid var(--line)',
            borderRadius:20, padding:'40px 40px',
          }}>
            <div className="mono" style={{fontSize:10.5, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--fg-3)', marginBottom:24}}>
              Send a brief
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:18}}>
              <Input label="Name" placeholder="Your name"/>
              <Input label="Company" placeholder="Brand or organisation"/>
              <Input label="Email" type="email" placeholder="you@brand.com"/>
              <Input label="Brief" textarea placeholder="A few lines on what you're building."/>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:8}}>
                <span className="mono" style={{fontSize:11, letterSpacing:'0.14em', color:'var(--fg-3)'}}>
                  Reply within one working day
                </span>
                <Btn variant="primary" href="mailto:business@socializare.in">Send enquiry</Btn>
              </div>
            </div>
          </div>
        </Reveal>
        <Reveal delay={150}>
          <div>
            <div className="mono" style={{fontSize:10.5, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--fg-3)', marginBottom:24}}>
              Direct contact
            </div>
            <ContactRow label="Email" value="business@socializare.in" href="mailto:business@socializare.in"/>
            <ContactRow label="Phone" value="+91 8454060173" href="https://wa.me/918454060173"/>
            <ContactRow label="Location" value="Mumbai · Maharashtra · India"/>
            <ContactRow label="Web" value="socializare.in" last/>

            <div style={{marginTop:32, padding:'24px 26px', border:'1px solid var(--line)', borderRadius:14, background:'var(--bg-2)'}}>
              <div className="mono" style={{fontSize:10.5, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--fg-3)', marginBottom:10}}>
                Or
              </div>
              <p style={{margin:0, fontSize:15, lineHeight:1.6, color:'var(--fg-2)'}}>
                Explore <a href="/services" className="link-underline" style={{color:'var(--fg)'}}>our services</a> to learn more about how we work, or browse the <a href="/experience" className="link-underline" style={{color:'var(--fg)'}}>experience</a> page.
              </p>
            </div>
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

const Input = ({label, type='text', placeholder, textarea}) => {
  const [focused, setFocused] = React.useState(false);
  const baseStyle = {
    width:'100%',
    background:'transparent',
    border:'none',
    borderBottom:`1px solid ${focused ? 'var(--pink)' : 'var(--line-strong)'}`,
    padding:'10px 0 12px',
    fontFamily:'inherit',
    fontSize:15,
    color:'var(--fg)',
    outline:'none',
    transition:'border-color .2s',
    resize: textarea?'vertical':'none',
  };
  return (
    <label style={{display:'flex', flexDirection:'column', gap:6}}>
      <span className="mono" style={{fontSize:10.5, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--fg-3)'}}>{label}</span>
      {textarea
        ? <textarea rows={3} placeholder={placeholder} style={baseStyle}
            onFocus={()=>setFocused(true)} onBlur={()=>setFocused(false)}/>
        : <input type={type} placeholder={placeholder} style={baseStyle}
            onFocus={()=>setFocused(true)} onBlur={()=>setFocused(false)}/>}
    </label>
  );
};

const ContactRow = ({label, value, href, last}) => (
  <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'18px 0', borderBottom: last ? 'none' : '1px solid var(--line)'}}>
    <span className="mono" style={{fontSize:10.5, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--fg-3)'}}>{label}</span>
    {href
      ? <a href={href} className="link-underline"
           target={/^https?:\/\//.test(href) ? '_blank' : undefined}
           rel={/^https?:\/\//.test(href) ? 'noopener noreferrer' : undefined}
           style={{fontSize:16, color:'var(--fg)'}}>{value}</a>
      : <span style={{fontSize:16, color:'var(--fg)'}}>{value}</span>}
  </div>
);

const WhoWeWorkWith = () => {
  const rows = [
    ['Travel & Tourism','indigo','Indian market presence, destination consideration, booking intent','specialism'],
    ['Retail & E-commerce','pink','Creator campaigns, product launches, seasonal activations',''],
    ['Beverage & FMCG','indigo','Brand personality, occasion-led marketing, audience engagement',''],
    ['Beauty & Lifestyle','pink','Creator advocacy, product trust, category relevance',''],
    ['Entertainment & Gaming','indigo','Community growth, platform-native campaigns, brand recall',''],
    ['Home & Living','pink','Lifestyle storytelling, festive and occasion-led campaigns',''],
  ];
  return (
    <section style={{padding:'100px 0', borderTop:'1px solid var(--line)', background:'var(--bg-2)'}}>
      <Container>
        <Reveal>
          <Eyebrow>Who we work with</Eyebrow>
          <h2 style={{fontSize:'clamp(28px, 3.2vw, 44px)', lineHeight:1.1, letterSpacing:'-0.02em', margin:'18px 0 56px', fontWeight:500, maxWidth:680}}>
            Sectors and the work they come to us for.
          </h2>
        </Reveal>
        <div style={{borderTop:'1px solid var(--line)'}}>
          {rows.map(([name,tone,what,tag],i)=>(
            <Reveal key={i} delay={i*50} kind="reveal">
              <div style={{
                display:'grid', gridTemplateColumns:'1.2fr 2fr 1fr',
                gap:32, alignItems:'center',
                padding:'22px 4px',
                borderBottom:'1px solid var(--line)'
              }}>
                <div style={{display:'flex', alignItems:'center', gap:12, fontSize:18, color:'var(--fg)', letterSpacing:'-0.01em'}}>
                <span style={{width:6, height:6, borderRadius:99, background: tone==='indigo'?'var(--indigo)':'var(--pink)'}}/>
                {name}
              </div>
                <div style={{fontSize:14.5, color:'var(--fg-2)', lineHeight:1.55}}>{what}</div>
                <div style={{textAlign:'right'}}>
                  {tag && <Tag tone={tone}>{tag}</Tag>}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
};

const ContactPage = () => (
  <>
    <PageOpener
      eyebrow="Contact"
      title="Begin a conversation."
      bg="https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?w=2400&q=85"
      bgLabel="Mumbai · in conversation"
      lead="Socializare welcomes enquiries from brands working to earn presence among Indian consumers. Tell us briefly what you're building, and we'll respond within one working day."/>
    <ContactBlock/>
    <section style={{padding:'100px 0', textAlign:'center'}}>
      <Container>
        <Reveal>
          <p className="serif" style={{
            fontSize:'clamp(28px, 3.4vw, 44px)', lineHeight:1.2,
            color:'var(--fg)', margin:0, maxWidth:780, marginLeft:'auto', marginRight:'auto'
          }}>
            Socializare. Brands, in conversation with India.
          </p>
        </Reveal>
      </Container>
    </section>
  </>
);
window.Pages = { HomePage, AboutPage, ServicesPage, ExperiencePage, ContactPage };