/* Reza - mockups */

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

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

function HeroComposition() {
  return (
    <div className="hero-stage">
      <div className="hero-portrait-card">
        <img src={PORTRAIT_SRC} alt="Reza, Real Estate VA"/>
        <div className="hero-portrait-meta">
          <div>
            <div className="name">Reza</div>
            <div className="role">Real Estate VA</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>re-reza</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' }}>ZL</div>
            <div>
              <div className="hero-msg-meta">Zillow <span className="time">just now</span></div>
              <div className="hero-msg-text">New buyer enquiry: 743 Maple St · price 825K · ready to tour.</div>
            </div>
          </div>
          <div className="hero-msg">
            <img className="hero-msg-avatar" src={PORTRAIT_SRC} alt=""/>
            <div>
              <div className="hero-msg-meta"><span className="realestate">Reza</span> <span className="time">just now</span></div>
              <div className="hero-msg-text" dangerouslySetInnerHTML={{ __html: `Replied in 47 seconds. Qualifying now. <strong>Pre-approved at 850K</strong>, wants to tour Sunday.` }}/>
            </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="realestate">Reza</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">Lead · Sarah K · hot</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">Tour:</span> Sun 14:00 · 743 Maple · listing agent confirmed<br/><span style="color:#0891b0;font-weight:600">Comps:</span> 5 recent sales within 0.5 mi · attached<br/><span style="color:#0891b0;font-weight:600">CRM:</span> Tagged 'hot buyer' · timeline 60 days<br/>` }}/>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="hero-stat-pill hero-stat-1">
        <div>
          <div className="v"><em>90s</em></div>
          <div className="l">first reply to a lead</div>
        </div>
      </div>
      <div className="hero-stat-pill hero-stat-2">
        <div>
          <div className="v">3×</div>
          <div className="l">more leads qualified</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)' }}>Reza</div>
          <div style={{ font: '400 11px/1.2 var(--gt-font)', color: 'var(--gt-fg-3)' }}>Real Estate VA · 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 }}>Reza\'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 }}>Reza · 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 = {
  "Zillow": `<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="#006AFF"/><path fill="#fff" d="M12 4l8 5v2l-3 1v6h-3v-4h-4v4H7v-6l-3-1V9l8-5z"/></svg>`,
  "MLS": `<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="#003B5C"/><path fill="#fff" d="M5 17V7l3 6 3-6v10H9v-5l-1 2H7l-1-2v5H5zm9 0V7h2v8h4v2h-6z"/></svg>`,
  "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>`,
  "Slack": `<img src="/images/logos/tools/slack.png" alt="Slack"/>`,
  "SMS": `<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="#34c759"/><path fill="#fff" d="M5 8a3 3 0 013-3h8a3 3 0 013 3v5a3 3 0 01-3 3h-3l-3 3v-3H8a3 3 0 01-3-3V8z"/></svg>`,
  "WhatsApp": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="#25D366" d="M12.04 2c-5.5 0-9.96 4.46-9.96 9.96 0 1.75.46 3.46 1.32 4.96L2 22l5.25-1.37a9.95 9.95 0 0 0 4.79 1.22c5.5 0 9.96-4.46 9.96-9.96 0-2.66-1.04-5.16-2.92-7.04A9.93 9.93 0 0 0 12.04 2z"/></svg>`,
  "HubSpot": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="#ff7a59" d="M18.16 8.55V6.21a1.8 1.8 0 0 0 1.04-1.62 1.8 1.8 0 1 0-3.6 0c0 .73.43 1.36 1.04 1.62v2.34a5.1 5.1 0 0 0-2.43.96L8.49 5.49c.05-.17.08-.34.08-.52a1.93 1.93 0 1 0-3.86 0 1.93 1.93 0 0 0 3.86 0c0-.05-.01-.1-.01-.15L13.86 9a5.18 5.18 0 0 0-.8 2.78c0 1.13.37 2.17.98 3.02l-1.7 1.7a1.67 1.67 0 0 0-1.94.31 1.67 1.67 0 1 0 2.37 0v-.06l1.7-1.7a5.2 5.2 0 1 0 3.69-6.5z"/></svg>`,
  "DocuSign": `<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="#FFCC22"/><path fill="#000" d="M7 8h10v1.5H7zm0 3h10v1.5H7zm0 3h7v1.5H7z"/></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.RezaMocks = {
  HeroComposition, LinkedInPostMock, CalendarMock, DMReplyMock, ScenarioMock, BrandLogo, PORTRAIT_SRC,
};