/* Noa - Finance mockups: reconciliation, AR aging, board pack */

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

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

function HeroComposition() {
  return (
    <div className="hero-stage">
      <div className="hero-portrait-card">
        <img src={PORTRAIT_SRC} alt="Noa, Financial Analyst"/>
        <div className="hero-portrait-meta">
          <div>
            <div className="name">Noa</div>
            <div className="role">Financial Analyst</div>
          </div>
          <div className="hero-portrait-badge">
            <span className="dot"/>Reconciling
          </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>finance-noa</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' }}>CF</div>
            <div>
              <div className="hero-msg-meta">CFO <span className="time">09:14</span></div>
              <div className="hero-msg-text">Stripe payout doesn't tie out. $1,070 off.</div>
            </div>
          </div>
          <div className="hero-msg">
            <img className="hero-msg-avatar" src={PORTRAIT_SRC} alt=""/>
            <div>
              <div className="hero-msg-meta"><span className="noa">Noa</span> <span className="time">09:25</span></div>
              <div className="hero-msg-text">
                Two refunds (already approved) + <span className="hl">one chargeback to investigate</span>. Reconciled, ticket opened.
              </div>
            </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="noa">Noa</span> <span className="time">09:30</span></div>
              <div className="hero-msg-text" style={{ marginBottom: 6 }}>Closed and filed:</div>
              <div className="hero-li-draft">
                <div className="hero-li-draft-head">
                  <span className="hero-li-draft-source">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#0891b0" strokeWidth="2" aria-hidden="true"><path d="M12 1v22M5 5h11a4 4 0 010 8H8a4 4 0 000 8h11"/></svg>
                    Stripe payout · $47,180
                  </span>
                  <span className="hero-li-draft-badge" style={{ background: '#dcfce7', color: '#15803d' }}>RECONCILED</span>
                </div>
                <div className="hero-li-draft-body">
                  <span style={{ color: '#0891b0', fontWeight: 600 }}>Charges:</span> 142 · all matched<br/>
                  <span style={{ color: '#0891b0', fontWeight: 600 }}>Refunds:</span> 2 · coded to acc 4900<br/>
                  <span style={{ color: '#0891b0', fontWeight: 600 }}>Chargeback:</span> ticket #4821 sent to Stripe
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="hero-stat-pill hero-stat-1">
        <div>
          <div className="v"><em>3 d</em></div>
          <div className="l">month-end close</div>
        </div>
      </div>
      <div className="hero-stat-pill hero-stat-2">
        <div>
          <div className="v">-22%</div>
          <div className="l">DSO</div>
        </div>
      </div>
    </div>
  );
}

