// VerityOne — shared components (Nav, Footer, Icons, Login modal)

const Icon = ({ name, size = 20 }) => {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    shield: <><path d="M12 2 4 5v6c0 5 3.5 9.5 8 11 4.5-1.5 8-6 8-11V5l-8-3z"/></>,
    bolt: <><polyline points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></>,
    file: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></>,
    building: <><rect x="4" y="3" width="16" height="18" rx="1"/><line x1="9" y1="7" x2="9" y2="7.01"/><line x1="14" y1="7" x2="14" y2="7.01"/><line x1="9" y1="11" x2="9" y2="11.01"/><line x1="14" y1="11" x2="14" y2="11.01"/><line x1="9" y1="15" x2="9" y2="15.01"/><line x1="14" y1="15" x2="14" y2="15.01"/></>,
    chart: <><line x1="3" y1="20" x2="21" y2="20"/><polyline points="6 16 10 12 14 14 20 6"/></>,
    users: <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
    globe: <><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 0 20 15.3 15.3 0 0 1 0-20z"/></>,
    phone: <><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72a2 2 0 0 1 1.72 2.02z"/></>,
    mail: <><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></>,
    arrow: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    check: <><polyline points="20 6 9 17 4 12"/></>,
    lock: <><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
    clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    map: <><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></>,
    pin: <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></>,
    search: <><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></>,
    award: <><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></>,
    truck: <><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></>,
    tool: <><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></>,
    briefcase: <><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></>,
    bell: <><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></>,
    bulb: <><path d="M9 18h6"/><path d="M10 22h4"/><path d="M12 2a7 7 0 0 0-4 12.6c.5.4.9 1.1 1 1.9.1.6.5 1 1 1h4c.5 0 .9-.4 1-1 .1-.8.5-1.5 1-1.9A7 7 0 0 0 12 2z"/></>
  };
  return <svg {...common}>{paths[name]}</svg>;
};

const Brand = ({ onClick, dark = false }) => (
  <div className="brand" onClick={onClick}>
    <div style={{
      width: 32, height: 32, borderRadius: 4,
      background: dark ? '#fff' : 'var(--navy-800)',
      color: dark ? 'var(--navy-800)' : '#fff',
      display: 'grid', placeItems: 'center',
      fontWeight: 700, fontSize: 14, letterSpacing: '-0.02em', fontFamily: 'var(--font-sans)'
    }}>V1</div>
    <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
      <span style={{ fontWeight: 700, fontSize: 18, letterSpacing: '-0.02em', color: dark ? '#fff' : 'var(--navy-800)' }}>
        VerityOne
      </span>
      <span style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: dark ? 'var(--ink-300)' : 'var(--ink-400)', marginTop: 3, fontWeight: 600 }}>
        Insurance · Est. 2003
      </span>
    </div>
  </div>
);

const UtilityBar = ({ show = true }) => (
  show === false ? null :
  <div className="utility-bar">
    <div className="container">
      <div className="util-left">
        <span><span className="dot"></span>All systems operational</span>
        <span>Broker portal uptime · 99.99% (30d)</span>
      </div>
      <div className="util-right">
        <a href="#">UK</a>
        <span style={{ color: 'var(--ink-500)' }}>|</span>
        <a href="#">Brokers</a>
        <a href="#">Investors</a>
        <a href="#">Press</a>
        <a href="#" style={{ color: '#9dbce6' }}>+44 (0)20 7946 0188</a>
      </div>
    </div>
  </div>
);

const Nav = ({ current, go, onStaffLogin }) => {
  const pages = [
    ['home', 'Home'],
    ['about', 'About'],
    ['coverage', 'Coverage'],
    ['claims', 'Claims'],
    ['risk', 'Risk'],
    ['contact', 'Contact']
  ];
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <Brand onClick={() => go('home')} />
        <div className="nav-links">
          {pages.map(([id, label]) => (
            <div
              key={id}
              className={`nav-link ${current === id ? 'active' : ''}`}
              onClick={() => go(id)}
            >{label}</div>
          ))}
        </div>
        <div className="nav-actions">
          <a className="btn btn-small btn-primary" onClick={(e) => { e.preventDefault(); go('contact'); }} href="#">Get a Quote</a>
          <button className="staff-login" onClick={onStaffLogin}>
            <Icon name="lock" size={14} />
            Staff Login
          </button>
        </div>
      </div>
    </nav>
  );
};

