/* Vera - mockups */

const { IconCheck, IconArrow, IconHeart, IconComment, IconRepeat, IconSend } = window.VeraIcons;

const PORTRAIT_SRC = "../images/employees/video.jpg";

function HeroComposition() {
  return (
    <div className="hero-stage">
      <div className="hero-portrait-card">
        <img src={PORTRAIT_SRC} alt="Vera, Video Producer"/>
        <div className="hero-portrait-meta">
          <div>
            <div className="name">Vera</div>
            <div className="role">Video Producer</div>
          </div>
          <div className="hero-portrait-badge">
            <span className="dot"/>Active
          </div>
        </div>
      </div>

      <div className="hero-chat-card">
        <div className="hero-chat-head">
          <div className="hero-chat-head-l">
            <span className="channel-tag">#</span>
            <span>video-vera</span>
          </div>
          <div className="live"><span className="pulse-dot"/>Live</div>
        </div>
        <div className="hero-chat-body">
          <div className="hero-msg">
            <div className="hero-msg-avatar placeholder" style={{ background: '#fed7aa', color: '#9a3412' }}>HM</div>
            <div>
              <div className="hero-msg-meta">Host <span className="time">just now</span></div>
              <div className="hero-msg-text">Just dropped the 90 min podcast in your folder. Need clips by tomorrow.</div>
            </div>
          </div>
          <div className="hero-msg">
            <img className="hero-msg-avatar" src={PORTRAIT_SRC} alt=""/>
            <div>
              <div className="hero-msg-meta"><span className="video">Vera</span> <span className="time">just now</span></div>
              <div className="hero-msg-text" dangerouslySetInnerHTML={{ __html: `On it. Reading the transcript, scoring moments. <strong>10 vertical shorts</strong> by tonight.` }}/>
            </div>
          </div>
          <div className="hero-msg">
            <img className="hero-msg-avatar" src={PORTRAIT_SRC} alt=""/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="hero-msg-meta"><span className="video">Vera</span> <span className="time">just now</span></div>
              <div className="hero-msg-text" style={{ marginBottom: 6 }}>Done. Summary:</div>
              <div className="hero-li-draft">
                <div className="hero-li-draft-head">
                  <span className="hero-li-draft-source">Podcast #42 · 10 clips</span>
                  <span className="hero-li-draft-badge" style={{ background: '#dcfce7', color: '#15803d' }}>READY</span>
                </div>
                <div className="hero-li-draft-body" dangerouslySetInnerHTML={{ __html: `<span style="color:#0891b0;font-weight:600">Top clip:</span> The 3 min counter-intuitive answer about pricing<br/><span style="color:#0891b0;font-weight:600">Platforms:</span> YouTube Shorts · TikTok · LinkedIn · X · Reels<br/><span style="color:#0891b0;font-weight:600">Schedule:</span> Best time per channel · all queued<br/>` }}/>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="hero-stat-pill hero-stat-1">
        <div>
          <div className="v"><em>10</em></div>
          <div className="l">clips per long-form</div>
        </div>
      </div>
      <div className="hero-stat-pill hero-stat-2">
        <div>
          <div className="v">72h</div>
          <div className="l">faster to publish</div>
        </div>
      </div>
    </div>
  );
}