/* RECONCILIATION MOCK - Row 1 */
function LinkedInPostMock() {
  const rows = [
    { label: 'Stripe gross', amount: '$48,250', side: 'left' },
    { label: 'Stripe fees', amount: '- $1,370', side: 'left' },
    { label: 'Refunds (2)', amount: '- $580', side: 'left' },
    { label: 'Chargeback (1)', amount: '- $490', side: 'flag' },
    { label: 'Net payout', amount: '$45,810', side: 'sum' },
  ];
  return (
    <div className="mock-card" style={{ background: '#fff', border: '1px solid var(--gt-border)', borderRadius: 14, padding: 0, overflow: 'hidden' }}>
      <div style={{ background: '#f6f9fc', borderBottom: '1px solid var(--gt-border-subtle)', padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 28, height: 28, borderRadius: 6, background: '#635bff', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: '700 12px/1 var(--gt-font)' }}>$</div>
        <div style={{ flex: 1 }}>
          <div style={{ font: '600 13px/1.2 var(--gt-font)', color: 'var(--gt-fg-1)' }}>Stripe payout · May 19</div>
          <div style={{ font: '400 11px/1.2 var(--gt-font)', color: 'var(--gt-fg-3)' }}>142 charges · matched to QuickBooks</div>
        </div>
        <span style={{ background: '#dcfce7', color: '#15803d', font: '600 10px/1 var(--gt-font)', padding: '4px 8px', borderRadius: 4 }}>RECONCILED</span>
      </div>
      <div style={{ padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 6 }}>
        {rows.map(function(r, i) {
          var isFlag = r.side === 'flag';
          var isSum = r.side === 'sum';
          return (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
              padding: '10px 12px',
              background: isSum ? 'var(--gt-cyan-tint)' : (isFlag ? '#fef3c7' : '#fafbfc'),
              border: '1px solid ' + (isSum ? 'rgba(8,145,176,0.18)' : (isFlag ? '#fde68a' : 'var(--gt-border-subtle)')),
              borderRadius: 8,
            }}>
              <span style={{ font: '500 12.5px/1 var(--gt-font)', color: isSum ? 'var(--gt-cyan)' : 'var(--gt-fg-1)', fontWeight: isSum ? 700 : 500 }}>
                {r.label}
                {isFlag && <span style={{ marginLeft: 8, background: '#fbbf24', color: '#78350f', font: '600 9px/1 var(--gt-font)', padding: '2px 5px', borderRadius: 3 }}>NEEDS REVIEW</span>}
              </span>
              <span style={{ font: '600 13px/1 ui-monospace, monospace', color: isSum ? 'var(--gt-cyan)' : (isFlag ? '#78350f' : 'var(--gt-fg-1)'), fontWeight: isSum ? 700 : 600 }}>{r.amount}</span>
            </div>
          );
        })}
      </div>
      <div style={{ padding: '10px 14px', background: 'var(--gt-cyan-tint)', borderTop: '1px solid rgba(8,145,176,0.18)' }}>
        <div style={{ font: '600 10.5px/1 var(--gt-font)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gt-cyan)', marginBottom: 4 }}>Noa · summary</div>
        <div style={{ font: '400 12px/1.5 var(--gt-font)', color: 'var(--gt-fg-1)' }}>
          Chargeback from customer Acme. Dispute opened with Stripe. Final loss is recoverable if we provide shipping proof.
        </div>
      </div>
    </div>
  );
}