const Footer = ({ go }) => (
  <footer className="site-foot">
    <div className="container">
      <div className="foot-grid">
        <div className="foot-col">
          <div className="foot-brand">VerityOne</div>
          <p className="foot-brand-sub">Commercial insurance for organisations that don't have time for surprises.</p>
          <address className="foot-addr">
            VerityOne House<br/>
            46 Cornhill, London<br/>
            United Kingdom
          </address>
        </div>
        <div className="foot-col">
          <h5>Coverage</h5>
          <ul>
            <li><a onClick={() => go('coverage')} href="#">Property &amp; Casualty</a></li>
            <li><a onClick={() => go('coverage')} href="#">Professional Indemnity</a></li>
            <li><a onClick={() => go('coverage')} href="#">Directors &amp; Officers</a></li>
            <li><a onClick={() => go('coverage')} href="#">Cyber &amp; Technology</a></li>
            <li><a onClick={() => go('coverage')} href="#">Marine &amp; Logistics</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h5>Services</h5>
          <ul>
            <li><a onClick={() => go('claims')} href="#">Claims Process</a></li>
            <li><a onClick={() => go('risk')} href="#">Risk Services</a></li>
            <li><a href="#">Broker Portal</a></li>
            <li><a href="#">Reinsurance</a></li>
            <li><a href="#">Renewals</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h5>Company</h5>
          <ul>
            <li><a onClick={() => go('about')} href="#">About Us</a></li>
            <li><a href="#">Investors</a></li>
            <li><a href="#">Press &amp; Media</a></li>
            <li><a href="#">Sustainability</a></li>
            <li><a href="#">Modern Slavery Statement</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h5>Support</h5>
          <ul>
            <li><a onClick={() => go('contact')} href="#">Contact</a></li>
            <li><a href="#">Find a Broker</a></li>
            <li><a href="#">Document Library</a></li>
            <li><a href="#">Complaints</a></li>
            <li><a href="#">Accessibility</a></li>
          </ul>
        </div>
      </div>
      <div className="foot-bottom">
        <div>© 2024 VerityOne Holdings PLC. All rights reserved.</div>
        <div className="legal">
          <a href="#">Privacy Notice</a>
          <a href="#">Cookies</a>
          <a href="#">Modern Slavery Statement</a>
          <a href="#">Gender Pay Gap</a>
          <a href="#">Sitemap</a>
        </div>
      </div>
      <div style={{ paddingBottom: 32 }}>
        <p className="foot-regs">
          VerityOne Insurance Services Limited (Company No. 04918237) is authorised and regulated by the Financial Conduct Authority (FRN 318204).
          Registered office: VerityOne House, 46 Cornhill, London EC3V 3PB. A member of the British Insurance Brokers&apos; Association (BIBA).
          Calls may be recorded and monitored for training and quality purposes.
        </p>
      </div>
    </div>
  </footer>
);

// The only account this portal accepts. Login is a plain equality check
// against these two fixed strings — there's no database or query involved
// anywhere in this app, so there's no SQL for anything to "inject" into.
// The credentials are matched exactly (email case-insensitive, password
// case-sensitive) and never echoed back into the page, so mistyped input
// can't do anything but fail the comparison.
const SIU_CREDENTIALS = {
  email: 'junior.investigator@verityone-insurance.co.uk',
  password: 'SIU@sharp123'
};

const LoginModal = ({ onClose, onSuccess }) => {
  const [user, setUser] = React.useState('');
  const [pass, setPass] = React.useState('');
  const [error, setError] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    const emailOk = user.trim().toLowerCase() === SIU_CREDENTIALS.email.toLowerCase();
    const passOk = pass === SIU_CREDENTIALS.password;
    if (emailOk && passOk) {
      setError(false);
      (onSuccess || onClose)();
    } else {
      setError(true);
    }
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="close" onClick={onClose}>×</button>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 16, padding: '4px 10px', background: 'var(--navy-50)', borderRadius: 4, fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--navy-700)', fontWeight: 600 }}>
          <Icon name="lock" size={12} /> Staff Portal
        </div>
        <h3>Sign in to VerityOne SIU</h3>
        <div className="modal-sub">Special Investigations Unit · Case Management System.</div>
        <form className="form-row" onSubmit={submit}>
          <div className="field">
            <label>Email address</label>
            <input type="email" placeholder="name@verityone-insurance.co.uk" autoComplete="username"
                   value={user} onChange={(e) => { setUser(e.target.value); setError(false); }}
                   className={error ? 'error' : ''} />
          </div>
          <div className="field">
            <label>Password</label>
            <input type="password" placeholder="••••••••" autoComplete="current-password"
                   value={pass} onChange={(e) => { setPass(e.target.value); setError(false); }}
                   className={error ? 'error' : ''} />
          </div>
          {error && <div className="form-error">Invalid email or password.</div>}
          <div className="small">
            <label style={{ display: 'inline-flex', gap: 6, alignItems: 'center', fontWeight: 400, color: 'var(--ink-500)' }}>
              <input type="checkbox" defaultChecked /> Keep me signed in
            </label>
            <a href="#">Forgot password?</a>
          </div>
          <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: 6 }}>Continue</button>
        </form>
        <div style={{ marginTop: 18, fontSize: 11, color: 'var(--ink-400)', textAlign: 'center', lineHeight: 1.5 }}>
          Authorised access only. Activity is logged.<br/>
          v4.2.0 · Last security review: March 2024
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Icon, Brand, UtilityBar, Nav, Footer, LoginModal });