/* Iris - mockups */

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

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

function HeroComposition() {
  return (
    <div className="hero-stage">
      <div className="hero-portrait-card">
        <img src={PORTRAIT_SRC} alt="Iris, Admin Assistant"/>
        <div className="hero-portrait-meta">
          <div>
            <div className="name">Iris</div>
            <div className="role">Admin Assistant</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>admin-iris</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' }}>FD</div>
            <div>
              <div className="hero-msg-meta">Founder <span className="time">just now</span></div>
              <div className="hero-msg-text">Just got back from 3 days off-grid. 200 unread.</div>
            </div>
          </div>
          <div className="hero-msg">
            <img className="hero-msg-avatar" src={PORTRAIT_SRC} alt=""/>
            <div>
              <div className="hero-msg-meta"><span className="admin">Iris</span> <span className="time">just now</span></div>
              <div className="hero-msg-text" dangerouslySetInnerHTML={{ __html: `On it. Sorting now. <strong>3 actually need you</strong>. Newsletters archived, intros replied, calendar reorganized.` }}/>
            </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="admin">Iris</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">Daily brief ready</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">3 emails for you:</span> Investor intro, customer escalation, Friday board ask<br/><span style="color:#0891b0;font-weight:600">18 replied in your tone:</span> Mostly intros and scheduling, all logged<br/><span style="color:#0891b0;font-weight:600">Calendar:</span> Deep-work block protected at 10-12 today<br/>` }}/>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="hero-stat-pill hero-stat-1">
        <div>
          <div className="v"><em>8h</em></div>
          <div className="l">saved per week</div>
        </div>
      </div>
      <div className="hero-stat-pill hero-stat-2">
        <div>
          <div className="v">0</div>
          <div className="l">in your inbox</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)' }}>Iris</div>
          <div style={{ font: '400 11px/1.2 var(--gt-font)', color: 'var(--gt-fg-3)' }}>Admin Assistant · 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 }}>Iris\'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 }}>Iris · 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 = {
  "Gmail": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="#4285f4" d="M2 5.7v12.6c0 .9.7 1.7 1.7 1.7H6V9.6L2 5.7z"/><path fill="#34a853" d="M18 20h2.3c.9 0 1.7-.7 1.7-1.7V5.7L18 9.6V20z"/><path fill="#fbbc04" d="M18 4.3v5.3l4-3.9V4.3c0-.7-.8-1.1-1.4-.7L18 4.3z"/><path fill="#ea4335" d="M6 9.6V4.3l6 4.5 6-4.5v5.3l-6 4.5-6-4.5z"/><path fill="#c5221f" d="M2 4.3v1.4l4 3.9V4.3c0-.7-.8-1.1-1.4-.7L2 4.3z"/></svg>`,
  "Calendar": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><rect x="3" y="5" width="18" height="16" rx="2" fill="#4285f4"/><rect x="3" y="5" width="18" height="3" fill="#3367D6"/><rect x="7" y="3" width="2" height="4" fill="#3367D6"/><rect x="15" y="3" width="2" height="4" fill="#3367D6"/><circle cx="12" cy="14" r="3" fill="#fff"/></svg>`,
  "Brex": `<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="#FFCB6B"/><path fill="#000" d="M6 6h6c2.2 0 4 1.8 4 4 0 1.4-.7 2.6-1.8 3.3 1.4.6 2.3 2 2.3 3.7 0 2.2-1.8 4-4 4H6V6zm3 3v3h2.5c.8 0 1.5-.7 1.5-1.5S12.3 9 11.5 9H9zm0 6v3h3c.8 0 1.5-.7 1.5-1.5S14.3 15 13.5 15H9z"/></svg>`,
  "Notion": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="#000" d="M4.46 3.62c.63.51 1.1.66 1.94.6l9.83-.6c.21 0 .04-.21-.04-.24l-1.65-1.18c-.32-.24-.74-.51-1.51-.44L3.5 2.45c-.33.02-.4.18-.27.3.13.14.6.6 1.23.87zm.59 2.3v10.34c0 .55.28.76.91.74l10.8-.62c.63-.03.7-.42.7-.87V5.24c0-.45-.17-.7-.55-.66l-11.28.65c-.42.03-.58.24-.58.69zm10.66.55c.07.32 0 .63-.32.66l-.52.1v7.68c-.45.24-.87.39-1.22.39-.55 0-.69-.17-1.1-.69L9.31 9.32v5.18l1.08.24s0 .63-.87.63l-2.4.14c-.07-.13 0-.45.24-.51l.62-.17V7.84l-.86-.07c-.07-.32.1-.79.6-.83l2.58-.17 3.55 5.42v-4.8l-.9-.1c-.07-.4.22-.69.59-.72z"/></svg>`,
  "Slack": `<img src="/images/logos/tools/slack.png" alt="Slack"/>`,
  "Concur": `<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="#0072CE"/><path fill="#fff" d="M12 5a7 7 0 100 14 7 7 0 000-14zm0 2a5 5 0 110 10 5 5 0 010-10z"/></svg>`,
  "Airbnb": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="#FF5A5F" d="M12 2c-.7 0-1.4.4-1.7 1.1L3.5 16.3c-.8 1.6.4 3.7 2.2 3.7 1.1 0 2.1-.6 2.6-1.5l.4-.7c1.1 1.4 2.3 2.2 3.3 2.2 1 0 2.2-.8 3.3-2.2l.4.7c.5.9 1.5 1.5 2.6 1.5 1.8 0 3-2.1 2.2-3.7L13.7 3.1C13.4 2.4 12.7 2 12 2zm0 9c.8 0 1.5.6 1.7 1.3l1 2c-1 1.4-2 2.1-2.7 2.1s-1.7-.7-2.7-2.1l1-2c.2-.7.9-1.3 1.7-1.3z"/></svg>`,
  "Stripe": `<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="#635bff"/><path fill="#fff" d="M11.4 9.6c0-.7.6-1 1.5-1 1.3 0 3 .4 4.3 1.1V5.4c-1.4-.5-2.8-.8-4.3-.8-3.5 0-5.9 1.8-5.9 4.9 0 4.7 6.4 4 6.4 6 0 .8-.7 1.1-1.7 1.1-1.5 0-3.4-.6-4.8-1.4v4.3c1.6.7 3.2 1 4.8 1 3.6 0 6.2-1.8 6.2-4.9 0-5.1-6.5-4.3-6.5-6z"/></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.IrisMocks = {
  HeroComposition, LinkedInPostMock, CalendarMock, DMReplyMock, ScenarioMock, BrandLogo, PORTRAIT_SRC,
};