/* AR AGING MOCK - Row 2 */
function CalendarMock() {
  const ar = [
    { customer: 'Acme', amount: '$12,400', days: '38 days', status: 'reminder sent', statusBg: '#dbeafe', statusColor: '#1e40af', tone: 'warm' },
    { customer: 'Lumen', amount: '$6,200', days: '52 days', status: 'firmer note', statusBg: '#fef3c7', statusColor: '#92400e', tone: 'firm' },
    { customer: 'Folio', amount: '$3,400', days: '71 days', status: 'escalated to CSM', statusBg: '#fee2e2', statusColor: '#991b1b', tone: 'escalation' },
    { customer: 'Volt', amount: '$8,150', days: '21 days', status: 'pre-due reminder', statusBg: '#dcfce7', statusColor: '#15803d', tone: 'warm' },
    { customer: 'Pixela', amount: '$1,900', days: '14 days', status: 'pre-due reminder', statusBg: '#dcfce7', statusColor: '#15803d', tone: 'warm' },
  ];
  return (
    <div className="mock-card" style={{ background: '#fff', border: '1px solid var(--gt-border)', borderRadius: 14, padding: '16px 18px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <div style={{ font: '600 13.5px/1 var(--gt-font)', color: 'var(--gt-fg-1)' }}>AR aging · $32K outstanding</div>
        <span style={{ background: '#fef3c7', color: '#92400e', font: '600 10px/1 var(--gt-font)', padding: '4px 8px', borderRadius: 4 }}>1 ESCALATED</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {ar.map(function(item, i) {
          return (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', background: '#fafbfc', border: '1px solid var(--gt-border-subtle)', borderRadius: 10 }}>
              <div style={{ width: 80 }}>
                <div style={{ font: '600 12.5px/1.2 var(--gt-font)', color: 'var(--gt-fg-1)' }}>{item.customer}</div>
                <div style={{ font: '400 10.5px/1.2 var(--gt-font)', color: 'var(--gt-fg-3)' }}>{item.days}</div>
              </div>
              <div style={{ flex: 1, font: '700 14px/1 ui-monospace, monospace', color: 'var(--gt-fg-1)' }}>{item.amount}</div>
              <span style={{ background: item.statusBg, color: item.statusColor, font: '600 10px/1 var(--gt-font)', padding: '4px 8px', borderRadius: 4 }}>{item.status}</span>
            </div>
          );
        })}
      </div>
      <div style={{ marginTop: 14, padding: '10px 12px', background: 'var(--gt-cyan-tint)', border: '1px solid rgba(8,145,176,0.18)', borderRadius: 10, font: '500 12px/1.4 var(--gt-font)', color: 'var(--gt-fg-1)' }}>
        <b style={{ color: 'var(--gt-cyan)' }}>Acme</b> · last invoice paid 11 days late. Tone: warm but specific. Reminder sent 09:14.
      </div>
    </div>
  );
}

/* BOARD PACK MOCK - Row 3 */
function DMReplyMock() {
  return (
    <div className="mock-card" style={{ background: '#fff', border: '1px solid var(--gt-border)', borderRadius: 14, overflow: 'hidden' }}>
      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--gt-border-subtle)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 22, height: 22, borderRadius: 5, background: '#0891b0', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: '700 11px/1 var(--gt-font)' }}>B</div>
        <span style={{ font: '600 13px/1 var(--gt-font)', color: 'var(--gt-fg-1)' }}>May board pack · draft v1</span>
        <span style={{ background: '#dcfce7', color: '#15803d', font: '600 10px/1 var(--gt-font)', padding: '4px 8px', borderRadius: 4, marginLeft: 'auto' }}>FRIDAY 18:00</span>
      </div>
      <div style={{ padding: '14px 16px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8, marginBottom: 12 }}>
          {[
            { l: 'ARR', v: '$2.84M', d: '+8.4%', dColor: '#15803d' },
            { l: 'Net new ARR', v: '$210K', d: 'vs $185K plan', dColor: '#15803d' },
            { l: 'Gross margin', v: '78%', d: 'flat', dColor: 'var(--gt-fg-3)' },
            { l: 'Runway', v: '19 months', d: 'unchanged', dColor: 'var(--gt-fg-3)' },
          ].map(function(k, i) {
            return (
              <div key={i} style={{ padding: '10px 12px', background: '#fafbfc', border: '1px solid var(--gt-border-subtle)', borderRadius: 8 }}>
                <div style={{ font: '500 10.5px/1 var(--gt-font)', color: 'var(--gt-fg-3)', textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: 4 }}>{k.l}</div>
                <div style={{ font: '700 18px/1 var(--gt-font)', color: 'var(--gt-fg-1)' }}>{k.v}</div>
                <div style={{ font: '500 11px/1.2 var(--gt-font)', color: k.dColor, marginTop: 2 }}>{k.d}</div>
              </div>
            );
          })}
        </div>

        <div style={{ background: 'var(--gt-cyan-tint)', border: '1px solid rgba(8,145,176,0.18)', borderRadius: 8, 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 }}>Noa · 3 questions the board will ask</div>
          1. ARR growth slowed last week, is it churn or sales pacing?<br/>
          2. CAC payback inched up to 17 months, where is the leak?<br/>
          3. EU revenue is 28% of total, do we need a local entity?
        </div>
      </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 = {
  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>',
  QuickBooks:  '<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="#2CA01C"/><path fill="#fff" d="M11 6h2v12h-2zm-3.5 2.5L9 10c-1.1 0-2 .9-2 2s.9 2 2 2v1.5C7.6 15.5 6 14 6 12s1.6-3.5 3.5-3.5zm9 0v1.5c1.1 0 2 .9 2 2s-.9 2-2 2v1.5c1.9 0 3.5-1.5 3.5-3.5s-1.6-3.5-3.5-3.5z"/></svg>',
  Xero:        '<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="#13B5EA"/><circle cx="7.5" cy="12" r="2" fill="none" stroke="#fff" strokeWidth="1.5"/><circle cx="16.5" cy="12" r="2" fill="none" stroke="#fff" strokeWidth="1.5"/><path stroke="#fff" strokeWidth="1.5" d="M10 9.5l4 5M14 9.5l-4 5"/></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>',
  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"/>',
  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.5zm-.8 7.74a2.74 2.74 0 1 1 0-5.48 2.74 2.74 0 0 1 0 5.48z"/></svg>',
  Excel:       '<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="#217346"/><path fill="#fff" d="M14 5h5v14h-5zM8 8l-3 4 3 4h2.5L8 12l2.5-4z"/></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.NoaMocks = {
  HeroComposition, LinkedInPostMock, CalendarMock, DMReplyMock, ScenarioMock, BrandLogo, PORTRAIT_SRC,
};