/* Viamar Desktop — Account */

function AcctRow({ icon, title, sub, trailing, onClick, last }) {
  return (
    <div onClick={onClick} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '15px 18px', cursor: 'pointer', borderTop: last ? 'none' : '1px solid ' + T.line2 }}
      onMouseEnter={e => e.currentTarget.style.background = T.paper}
      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
      <div style={{ width: 38, height: 38, borderRadius: 10, background: T.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <Icon name={icon} size={19} color={T.navy} stroke={1.9} />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: FB, fontWeight: 600, fontSize: 14.5, color: T.ink }}>{title}</div>
        {sub && <div style={{ fontFamily: FB, fontSize: 12, color: T.muted, marginTop: 1 }}>{sub}</div>}
      </div>
      {trailing && <span style={{ fontFamily: FM, fontSize: 11, color: T.muted, marginRight: 4 }}>{trailing}</span>}
      <Icon name="chevR" size={17} color={T.faint} stroke={2.2} />
    </div>
  );
}

function AccountScreen({ onQuote, onNav }) {
  return (
    <div className="vscroll" style={{ height: '100%', overflowY: 'auto', padding: '30px 40px 48px' }}>
      {/* profile header */}
      <div style={{ background: T.navy, borderRadius: 22, padding: '28px 30px', display: 'flex', alignItems: 'center', gap: 20, marginBottom: 28, position: 'relative', overflow: 'hidden' }}>
        <div style={{ width: 72, height: 72, borderRadius: '50%', background: 'linear-gradient(135deg,#2C5172,#112A44)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FD, fontWeight: 800, fontSize: 28, color: '#fff', boxShadow: 'inset 0 0 0 1.5px rgba(255,255,255,0.14)', flexShrink: 0 }}>A</div>
        <div style={{ flex: 1 }}>
          <Display size={26} color="#fff">Alessandro M.</Display>
          <div style={{ fontFamily: FM, fontSize: 12, color: 'rgba(255,255,255,0.55)', letterSpacing: 0.3, marginTop: 5 }}>Member since 2024 · 3 shipments · Toronto, ON</div>
        </div>
        <Btn variant="primary" icon="spark" onClick={onQuote}>New quote</Btn>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 28, alignItems: 'start' }}>
        {/* left: account + support */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <div>
            <Kicker color={T.navy3} style={{ marginBottom: 12, paddingLeft: 2 }}>Account</Kicker>
            <Card pad={0} style={{ overflow: 'hidden' }}>
              <AcctRow icon="box" title="My shipments" sub="3 total · 1 active" trailing="View" onClick={() => onNav('track')} last />
              <AcctRow icon="doc" title="Documents & customs" sub="Bills of lading, B-13, insurance certificates" />
              <AcctRow icon="user" title="Profile & contact details" sub="Name, email, phone, addresses" />
              <AcctRow icon="shield" title="Recover shipments" sub="Send a magic link for another device" onClick={() => window.ViamarAPI && ViamarAPI.promptRecovery()} />
              <AcctRow icon="bell" title="Notifications" sub="Email & SMS shipment alerts" trailing="On" />
            </Card>
          </div>
          <div>
            <Kicker color={T.navy3} style={{ marginBottom: 12, paddingLeft: 2 }}>Support</Kicker>
            <Card pad={0} style={{ overflow: 'hidden' }}>
              <AcctRow icon="phone" title="Call us" sub="1-800-277-7570 · Mon–Fri 8am–6pm ET" last />
              <AcctRow icon="globe" title="Where we ship" sub="250+ ports worldwide" />
              <AcctRow icon="shield" title="Cargo insurance" sub="Coverage options & claims" />
              <AcctRow icon="doc" title="Canada customs (CBSA)" sub="Inspection inquiries · 905-676-3626" />
            </Card>
          </div>
        </div>

        {/* right: referral + credentials */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <div style={{ background: T.red, borderRadius: 20, padding: 22, position: 'relative', overflow: 'hidden' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 13, marginBottom: 14 }}>
              <div style={{ width: 46, height: 46, borderRadius: 13, background: 'rgba(255,255,255,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name="gift" size={25} color="#fff" stroke={2} />
              </div>
              <div>
                <div style={{ fontFamily: FD, fontWeight: 800, fontSize: 18, color: '#fff', fontStretch: '110%' }}>Refer & save $100</div>
                <div style={{ fontFamily: FB, fontSize: 12.5, color: 'rgba(255,255,255,0.85)', lineHeight: 1.35, marginTop: 2 }}>Give a friend $100 off their first shipment. You get $100 too.</div>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'rgba(255,255,255,0.15)', borderRadius: 12, padding: '12px 16px' }}>
              <span style={{ flex: 1, fontFamily: FM, fontWeight: 700, fontSize: 15, color: '#fff', letterSpacing: 3 }}>ALE-1976</span>
              <span style={{ fontFamily: FM, fontSize: 10.5, fontWeight: 700, color: T.red, background: '#fff', padding: '7px 14px', borderRadius: 8, textTransform: 'uppercase', letterSpacing: 0.5, cursor: 'pointer' }}>Copy</span>
            </div>
          </div>

          <div>
            <Kicker color={T.navy3} style={{ marginBottom: 12, paddingLeft: 2 }}>Credentials</Kicker>
            <div style={{ background: T.navy, borderRadius: 20, padding: '22px 20px' }}>
              <div style={{ display: 'flex', gap: 8 }}>
                <Seal label="CIFFA" sub="Certified" />
                <Seal label="FIATA" sub="Member" />
                <Seal label="1976" sub="Founded" color={T.red} />
                <Seal label="250" sub="Ports" />
              </div>
              <div style={{ fontFamily: FB, fontSize: 12, color: 'rgba(255,255,255,0.6)', lineHeight: 1.55, marginTop: 18, textAlign: 'center' }}>
                Viamar Scilla Transport International — family-owned freight forwarder, accredited and insured for worldwide cargo.
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* company footer — real Viamar details */}
      <div style={{ marginTop: 28, background: '#fff', border: '1px solid ' + T.line2, borderRadius: 20, padding: '24px 28px' }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 30, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 280 }}>
            <div style={{ fontFamily: FD, fontWeight: 900, fontSize: 20, color: T.ink, fontStretch: '125%', letterSpacing: '0.02em' }}>VIA<span style={{ color: T.red }}>MAR</span></div>
            <div style={{ fontFamily: FB, fontSize: 12, color: T.muted, marginTop: 4 }}>Viamar Scilla Transport International Inc.</div>
            <div style={{ fontFamily: FB, fontSize: 12, color: T.body, lineHeight: 1.6, marginTop: 12 }}>
              Proud member of C.I.F.F.A. (Canadian International Freight Forwarders Association), trading under C.I.F.F.A. standard terms. Quoted rates exclude marine cargo insurance.
            </div>
          </div>
          <div>
            <div style={{ fontFamily: FM, fontSize: 9.5, letterSpacing: 0.8, color: T.faint, textTransform: 'uppercase', marginBottom: 8 }}>Head office</div>
            <div style={{ fontFamily: FB, fontSize: 12.5, color: T.body, lineHeight: 1.6 }}>4000 Steeles Ave. West, Unit&nbsp;#9<br />Vaughan, ON · L4L 4V9</div>
            <div style={{ fontFamily: FM, fontSize: 9.5, letterSpacing: 0.8, color: T.faint, textTransform: 'uppercase', margin: '14px 0 8px' }}>Warehouse</div>
            <div style={{ fontFamily: FB, fontSize: 12.5, color: T.body, lineHeight: 1.6 }}>86 Courtice Ct<br />Courtice, ON · L1E 2T3</div>
          </div>
          <div>
            <div style={{ fontFamily: FM, fontSize: 9.5, letterSpacing: 0.8, color: T.faint, textTransform: 'uppercase', marginBottom: 8 }}>Contact</div>
            {[['Toll free', '1-800-277-7570'], ['Phone', '416-747-9774'], ['Fax', '905-856-0844'], ['Email', 'info@viamar.ca'], ['Web', 'www.viamar.ca']].map(([l, v], i) => (
              <div key={i} style={{ display: 'flex', gap: 12, marginBottom: 5 }}>
                <span style={{ width: 56, fontFamily: FM, fontSize: 11, color: T.faint }}>{l}</span>
                <span style={{ fontFamily: FB, fontWeight: 600, fontSize: 12.5, color: T.ink }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AccountScreen });