function LinkedInPostMock() {
  return (
    <div className="mock-card" style={{ background: '#fff', border: '1px solid var(--gt-border)', borderRadius: 14, padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <img src={PORTRAIT_SRC} alt="" style={{ width: 36, height: 36, borderRadius: 18, objectFit: 'cover' }}/>
        <div style={{ flex: 1 }}>
          <div style={{ font: '600 13px/1.2 var(--gt-font)', color: 'var(--gt-fg-1)' }}>Vera</div>
          <div style={{ font: '400 11px/1.2 var(--gt-font)', color: 'var(--gt-fg-3)' }}>Video Producer · live</div>
        </div>
        <span style={{ background: '#dcfce7', color: '#15803d', font: '600 10px/1 var(--gt-font)', padding: '4px 8px', borderRadius: 4 }}>WORKING</span>
      </div>
      <div style={{ background: 'var(--gt-cyan-tint)', border: '1px solid rgba(8,145,176,0.18)', borderRadius: 10, padding: '12px 14px', font: '400 12.5px/1.55 var(--gt-font)', color: 'var(--gt-fg-1)' }}>
        <div style={{ font: '600 10px/1 var(--gt-font)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gt-cyan)', marginBottom: 6 }}>Latest task</div>
        She is processing the current batch, drafting replies in your tone, and logging every action.
      </div>
    </div>
  );
}

function CalendarMock() {
  return (
    <div className="mock-card" style={{ background: '#fff', border: '1px solid var(--gt-border)', borderRadius: 14, padding: '20px 22px' }}>
      <div style={{ font: '600 13.5px/1 var(--gt-font)', color: 'var(--gt-fg-1)', marginBottom: 14 }}>Vera\'s day · 5 moments</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {[
          ['08:30', 'Morning queue triaged'],
          ['10:00', 'Active task processed'],
          ['13:00', 'Mid-day batch handled'],
          ['15:30', 'Afternoon work shipped'],
          ['18:00', 'Daily digest sent'],
        ].map(function(row, i) {
          return (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', background: '#fafbfc', border: '1px solid var(--gt-border-subtle)', borderRadius: 8 }}>
              <span style={{ font: '600 11px/1 ui-monospace, monospace', color: 'var(--gt-cyan)', minWidth: 50 }}>{row[0]}</span>
              <span style={{ font: '500 12.5px/1.3 var(--gt-font)', color: 'var(--gt-fg-1)' }}>{row[1]}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function DMReplyMock() {
  return (
    <div className="mock-card" style={{ background: '#fff', border: '1px solid var(--gt-border)', borderRadius: 14, padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{ font: '600 13.5px/1 var(--gt-font)', color: 'var(--gt-fg-1)' }}>Handoff with full context</div>
      <div style={{ display: 'flex', gap: 10 }}>
        <img src={PORTRAIT_SRC} alt="" style={{ width: 28, height: 28, borderRadius: 14, objectFit: 'cover' }}/>
        <div style={{ flex: 1, background: 'var(--gt-cyan-tint)', border: '1px solid rgba(8,145,176,0.18)', borderRadius: 10, padding: '10px 12px', font: '400 12px/1.55 var(--gt-font)', color: 'var(--gt-fg-1)' }}>
          <div style={{ font: '600 10px/1 var(--gt-font)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gt-cyan)', marginBottom: 6 }}>Vera · context summary</div>
          When something needs your attention, she hands it over with the full history, what she tried, and a suggested next step.
        </div>
      </div>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        <span style={{ background: '#dcfce7', color: '#15803d', font: '600 10px/1 var(--gt-font)', padding: '4px 8px', borderRadius: 4 }}>history attached</span>
        <span style={{ background: '#dbeafe', color: '#1e40af', font: '600 10px/1 var(--gt-font)', padding: '4px 8px', borderRadius: 4 }}>next step proposed</span>
        <span style={{ background: '#fef3c7', color: '#92400e', font: '600 10px/1 var(--gt-font)', padding: '4px 8px', borderRadius: 4 }}>your decision needed</span>
      </div>
    </div>
  );
}

function ScenarioMock({ children, header }) {
  return (
    <div className="mock-card" style={{ background: '#fff', border: '1px solid var(--gt-border)', borderRadius: 14, overflow: 'hidden' }}>
      <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--gt-border-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>{header}</div>
      <div style={{ padding: '14px 16px' }}>{children}</div>
    </div>
  );
}

const BRAND_LOGOS = {
  "YouTube": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><rect x="2" y="6" width="20" height="12" rx="3" fill="#FF0000"/><path fill="#fff" d="M10 9l5 3-5 3z"/></svg>`,
  "TikTok": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="#000" d="M17 2h-3v13a3 3 0 11-3-3v-3a6 6 0 106 6V8a7 7 0 003 .6V5.5a4 4 0 01-3-3.5z"/></svg>`,
  "Instagram": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><rect x="2" y="2" width="20" height="20" rx="5" fill="#E1306C"/><circle cx="12" cy="12" r="5" fill="none" stroke="#fff" stroke-width="2"/><circle cx="18" cy="6" r="1.3" fill="#fff"/></svg>`,
  "LinkedIn": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><rect width="24" height="24" rx="4" fill="#0a66c2"/><path fill="#fff" d="M6.94 8.5a1.94 1.94 0 1 1 0-3.88 1.94 1.94 0 0 1 0 3.88zM5.13 19V9.5h3.63V19H5.13zm5.81 0h3.5v-5.4c0-1.42.27-2.79 2.03-2.79 1.74 0 1.76 1.62 1.76 2.88V19h3.5v-5.97c0-3.06-.66-5.4-4.23-5.4-1.72 0-2.87.94-3.34 1.83h-.05V7.94h-3.17V19z"/></svg>`,
  "X": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><rect width="24" height="24" rx="4" fill="#000"/><path fill="#fff" d="M17 5h2.5l-5.5 6.3L21 19h-5l-4-5-4.5 5H5l5.8-6.6L4.5 5H10l3.6 4.7L17 5z"/></svg>`,
  "Descript": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><rect width="24" height="24" rx="4" fill="#1B1B1B"/><path fill="#fff" d="M6 12a6 6 0 016-6h2v2h-2a4 4 0 100 8h2v2h-2a6 6 0 01-6-6zm9 0h3v2h-3z"/></svg>`,
  "Adobe": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><rect width="24" height="24" rx="4" fill="#FA0F00"/><path fill="#fff" d="M9 5l-5 14h3l1-3h3l1 3h3L10 5H9zm0 3l1 5H8l1-5z"/></svg>`,
  "Canva": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><circle cx="12" cy="12" r="11" fill="#00C4CC"/><circle cx="12" cy="12" r="6" fill="#fff"/><circle cx="12" cy="12" r="3" fill="#7D2AE7"/></svg>`,
};
function BrandLogo({ name }) {
  const svg = BRAND_LOGOS[name];
  if (!svg) return <div style={{ width: 28, height: 28, borderRadius: 8, background: '#f6f9fc', color: 'var(--gt-fg-3)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: '700 12px/1 var(--gt-font)' }}>{name[0]}</div>;
  return <div style={{ width: 64, height: 56, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
    <div style={{ width: 56, height: 56, display: "flex", alignItems: "center", justifyContent: "center" }} dangerouslySetInnerHTML={{ __html: svg.replace(/<svg /, `<svg preserveAspectRatio="xMidYMid meet" style="width:56px;height:48px;display:block" `).replace(/<img /, `<img style="max-width:56px;max-height:48px;width:auto;height:auto;object-fit:contain;display:block" `) }} />
  </div>;
}

window.VeraMocks = {
  HeroComposition, LinkedInPostMock, CalendarMock, DMReplyMock, ScenarioMock, BrandLogo, PORTRAIT_SRC,
};