// hf-social.jsx — On-brand Tatava Studio social templates (squares 380×380, stories 230×409).
// Replaces the off-brand "Violet Drama" system. Cream surfaces, saffron/navy, Poppins/Open Sans.
// Exports: SqA…SqF, StA…StC on window.
(function () {
  const ORANGE = '#EC7A35', NAVY = '#21366C', CREAM = '#FFFBF6', CREAM2 = '#F7E9D7',
        BLUSH = '#FCE6E0', INK = '#1A1F2B', INK5 = '#6A7286';
  const DISPLAY = "'Poppins','Helvetica Neue',sans-serif";
  const BODY = "'Open Sans','Helvetica Neue',sans-serif";
  const LOGO = "'Bebas Neue',Impact,sans-serif";

  const Mark = ({ size = 18, white = false }) => (
    <svg width={size} height={size} viewBox="0 0 256 256" style={{display:'block',flexShrink:0}}>
      <circle cx="80" cy="58" r="24" fill={white ? CREAM : ORANGE}/>
      <rect x="40" y="92" width="80" height="28" rx="4" fill={white ? CREAM : ORANGE}/>
      <rect x="64" y="116" width="32" height="94" rx="4" fill={white ? CREAM : ORANGE}/>
      <circle cx="176" cy="58" r="24" fill={white ? CREAM : ORANGE}/>
      <rect x="136" y="92" width="80" height="28" rx="4" fill={white ? CREAM : ORANGE}/>
      <rect x="160" y="116" width="32" height="94" rx="4" fill={white ? CREAM : ORANGE}/>
    </svg>
  );

  const Wordmark = ({ size = 12, white = false, mark = 16 }) => (
    <div style={{display:'flex',alignItems:'center',gap:6}}>
      <Mark size={mark} white={white}/>
      <span style={{fontFamily:LOGO,fontSize:size,letterSpacing:1.2,lineHeight:1,
        color:white?CREAM:NAVY}}>TATAVA STUDIO</span>
    </div>
  );

  const Eyebrow = ({ children, navy = false, band = false }) => (
    <span style={{fontFamily:BODY,fontSize:9,fontWeight:600,letterSpacing:'.22em',
      textTransform:'uppercase',color:navy?NAVY:ORANGE,
      ...(band?{background:BLUSH,padding:'4px 10px',borderRadius:3}:{})}}>{children}</span>
  );

  const Sq = ({ children, bg = CREAM }) => (
    <div style={{width:380,height:380,background:bg,fontFamily:BODY,position:'relative',
      overflow:'hidden',display:'flex',flexDirection:'column',boxSizing:'border-box',
      WebkitFontSmoothing:'antialiased'}}>{children}</div>
  );

  const ContactStrip = ({ tall = false }) => (
    <div style={{background:ORANGE,padding:tall?'10px 18px':'8px 18px',display:'flex',
      alignItems:'center',justifyContent:'space-between',flexShrink:0}}>
      <span style={{fontSize:9.5,fontWeight:600,color:'#fff'}}>+91 85957 48981</span>
      <span style={{fontSize:9.5,fontWeight:600,color:'#fff'}}>tatavastudio.com</span>
      <span style={{fontSize:9.5,fontWeight:600,color:'#fff'}}>B-18 Swasthya Vihar, New Delhi</span>
    </div>
  );

  // ── SqA · Editorial Light ─────────────────────────────────────────
  const SqA = () => (
    <Sq>
      <div style={{padding:'16px 22px 0',display:'flex',alignItems:'center',justifyContent:'space-between'}}>
        <Wordmark/>
      </div>
      <div style={{flex:1,display:'flex',flexDirection:'column',justifyContent:'center',
        padding:'0 26px',gap:13}}>
        <div><Eyebrow band>Self-Care Month</Eyebrow></div>
        <h2 style={{fontFamily:DISPLAY,fontSize:27,fontWeight:700,color:NAVY,lineHeight:1.18,
          letterSpacing:'-.02em',margin:0}}>
          Self-Care Isn't Selfish — It's <em style={{color:ORANGE,fontStyle:'italic'}}>Maintenance</em>
        </h2>
        <p style={{fontFamily:BODY,fontSize:11.5,color:INK5,lineHeight:1.65,margin:0,maxWidth:290}}>
          Small daily rituals protect your mental health the way brushing protects your teeth.
          Start with ten quiet minutes.
        </p>
        <div style={{display:'flex',alignItems:'center',gap:10}}>
          <span style={{fontFamily:BODY,fontSize:10.5,fontWeight:700,color:'#fff',background:ORANGE,
            padding:'8px 16px',borderRadius:12}}>Book a Session</span>
          <span style={{fontSize:10,color:INK5}}>Open to all individuals, genders &amp; identities</span>
        </div>
      </div>
      <ContactStrip/>
    </Sq>
  );

  // ── SqB · Quote Card (tinted) ─────────────────────────────────────
  const SqB = () => (
    <Sq bg={CREAM2}>
      <div style={{position:'absolute',top:-60,right:-60,width:200,height:200,borderRadius:'50%',
        background:'rgba(236,122,53,.12)'}}></div>
      <div style={{padding:'18px 22px'}}><Wordmark/></div>
      <div style={{flex:1,display:'flex',flexDirection:'column',justifyContent:'center',
        padding:'0 30px',gap:12,position:'relative'}}>
        <div style={{fontFamily:DISPLAY,fontSize:54,fontWeight:700,color:ORANGE,lineHeight:.6}}>“</div>
        <p style={{fontFamily:DISPLAY,fontSize:21,fontWeight:600,color:NAVY,lineHeight:1.4,
          margin:0,letterSpacing:'-.01em'}}>
          Healing is for everyone — no matter your story, or where you begin.
        </p>
        <div style={{display:'flex',alignItems:'center',gap:9,marginTop:4}}>
          <div style={{width:30,height:30,borderRadius:'50%',border:`2px solid ${ORANGE}`,
            background:BLUSH,display:'flex',alignItems:'center',justifyContent:'center',
            fontFamily:DISPLAY,fontSize:10,fontWeight:700,color:NAVY}}>AA</div>
          <div>
            <div style={{fontFamily:BODY,fontSize:10.5,fontWeight:700,color:INK}}>Aarti Ahuja</div>
            <div style={{fontFamily:BODY,fontSize:9,color:INK5}}>Founder, Tatava Studio</div>
          </div>
        </div>
      </div>
      <div style={{padding:'0 30px 18px'}}>
        <Eyebrow navy>Simplifying Wellness</Eyebrow>
      </div>
    </Sq>
  );

  // ── SqC · Hero Statement (circular halo) ─────────────────────────
  const SqC = () => (
    <Sq>
      <div style={{position:'absolute',top:'50%',left:'50%',transform:'translate(-50%,-54%)',
        width:265,height:265,borderRadius:'50%',background:CREAM2}}></div>
      <div style={{padding:'16px 22px',position:'relative'}}><Wordmark/></div>
      <div style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',
        justifyContent:'center',textAlign:'center',gap:12,position:'relative',padding:'0 34px'}}>
        <Eyebrow>Our Promise</Eyebrow>
        <h2 style={{fontFamily:DISPLAY,fontSize:31,fontWeight:700,color:NAVY,lineHeight:1.14,
          letterSpacing:'-.02em',margin:0}}>
          Healing Is for <em style={{color:ORANGE,fontStyle:'italic'}}>Everyone</em>
        </h2>
        <p style={{fontFamily:BODY,fontSize:11,color:INK5,lineHeight:1.6,margin:0,maxWidth:240}}>
          In-person and tele-counselling for stress, relationships, grief, trauma and sleep.
        </p>
      </div>
      <div style={{padding:'0 22px 14px',display:'flex',alignItems:'center',
        justifyContent:'center',position:'relative'}}>
        <span style={{fontFamily:BODY,fontSize:9.5,fontStyle:'italic',color:NAVY}}>
          Consultation By Appointment Only
        </span>
      </div>
      <ContactStrip/>
    </Sq>
  );

  // ── SqD · Founder Bio (photo + navy band) ─────────────────────────
  const SqD = () => (
    <Sq>
      <div style={{flex:1,display:'flex',padding:'18px 20px 14px',gap:16}}>
        <div style={{width:138,flexShrink:0,display:'flex',flexDirection:'column',gap:10}}>
          <div style={{position:'relative',width:124,height:150,margin:'6px 0 0 6px'}}>
            <div style={{position:'absolute',inset:0,transform:'translate(-6px,-6px)',
              background:NAVY,borderRadius:14}}></div>
            <div style={{position:'absolute',inset:0,borderRadius:14,border:`3px solid ${ORANGE}`,
              background:`linear-gradient(160deg,${BLUSH},${CREAM2})`,transform:'rotate(2deg)',
              display:'flex',alignItems:'center',justifyContent:'center',
              fontFamily:BODY,fontSize:8.5,fontWeight:600,letterSpacing:'.1em',
              textTransform:'uppercase',color:'rgba(33,54,108,.45)'}}>Founder photo</div>
          </div>
        </div>
        <div style={{flex:1,display:'flex',flexDirection:'column',gap:8,paddingTop:4}}>
          <Wordmark size={11} mark={14}/>
          <Eyebrow>Meet Your Psychologist</Eyebrow>
          <h2 style={{fontFamily:DISPLAY,fontSize:23,fontWeight:700,color:NAVY,lineHeight:1.1,
            letterSpacing:'-.02em',margin:0}}>Aarti Ahuja</h2>
          <p style={{fontFamily:BODY,fontSize:10,color:INK5,lineHeight:1.6,margin:0}}>
            MA Applied Psychology · NLP Trainer · Health &amp; Wellness Coach. An eclectic,
            evidence-based approach to therapy — delivered with warmth.
          </p>
          <div style={{display:'flex',gap:5,flexWrap:'wrap'}}>
            {['1,000+ sessions','12 yrs practice'].map(c => (
              <span key={c} style={{fontFamily:BODY,fontSize:8.5,fontWeight:600,padding:'3px 9px',
                borderRadius:999,background:BLUSH,color:NAVY}}>{c}</span>
            ))}
          </div>
        </div>
      </div>
      <div style={{background:NAVY,padding:'10px 20px',display:'flex',alignItems:'center',
        justifyContent:'space-between',flexShrink:0}}>
        <span style={{fontFamily:BODY,fontSize:9.5,fontWeight:600,color:CREAM}}>For Appointments Call · +91 85957 48981</span>
        <span style={{fontFamily:BODY,fontSize:9.5,color:'rgba(255,251,246,.65)'}}>tatavastudio.com</span>
      </div>
    </Sq>
  );

  // ── SqE · Listicle Teaser ─────────────────────────────────────────
  const SqE = () => (
    <Sq>
      <div style={{height:5,background:ORANGE,flexShrink:0}}></div>
      <div style={{padding:'14px 22px 0',display:'flex',alignItems:'center',
        justifyContent:'space-between'}}>
        <Wordmark/>
        <Eyebrow navy>Carousel · 1 of 6</Eyebrow>
      </div>
      <div style={{flex:1,display:'flex',flexDirection:'column',justifyContent:'center',
        padding:'0 26px',gap:12}}>
        <div style={{fontFamily:DISPLAY,fontSize:56,fontWeight:700,color:ORANGE,lineHeight:1}}>5</div>
        <h2 style={{fontFamily:DISPLAY,fontSize:24,fontWeight:700,color:NAVY,lineHeight:1.2,
          letterSpacing:'-.02em',margin:0,maxWidth:300}}>
          Signs You Should Seek <em style={{color:ORANGE,fontStyle:'italic'}}>Family Counselling</em> in Urban Areas
        </h2>
        <p style={{fontFamily:BODY,fontSize:11,color:INK5,lineHeight:1.6,margin:0,maxWidth:280}}>
          Seeking support is not weakness — it's wisdom. Swipe for the signs.
        </p>
      </div>
      <div style={{padding:'0 26px 16px',display:'flex',alignItems:'center',gap:8}}>
        <span style={{fontFamily:BODY,fontSize:10,fontWeight:700,color:ORANGE}}>Swipe</span>
        <svg width="18" height="10" viewBox="0 0 18 10"><path d="M0 5h15M12 1l4 4-4 4" stroke={ORANGE} strokeWidth="1.6" fill="none"/></svg>
      </div>
    </Sq>
  );

  // ── SqF · Services + CTA ──────────────────────────────────────────
  const SqF = () => (
    <Sq>
      <div style={{padding:'16px 22px 10px',display:'flex',alignItems:'center',
        justifyContent:'space-between',borderBottom:'1px solid #ECEEF3'}}>
        <Wordmark/>
        <Eyebrow>How We Help</Eyebrow>
      </div>
      <div style={{flex:1,display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,
        padding:'12px 22px',alignContent:'center'}}>
        {[
          'Stress & Anxiety','Depression','Family & Relationships',
          'Grief & Loss','Trauma (PTSD)','Sleep Training',
        ].map((s,i) => (
          <div key={s} style={{padding:'11px 12px',borderRadius:16,background:'#fff',
            border:'1px solid #EFD8BD',boxShadow:'0 2px 6px rgba(26,31,43,.05)',
            display:'flex',alignItems:'center',gap:8}}>
            <div style={{width:7,height:7,borderRadius:'50%',background:i%2?NAVY:ORANGE,flexShrink:0}}></div>
            <span style={{fontFamily:BODY,fontSize:10.5,fontWeight:600,color:INK}}>{s}</span>
          </div>
        ))}
      </div>
      <div style={{padding:'0 22px 14px',display:'flex',alignItems:'center',gap:10}}>
        <span style={{fontFamily:BODY,fontSize:10.5,fontWeight:700,color:'#fff',background:ORANGE,
          padding:'8px 16px',borderRadius:12}}>Book a Session</span>
        <span style={{fontFamily:BODY,fontSize:9.5,fontStyle:'italic',color:NAVY}}>Consultation By Appointment Only</span>
      </div>
      <ContactStrip/>
    </Sq>
  );

  // ── Stories (230×409) ─────────────────────────────────────────────
  const St = ({ children, bg = CREAM }) => (
    <div style={{width:230,height:409,background:bg,fontFamily:BODY,position:'relative',
      overflow:'hidden',display:'flex',flexDirection:'column',boxSizing:'border-box',
      WebkitFontSmoothing:'antialiased'}}>{children}</div>
  );

  // StA · Hero CTA story
  const StA = () => (
    <St>
      <div style={{position:'absolute',top:'38%',left:'50%',transform:'translate(-50%,-50%)',
        width:185,height:185,borderRadius:'50%',background:CREAM2}}></div>
      <div style={{padding:'16px 16px 0',display:'flex',justifyContent:'center',position:'relative'}}>
        <Wordmark size={10} mark={13}/>
      </div>
      <div style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',
        justifyContent:'center',textAlign:'center',gap:10,padding:'0 22px',position:'relative'}}>
        <Eyebrow>World Mental Health Day</Eyebrow>
        <h2 style={{fontFamily:DISPLAY,fontSize:22,fontWeight:700,color:NAVY,lineHeight:1.18,
          letterSpacing:'-.02em',margin:0}}>
          Your Mind Deserves <em style={{color:ORANGE,fontStyle:'italic'}}>Care</em> Too
        </h2>
        <p style={{fontFamily:BODY,fontSize:9.5,color:INK5,lineHeight:1.6,margin:0,maxWidth:170}}>
          Check in with yourself today — and with someone you love.
        </p>
        <span style={{fontFamily:BODY,fontSize:9.5,fontWeight:700,color:'#fff',background:ORANGE,
          padding:'7px 14px',borderRadius:12,marginTop:4}}>Book a Session</span>
      </div>
      <div style={{background:NAVY,padding:'8px 14px',textAlign:'center',flexShrink:0}}>
        <span style={{fontFamily:BODY,fontSize:8,color:CREAM}}>tatavastudio.com · New Delhi</span>
      </div>
    </St>
  );

  // StB · Light editorial list story
  const StB = () => (
    <St>
      <div style={{height:4,background:ORANGE,flexShrink:0}}></div>
      <div style={{padding:'13px 16px 0'}}><Wordmark size={10} mark={13}/></div>
      <div style={{flex:1,display:'flex',flexDirection:'column',padding:'14px 18px 0',gap:10}}>
        <Eyebrow band>Tonight's Wind-Down</Eyebrow>
        <h2 style={{fontFamily:DISPLAY,fontSize:17.5,fontWeight:700,color:NAVY,lineHeight:1.22,
          letterSpacing:'-.015em',margin:0}}>
          Three Steps to <em style={{color:ORANGE,fontStyle:'italic'}}>Better Sleep</em>
        </h2>
        <div style={{display:'flex',flexDirection:'column',gap:8,marginTop:2}}>
          {[
            ['Screens off','60 minutes before bed'],
            ['Body scan','5 slow breaths, head to toe'],
            ['Same time','keep a consistent wake hour'],
          ].map(([t,d],i) => (
            <div key={t} style={{display:'flex',gap:8,alignItems:'flex-start',padding:'9px 10px',
              borderRadius:12,background:i===0?BLUSH:'#fff',
              border:i===0?'none':'1px solid #ECEEF3'}}>
              <span style={{fontFamily:DISPLAY,fontSize:12,fontWeight:700,color:ORANGE,
                lineHeight:1.2,flexShrink:0}}>{i+1}</span>
              <div>
                <div style={{fontFamily:BODY,fontSize:10,fontWeight:700,color:INK}}>{t}</div>
                <div style={{fontFamily:BODY,fontSize:8.5,color:INK5,lineHeight:1.45}}>{d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{padding:'10px 18px 14px',display:'flex',alignItems:'center',
        justifyContent:'space-between'}}>
        <span style={{fontFamily:BODY,fontSize:8,color:INK5}}>Sleep Training · Tatava Studio</span>
        <span style={{fontFamily:BODY,fontSize:8.5,fontWeight:700,color:ORANGE}}>Save this</span>
      </div>
    </St>
  );

  // StC · Giant stat story
  const StC = () => (
    <St bg={CREAM2}>
      <div style={{padding:'14px 16px'}}><Wordmark size={10} mark={13}/></div>
      <div style={{flex:1,display:'flex',flexDirection:'column',justifyContent:'center',
        padding:'0 20px',gap:8}}>
        <Eyebrow navy>Did You Know</Eyebrow>
        <div style={{fontFamily:DISPLAY,fontSize:64,fontWeight:700,color:ORANGE,
          lineHeight:.95,letterSpacing:'-.03em'}}>1 in 7</div>
        <p style={{fontFamily:DISPLAY,fontSize:14.5,fontWeight:600,color:NAVY,lineHeight:1.35,margin:0}}>
          Indians live with a mental health condition — most never speak to anyone.
        </p>
        <p style={{fontFamily:BODY,fontSize:9.5,color:INK5,lineHeight:1.6,margin:'4px 0 0'}}>
          Talking to a professional is a first step, not a last resort.
        </p>
      </div>
      <div style={{background:ORANGE,padding:'10px 16px',display:'flex',alignItems:'center',
        justifyContent:'space-between',flexShrink:0}}>
        <span style={{fontFamily:BODY,fontSize:8.5,fontWeight:700,color:'#fff'}}>Book a Session</span>
        <span style={{fontFamily:BODY,fontSize:8,color:'rgba(255,255,255,.85)'}}>tatavastudio.com</span>
      </div>
    </St>
  );

  Object.assign(window, { SqA, SqB, SqC, SqD, SqE, SqF, StA, StB, StC });
})();