// hf-poster.jsx — Hi-fi A-series portrait poster templates (414×586). Sets window.HB_POSTER.
// On-brand: Poppins display / Open Sans body / Bebas Neue wordmark, cream surfaces,
// navy headline + single orange highlight, tracked-out eyebrows, navy contact bands. No emoji.
(function () {
  const W = 414, H = 586;
  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 = 20, 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 P = ({ children, bg = CREAM }) => (
    <div style={{width:W,height:H,background:bg,fontFamily:BODY,position:'relative',
      overflow:'hidden',display:'flex',flexDirection:'column',
      WebkitFontSmoothing:'antialiased',boxSizing:'border-box'}}>
      {children}
    </div>
  );

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

  const LogoRow = ({ white = false, label = '' }) => (
    <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
      <div style={{display:'flex',alignItems:'center',gap:8}}>
        <Mark size={20} white={white}/>
        <span style={{fontFamily:LOGO,fontSize:13,letterSpacing:1.5,
          color:white?CREAM:NAVY}}>TATAVA STUDIO</span>
      </div>
      {label && <span style={{fontFamily:BODY,fontSize:9,fontWeight:600,letterSpacing:'.12em',
        textTransform:'uppercase',color:white?'rgba(255,251,246,.55)':INK5}}>{label}</span>}
    </div>
  );

  const ContactBand = ({ cta = 'Book a Session' }) => (
    <div style={{padding:'12px 22px',background:NAVY,display:'flex',alignItems:'center',
      justifyContent:'space-between',flexShrink:0,marginTop:'auto'}}>
      <div>
        <div style={{fontFamily:LOGO,fontSize:11,letterSpacing:1,color:CREAM}}>TATAVA STUDIO</div>
        <div style={{fontFamily:BODY,fontSize:8.5,color:'rgba(255,251,246,.6)',marginTop:1}}>
          tatavastudio.com · +91 85957 48981 · Simplifying Wellness
        </div>
      </div>
      <div style={{padding:'7px 15px',borderRadius:12,background:ORANGE,fontFamily:BODY,
        fontSize:10.5,fontWeight:700,color:'#fff'}}>{cta}</div>
    </div>
  );

  const PhotoFrame = ({ w, h, label, tilt = 2, navyBlock = false }) => (
    <div style={{position:'relative',width:w,height:h}}>
      <div style={{position:'absolute',inset:0,transform:'translate(-6px,6px)',
        background:navyBlock?NAVY:ORANGE,borderRadius:16}}></div>
      <div style={{position:'absolute',inset:0,borderRadius:16,
        border:`3px solid ${navyBlock?ORANGE:NAVY}`,transform:`rotate(${tilt}deg)`,
        background:`linear-gradient(160deg,${BLUSH},${CREAM2})`,
        display:'flex',alignItems:'center',justifyContent:'center',
        fontFamily:BODY,fontSize:9.5,fontWeight:600,letterSpacing:'.1em',
        textTransform:'uppercase',color:'rgba(33,54,108,.45)'}}>{label}</div>
    </div>
  );

  // ── A: Editorial "5 Signs" listicle ───────────────────────────────
  const PosterA = () => (
    <P>
      <div style={{padding:'16px 22px',borderBottom:'1px solid rgba(33,54,108,.09)',flexShrink:0}}>
        <LogoRow label="Family · Listicle"/>
      </div>
      <div style={{flex:1,display:'flex',flexDirection:'column',padding:'20px 22px 0'}}>
        <div style={{marginBottom:12}}><Eyebrow band>Family Counselling</Eyebrow></div>
        <h1 style={{fontFamily:DISPLAY,fontSize:30,fontWeight:700,color:NAVY,
          lineHeight:1.14,letterSpacing:'-.02em',margin:0}}>
          5 Signs You Should Seek <em style={{color:ORANGE,fontStyle:'italic'}}>Family
          Counselling</em> in Urban Areas
        </h1>
        <p style={{fontFamily:BODY,fontSize:11.5,color:INK5,lineHeight:1.65,
          margin:'12px 0 0',maxWidth:310}}>
          Seeking support is not weakness — it's wisdom. Real signs your family could
          benefit from professional care.
        </p>
        <div style={{display:'flex',flexDirection:'column',gap:8,marginTop:16}}>
          {[
            'Recurring arguments without resolution',
            'Emotional distance between members',
            'A child showing behaviour changes',
            'Communication has broken down',
            'A major life transition — grief, loss, a move',
          ].map((item,i) => (
            <div key={i} style={{display:'flex',alignItems:'flex-start',gap:10}}>
              <div style={{width:21,height:21,borderRadius:'50%',
                background:i===0?ORANGE:BLUSH,
                color:i===0?'#fff':NAVY,fontFamily:DISPLAY,fontSize:10,fontWeight:700,
                display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,marginTop:1}}>{i+1}</div>
              <span style={{fontFamily:BODY,fontSize:11.5,color:'#3A4154',lineHeight:1.5,flex:1}}>{item}</span>
            </div>
          ))}
        </div>
      </div>
      <ContactBand/>
    </P>
  );

  // ── B: Founder Bio — photo + navy band ───────────────────────────
  const PosterB = () => (
    <P>
      <div style={{padding:'16px 22px 0',flexShrink:0}}><LogoRow label="About Us"/></div>
      <div style={{height:235,flexShrink:0,display:'flex',alignItems:'center',
        justifyContent:'center',position:'relative'}}>
        <div style={{position:'absolute',top:'52%',left:'50%',transform:'translate(-50%,-50%)',
          width:205,height:205,borderRadius:'50%',background:CREAM2}}></div>
        <div style={{width:148,height:148,borderRadius:'50%',position:'relative',
          border:`3px solid ${ORANGE}`,background:`linear-gradient(160deg,${BLUSH},${CREAM2})`,
          display:'flex',alignItems:'center',justifyContent:'center',
          fontFamily:BODY,fontSize:9.5,fontWeight:600,letterSpacing:'.1em',
          textTransform:'uppercase',color:'rgba(33,54,108,.45)'}}>Founder portrait</div>
      </div>
      <div style={{flex:1,padding:'10px 26px 0',display:'flex',flexDirection:'column',gap:11}}>
        <Eyebrow>Meet Your Psychologist</Eyebrow>
        <h2 style={{fontFamily:DISPLAY,fontSize:34,fontWeight:700,color:NAVY,
          lineHeight:1.05,letterSpacing:'-.02em',margin:0}}>Aarti Ahuja</h2>
        <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
          {['MA Applied Psychology','NLP Trainer','Wellness Coach','1,000+ Sessions'].map(c => (
            <span key={c} style={{fontFamily:BODY,fontSize:9.5,fontWeight:600,padding:'4px 11px',
              borderRadius:999,background:BLUSH,color:NAVY}}>{c}</span>
          ))}
        </div>
        <p style={{fontFamily:BODY,fontSize:11.5,color:INK5,lineHeight:1.65,margin:0}}>
          A psychologist with an eclectic approach to therapy — specialising in stress,
          relationships and family counselling. Rooted in evidence, delivered with warmth.
        </p>
      </div>
      <ContactBand cta="For Appointments Call"/>
    </P>
  );

  // ── C: Services grid ──────────────────────────────────────────────
  const PosterC = () => {
    const services = [
      ['Stress & Anxiety','Tools to quiet the noise'],
      ['Sleep Training','Restore restful nights'],
      ['Family & Relationships','Build deeper bonds'],
      ['Grief & Loss','Navigate with care'],
      ['Depression','Find your footing again'],
      ['Trauma (PTSD)','Heal at your own pace'],
    ];
    return (
      <P>
        <div style={{padding:'16px 22px 14px',borderBottom:'1px solid rgba(33,54,108,.09)',flexShrink:0}}>
          <LogoRow label="Services"/>
          <div style={{marginTop:14,marginBottom:8}}><Eyebrow>What We Offer</Eyebrow></div>
          <h2 style={{fontFamily:DISPLAY,fontSize:27,fontWeight:700,color:NAVY,
            letterSpacing:'-.02em',margin:0,lineHeight:1.12}}>
            How We Can <em style={{color:ORANGE,fontStyle:'italic'}}>Help</em>
          </h2>
        </div>
        <div style={{flex:1,display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,
          padding:'14px 22px',alignContent:'start'}}>
          {services.map(([label,sub],i) => (
            <div key={label} style={{padding:'14px 13px',borderRadius:16,background:'#fff',
              border:'1px solid #EFD8BD',boxShadow:'0 2px 6px rgba(26,31,43,.05)',
              display:'flex',flexDirection:'column',gap:5}}>
              <div style={{width:9,height:9,borderRadius:'50%',
                background:i%2?NAVY:ORANGE,marginBottom:3}}></div>
              <div style={{fontFamily:DISPLAY,fontSize:12.5,fontWeight:600,color:NAVY,lineHeight:1.25}}>{label}</div>
              <div style={{fontFamily:BODY,fontSize:10,color:INK5,lineHeight:1.45}}>{sub}</div>
            </div>
          ))}
        </div>
        <div style={{padding:'0 22px 12px',textAlign:'center'}}>
          <span style={{fontFamily:BODY,fontSize:10,fontStyle:'italic',color:NAVY}}>
            Open to all individuals, genders &amp; identities
          </span>
        </div>
        <ContactBand/>
      </P>
    );
  };

  // ── D: Type manifesto — cream, halo, navy headline ────────────────
  const PosterD = () => (
    <P>
      <div style={{position:'absolute',top:'46%',left:'50%',transform:'translate(-50%,-50%)',
        width:330,height:330,borderRadius:'50%',background:CREAM2}}></div>
      <div style={{padding:'18px 26px',position:'relative',flexShrink:0}}><LogoRow/></div>
      <div style={{flex:1,display:'flex',flexDirection:'column',justifyContent:'center',
        padding:'0 30px',gap:16,position:'relative'}}>
        <Eyebrow band>Our Promise</Eyebrow>
        <h1 style={{fontFamily:DISPLAY,fontSize:48,fontWeight:700,color:NAVY,
          lineHeight:1.04,letterSpacing:'-.025em',margin:0}}>
          Healing Is for <em style={{color:ORANGE,fontStyle:'italic'}}>Everyone</em>.
        </h1>
        <p style={{fontFamily:BODY,fontSize:12.5,color:INK5,lineHeight:1.7,
          maxWidth:285,margin:0}}>
          No matter your story, your background, or where you are in your journey —
          support is here. Tatava Studio stands with every community.
        </p>
        <div style={{width:52,height:3,background:ORANGE,borderRadius:2}}></div>
      </div>
      <ContactBand/>
    </P>
  );

  // ── E: Credentials band ───────────────────────────────────────────
  const PosterE = () => (
    <P>
      <div style={{flex:1,display:'flex',flexDirection:'column',padding:'16px 22px 14px',gap:13}}>
        <LogoRow label="By the Numbers"/>
        <div style={{marginTop:3}}><Eyebrow>Why Tatava</Eyebrow></div>
        <h2 style={{fontFamily:DISPLAY,fontSize:28,fontWeight:700,color:NAVY,
          letterSpacing:'-.02em',lineHeight:1.1,margin:0}}>
          A Practice You Can <em style={{color:ORANGE,fontStyle:'italic'}}>Trust</em>
        </h2>
        <div style={{display:'flex',gap:7}}>
          {[['1,000+','Sessions'],['12 yrs','Practice'],['4.9','Rating'],['BHF','Partner']].map(([n,l]) => (
            <div key={l} style={{flex:1,padding:'11px 6px',borderRadius:16,
              background:'#fff',border:'1px solid #EFD8BD',textAlign:'center',
              boxShadow:'0 2px 6px rgba(26,31,43,.05)'}}>
              <div style={{fontFamily:DISPLAY,fontSize:15,fontWeight:700,color:NAVY,lineHeight:1}}>{n}</div>
              <div style={{fontFamily:BODY,fontSize:8.5,fontWeight:600,letterSpacing:'.08em',
                textTransform:'uppercase',color:INK5,marginTop:4}}>{l}</div>
            </div>
          ))}
        </div>
        <div style={{flex:1,display:'flex',alignItems:'center',justifyContent:'center',
          minHeight:120,paddingTop:6}}>
          <PhotoFrame w={300} h={118} label="Studio / session photo" tilt={-1.5}/>
        </div>
        <div style={{background:BLUSH,borderRadius:16,padding:'13px 16px'}}>
          <p style={{fontFamily:DISPLAY,fontSize:13,fontWeight:600,color:NAVY,
            lineHeight:1.45,margin:0,fontStyle:'italic'}}>
            “Every session is a step towards the life you want.”
          </p>
          <div style={{fontFamily:BODY,fontSize:9.5,color:INK5,marginTop:6}}>— Aarti Ahuja, Founder</div>
        </div>
      </div>
      <ContactBand/>
    </P>
  );

  // ── F: Event / Save the Date ──────────────────────────────────────
  const PosterF = () => (
    <P>
      <div style={{padding:'16px 22px',display:'flex',alignItems:'center',
        justifyContent:'space-between',flexShrink:0}}>
        <div style={{display:'flex',alignItems:'center',gap:8}}>
          <Mark size={20}/>
          <span style={{fontFamily:LOGO,fontSize:13,letterSpacing:1.5,color:NAVY}}>TATAVA STUDIO</span>
        </div>
        <Eyebrow band>Save the Date</Eyebrow>
      </div>
      <div style={{flex:1,display:'flex',flexDirection:'column',padding:'8px 26px 0',gap:15}}>
        <div style={{display:'flex',alignItems:'baseline',gap:16}}>
          <span style={{fontFamily:DISPLAY,fontSize:88,fontWeight:700,lineHeight:.9,
            color:ORANGE,letterSpacing:'-.03em',flexShrink:0}}>18</span>
          <div style={{display:'flex',flexDirection:'column',gap:3}}>
            <div style={{fontFamily:DISPLAY,fontSize:16,fontWeight:600,color:NAVY,
              letterSpacing:'.02em',textTransform:'uppercase'}}>January 2026</div>
            <div style={{fontFamily:BODY,fontSize:11.5,color:INK5}}>Saturday · 6:00 PM IST</div>
          </div>
        </div>
        <h2 style={{fontFamily:DISPLAY,fontSize:28,fontWeight:700,color:NAVY,
          lineHeight:1.12,letterSpacing:'-.02em',margin:0}}>
          A Free <em style={{color:ORANGE,fontStyle:'italic'}}>Mindfulness</em> Workshop
        </h2>
        <p style={{fontFamily:BODY,fontSize:11.5,color:INK5,lineHeight:1.65,margin:0,maxWidth:300}}>
          Evidence-based tools to reduce stress and reclaim calm — for professionals,
          parents and students.
        </p>
        <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
          {['Vikas Marg, New Delhi','Free · Limited Spots','Open to All'].map(tag => (
            <span key={tag} style={{fontFamily:BODY,fontSize:10,fontWeight:600,padding:'5px 13px',
              borderRadius:999,background:BLUSH,color:NAVY}}>{tag}</span>
          ))}
        </div>
        <div style={{marginTop:2}}>
          <PhotoFrame w={340} h={92} label="Workshop / venue photo" tilt={1.2} navyBlock/>
        </div>
      </div>
      <ContactBand cta="Register"/>
    </P>
  );

  window.HB_POSTER = [
    {id:'hpo-01',name:'Editorial · 5 Signs',        w:W,h:H,comp:PosterA},
    {id:'hpo-02',name:'Founder Bio · Aarti Ahuja',  w:W,h:H,comp:PosterB},
    {id:'hpo-03',name:'Services Grid',              w:W,h:H,comp:PosterC},
    {id:'hpo-04',name:'Type Manifesto',             w:W,h:H,comp:PosterD},
    {id:'hpo-05',name:'Credentials Band',           w:W,h:H,comp:PosterE},
    {id:'hpo-06',name:'Event · Save the Date',      w:W,h:H,comp:PosterF},
  ];
})();