// hf-video.jsx — Hi-fi branded video storyboard templates (640×340). Sets window.HB_VIDEO.
// On-brand: cream surface, Poppins/Open Sans, saffron/navy. No dark mode.
(function () {
  const W = 640, H = 340;

  if (typeof document !== 'undefined' && !document.getElementById('hf-video-styles')) {
    const s = document.createElement('style');
    s.id = 'hf-video-styles';
    s.textContent = `
    .hfv{background:#FFFBF6;color:#1A1F2B;display:flex;flex-direction:column;height:100%;width:100%;
      font-family:'Open Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
      box-sizing:border-box;overflow:hidden}
    .hfv *{box-sizing:border-box}
    .hfv-head{padding:11px 18px;display:flex;align-items:center;justify-content:space-between;
      border-bottom:1px solid #ECEEF3;flex:0 0 auto;gap:10px;background:#fff}
    .hfv-logo{display:flex;align-items:center;gap:7px;flex:0 0 auto}
    .hfv-wm{font-family:'Bebas Neue',Impact,sans-serif;font-size:12px;letter-spacing:1.5px;
      color:#21366C;line-height:1}
    .hfv-badge{font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
      color:#EC7A35}
    .hfv-dur{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:500;
      color:#6A7286;flex:0 0 auto}
    .hfv-strip{flex:1;display:flex;align-items:stretch;padding:12px 14px;gap:6px;overflow:hidden}
    .hfv-beat{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
    .hfv-frame{flex:1;border-radius:12px;border:1px solid #ECEEF3;
      background:#fff;box-shadow:0 2px 6px rgba(26,31,43,.05);
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
      padding:10px 8px;text-align:center;position:relative;overflow:hidden;min-height:0}
    .hfv-frame.hi{border:1.5px solid rgba(236,122,53,.45);background:#FFF4EC}
    .hfv-tc{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;
      font-weight:500;color:#EC7A35;letter-spacing:.04em;flex:0 0 auto}
    .hfv-note{font-size:9px;color:#6A7286;line-height:1.4;text-align:center;
      font-family:'Open Sans',sans-serif}
    .hfv-lbl{font-size:10.5px;font-weight:600;color:#21366C;text-align:center;line-height:1.3;
      font-family:'Poppins',sans-serif}
    .hfv-ph{width:100%;height:44px;border-radius:8px;background:#FCE6E0;
      border:1px dashed rgba(33,54,108,.25);display:flex;align-items:center;
      justify-content:center;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;
      color:rgba(33,54,108,.5);font-weight:600}
    .hfv-ph.hi{border-color:rgba(236,122,53,.5);background:#FFE2CE;color:#B14F17}
    .hfv-divr{width:1px;background:#ECEEF3;flex:0 0 auto;align-self:stretch;margin:0 1px}
    .hfv-foot{padding:7px 18px 9px;border-top:1px solid #ECEEF3;background:#21366C;
      display:flex;align-items:center;gap:10px;flex:0 0 auto}
    .hfv-foot-l{font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
      color:rgba(255,251,246,.7)}
    .hfv-foot-r{font-size:8.5px;color:rgba(255,251,246,.5)}
    `;
    document.head.appendChild(s);
  }

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

  const Beat = ({ tc, label, note, hi = false, ph = null }) => (
    <div className="hfv-beat">
      <div className={'hfv-frame' + (hi ? ' hi' : '')}>
        {ph && <div className={'hfv-ph' + (hi ? ' hi' : '')}>{ph}</div>}
        <div className="hfv-lbl">{label}</div>
      </div>
      <div className="hfv-tc">{tc}</div>
      <div className="hfv-note">{note}</div>
    </div>
  );

  const Divr = () => <div className="hfv-divr"></div>;

  const HFVHead = ({ badge, dur }) => (
    <div className="hfv-head">
      <div className="hfv-logo">
        <Mark size={15}/>
        <span className="hfv-wm">TATAVA STUDIO</span>
      </div>
      <div className="hfv-badge">{badge}</div>
      <div className="hfv-dur">{dur}</div>
    </div>
  );

  const HFVFoot = () => (
    <div className="hfv-foot">
      <span className="hfv-foot-l">Tatava Studio · Simplifying Wellness</span>
      <div style={{flex:1,height:1,background:'rgba(255,251,246,.12)'}}></div>
      <span className="hfv-foot-r">tatavastudio.com</span>
    </div>
  );

  // ── 1 · Question-led reel ────────────────────────────────────────
  const VideoHF1 = () => (
    <div className="hfv">
      <HFVHead badge="Question-led · 12s reel" dur=":12"/>
      <div className="hfv-strip">
        <Beat tc="0 – 3s" label="Feeling stretched thin?" note="Navy text fades in on cream." />
        <Divr/>
        <Beat tc="3 – 6s" label="Warm candid" ph="person photo" note="Slow push-in B-roll, golden hour." hi />
        <Divr/>
        <Beat tc="6 – 9s" label="3 signs flip up" note="Orange numbered bullets, one beat each." />
        <Divr/>
        <Beat tc="9 – 12s" label="Logo + Book a Session" ph="end card" note="Hold 1s. Orange CTA on cream." hi />
      </div>
      <HFVFoot/>
    </div>
  );

  // ── 2 · How-To Steps (Box Breathing) ────────────────────────────
  const VideoHF2 = () => (
    <div className="hfv">
      <HFVHead badge="How-To Steps · 12s reel" dur=":12"/>
      <div className="hfv-strip">
        <Beat tc="0 – 2s" label="Box Breathing" note="Tracked-out eyebrow wipes in." />
        <Divr/>
        <Beat tc="2 – 5s" label="Inhale, 4 counts" ph="square trace" note="Orange square draws its outline." hi />
        <Divr/>
        <Beat tc="5 – 8s" label="Hold, 4 counts" note="Ticks 1 · 2 · 3 · 4 animate gently." />
        <Divr/>
        <Beat tc="8 – 10s" label="Exhale slowly" ph="square fades" note="Square un-draws. Soft ease-out." hi />
        <Divr/>
        <Beat tc="10 – 12s" label="Logo + loop hint" note="Handle + Book a Session CTA." />
      </div>
      <HFVFoot/>
    </div>
  );

  // ── 3 · Clinician-led ────────────────────────────────────────────
  const VideoHF3 = () => (
    <div className="hfv">
      <HFVHead badge="Clinician-led · 12s reel" dur=":12"/>
      <div className="hfv-strip">
        <Beat tc="0 – 3s" label="Aarti to camera" ph="portrait" note="Circular crop, orange ring." hi />
        <Divr/>
        <Beat tc="3 – 7s" label="Lower-third name" note="Credentials slide up — navy on cream." />
        <Divr/>
        <Beat tc="7 – 10s" label="B-roll insert" ph="b-roll" note="Hands / journal. Captions on." hi />
        <Divr/>
        <Beat tc="10 – 12s" label="End card" note="Tagline + Book a Session. Hold 1s." />
      </div>
      <HFVFoot/>
    </div>
  );

  window.HB_VIDEO = [
    {id:'hvd-01',name:'Video · Question-led',  w:W,h:H,comp:VideoHF1},
    {id:'hvd-02',name:'Video · How-To Steps',  w:W,h:H,comp:VideoHF2},
    {id:'hvd-03',name:'Video · Clinician-led', w:W,h:H,comp:VideoHF3},
  ];
})();