// VerityOne — Claims, Coverage, Risk, Careers pages

const Claims = ({ go }) => (
  <>
    <section className="page-hero">
      <div className="container">
        <div className="crumbs">VerityOne <span>/</span> Claims Process</div>
        <h1>A claim shouldn't feel <em>like</em> a second incident.</h1>
        <p className="sub">
          We've put a quietly enormous amount of engineering into making the next few steps boring, predictable
          and fast. Here's exactly what happens when you tell us something has gone wrong.
        </p>
      </div>
    </section>

    <section>
      <div className="container">
        <div style={{ display: 'flex', gap: 20, marginBottom: 56, flexWrap: 'wrap' }}>
          {[
            ['4h 22m', 'Average time to first contact'],
            ['11 days', 'Median settlement time, property &amp; motor'],
            ['62%', 'Of small claims settled without a phone call'],
            ['1.7%', 'Of claims declined as invalid in 2024']
          ].map(([n, l], i) => (
            <div key={i} style={{ flex: 1, minWidth: 200, padding: 24, border: '1px solid var(--ink-100)', borderRadius: 6 }}>
              <div style={{ fontSize: 36, fontWeight: 700, color: 'var(--navy-800)', letterSpacing: '-0.025em', marginBottom: 6, lineHeight: 1 }}>{n}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-500)' }} dangerouslySetInnerHTML={{ __html: l }} />
            </div>
          ))}
        </div>

        <div className="section-head">
          <div className="eyebrow">The process · 5 steps</div>
          <h2>From "something has happened" to "settlement in your account".</h2>
        </div>

        <div className="steps">
          {[
            ['01', 'Notify us', 'Online via the policyholder portal, by phone, or through your broker. Take three minutes; attach photographs if you have them.', '~3 minutes'],
            ['02', 'Automated triage', 'Our claims platform validates cover, runs anti-fraud checks and routes the claim to the correct desk. Straightforward claims are auto-approved at this stage.', '~15 minutes'],
            ['03', 'Named handler', 'A claims professional becomes your single point of contact. On larger claims, a loss adjuster is instructed within four working hours.', 'Same working day'],
            ['04', 'Assessment &amp; agreement', 'Investigation, scope of damage, and a written settlement proposal. We aim to agree before invoices are issued, not after.', '5–14 days typical']
          ].map(([n, t, d, dur], i) => (
            <div key={i} className="step" style={{ paddingRight: 24 }}>
              <div className="step-num">Step {n}</div>
              <h4 dangerouslySetInnerHTML={{ __html: t }} />
              <p>{d}</p>
              <div className="duration">{dur}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 24, padding: '28px 24px', background: 'var(--navy-800)', color: '#fff', borderRadius: 6, display: 'grid', gridTemplateColumns: '80px 1fr auto', gap: 24, alignItems: 'center' }}>
          <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 42, color: '#cfe0f3', letterSpacing: '-0.02em' }}>05</div>
          <div>
            <div style={{ fontSize: 18, fontWeight: 600, color: '#fff', marginBottom: 6 }}>Settlement, paid directly</div>
            <div style={{ fontSize: 14, color: 'var(--ink-200)' }}>Funds clear to your nominated account by Faster Payments — usually within 90 minutes of agreement. No cheques. No "in the post".</div>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', color: '#9dbce6', fontSize: 13 }}>≈ 90 min</div>
        </div>
      </div>
    </section>

    <section className="bg-paper">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Accelerated digital claims</div>
          <h2>The smart bit: claims our platform can settle without picking up the phone.</h2>
          <p>
            Around 62% of claims under £25,000 now flow through our automated settlement pipeline.
            That's the result of training a triage model on twenty years of our own loss data — not a generic
            insurance LLM, not a vendor offering. The handler still reviews every auto-approved file before payment.<sup style={{ color: 'var(--ink-300)' }}>†</sup>
          </p>
        </div>

        <table className="table">
          <thead>
            <tr>
              <th>Claim type</th>
              <th>Auto-eligible threshold</th>
              <th>Median time to settle</th>
              <th>Volume (2024)</th>
            </tr>
          </thead>
          <tbody>
            <tr><td>Motor — own damage, single vehicle</td><td className="num">≤ £18,000</td><td className="num">6.1 hours</td><td className="num">38,420</td></tr>
            <tr><td>Property — storm/water, residential let</td><td className="num">≤ £12,500</td><td className="num">2.4 days</td><td className="num">11,604</td></tr>
            <tr><td>Goods in transit — single consignment</td><td className="num">≤ £25,000</td><td className="num">1.8 days</td><td className="num">5,217</td></tr>
            <tr><td>Public liability — slip/trip, no injury claim</td><td className="num">≤ £8,000</td><td className="num">4.6 days</td><td className="num">2,108</td></tr>
            <tr><td>Cyber — credential incident, no exfiltration</td><td className="num">≤ £40,000</td><td className="num">11.2 days</td><td className="num">418</td></tr>
          </tbody>
        </table>
        <div style={{ fontSize: 11, color: 'var(--ink-400)', marginTop: 12, lineHeight: 1.5 }}>
          <sup>†</sup> Automated approval engine v3.2.1. Model card and decision logs available to brokers on request via the partner portal. Last independent audit: 2023.
        </div>
      </div>
    </section>

    <section>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56 }}>
          <div>
            <h2 style={{ marginBottom: 20 }}>What we'll need from you.</h2>
            <p>The faster the file is complete, the faster we can act. Most policyholders have what we need to hand.</p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0' }}>
              {[
                'Your policy number, or company name + postcode',
                'Date, time and location of the incident',
                'A short description in plain English',
                'Photographs of damage where applicable',
                'Crime / accident reference numbers, if police were involved',
                'Estimates or invoices, if you already have them'
              ].map((item, i) => (
                <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '10px 0', borderTop: '1px solid var(--ink-100)' }}>
                  <Icon name="check" size={16} />
                  <span style={{ fontSize: 14.5, color: 'var(--ink-700)' }}>{item}</span>
                </li>
              ))}
            </ul>
          </div>
          <div style={{ background: 'var(--paper)', padding: 36, borderRadius: 6 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Make a claim now</div>
            <h3 style={{ marginBottom: 18 }}>Three ways to notify us.</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
                { icon: 'phone', label: '24-hour claims line', value: '0800 074 0188', sub: 'UK freephone · interpreters available' },
                { icon: 'mail',  label: 'Email',               value: 'claims@verityone-insurance.co.uk', sub: 'Responses Mon–Fri within 1 hour' },
                { icon: 'file',  label: 'Policyholder portal', value: 'verityone-insurance.co.uk/portal', sub: 'Best for attachments &amp; photographs' }
              ].map((c, i) => (
                <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', padding: '14px 0', borderTop: i ? '1px solid var(--ink-100)' : 'none' }}>
                  <div style={{ width: 36, height: 36, background: 'var(--navy-800)', color: '#fff', borderRadius: 4, display: 'grid', placeItems: 'center', flex: '0 0 36px' }}>
                    <Icon name={c.icon} size={18} />
                  </div>
                  <div>
                    <div style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-400)', fontWeight: 600 }}>{c.label}</div>
                    <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--navy-800)', margin: '4px 0' }}>{c.value}</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-500)' }} dangerouslySetInnerHTML={{ __html: c.sub }} />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  </>
);

const Coverage = ({ go }) => {
  const lines = [
    { tag: 'PROPERTY', title: 'Commercial Property', desc: 'Buildings, contents, stock, and business interruption for premises from £100k to £500m sum insured.', limit: 'Up to £500m', ind: 'All sectors' },
    { tag: 'MOTOR',    title: 'Commercial Fleet',     desc: 'From mini-fleets of three to enterprise fleets of 4,000+ vehicles. HGV, LCV, executive and specialist plant.', limit: 'Unlimited vehicles', ind: 'Logistics, trades' },
    { tag: 'LIABILITY',title: 'Public Liability',     desc: 'Third-party injury and property damage from your activities. Statutory wording, plain-English schedule.', limit: 'Up to £10m', ind: 'All sectors' },
    { tag: 'LIABILITY',title: 'Employers&apos; Liability', desc: 'Compulsory cover from £5m to £10m. Includes occupational health support and HSE notification assistance.', limit: 'Up to £10m', ind: 'All sectors' },
    { tag: 'LIABILITY',title: 'Professional Indemnity', desc: 'For advice, design, consulting, and regulated professional services. Side-by-side defence costs.', limit: 'Up to £25m', ind: 'Prof. services' },
    { tag: 'CYBER',    title: 'Cyber &amp; Technology',   desc: 'First and third-party breach response, regulatory penalties, BI from digital incidents, ransomware decision support.', limit: 'Up to £15m', ind: 'All sectors' },
    { tag: 'EXECUTIVE',title: 'Directors &amp; Officers',  desc: 'Side-A, B and C cover. Investigations, EPL, fiduciary, and reputational crisis management.', limit: 'Up to £25m', ind: 'Listed &amp; private' },
    { tag: 'MARINE',   title: 'Marine Cargo &amp; Trade',   desc: 'Goods in transit, stock-throughput, specie. Worldwide territorial cover available.', limit: 'Up to £40m', ind: 'Importers, exporters' },
    { tag: 'CRIME',    title: 'Crime &amp; Fidelity',       desc: 'Employee dishonesty, social engineering fraud, theft of money. Mid-market specialism.', limit: 'Up to £10m', ind: 'All sectors' },
  ];
  return (
  <>
    <section className="page-hero">
      <div className="container">
        <div className="crumbs">VerityOne <span>/</span> Commercial Coverage</div>
        <h1>Nine commercial lines. <em>One</em> wording philosophy.</h1>
        <p className="sub">
          We underwrite the things most insurers will, and a few they won't. Every policy is built from the
          same plain-English template — read in under twenty minutes, exclusions on page two.
        </p>
      </div>
    </section>

    <section>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 32, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div className="eyebrow">Our coverage book</div>
            <h2 style={{ marginTop: 12 }}>Choose a line. We'll route you to the right desk.</h2>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn btn-secondary btn-small">All sectors</button>
            <button className="btn btn-ghost btn-small">SME</button>
            <button className="btn btn-ghost btn-small">Mid-market</button>
            <button className="btn btn-ghost btn-small">Corporate</button>
          </div>
        </div>

        <div className="grid-3">
          {lines.map((l, i) => (
            <div key={i} className="coverage-tile">
              <div className="tag">{l.tag}</div>
              <h3 dangerouslySetInnerHTML={{ __html: l.title }} />
              <p dangerouslySetInnerHTML={{ __html: l.desc }} />
              <div className="row">
                <span>Limits available</span>
                <span className="val">{l.limit}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, color: 'var(--ink-400)' }}>
                <span>Sectors</span>
                <span style={{ color: 'var(--navy-800)', fontWeight: 600 }} dangerouslySetInnerHTML={{ __html: l.ind }} />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

    <section className="bg-paper">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'start' }}>
          <div>
            <div className="eyebrow">Wordings &amp; documents</div>
            <h2 style={{ marginTop: 12 }}>The paper trail, made easy.</h2>
            <p>Every product wording, IPID, summary of cover and demands-and-needs statement is in one library — open to brokers and prospects alike.</p>
            <a className="btn btn-primary" href="#" style={{ marginTop: 16 }}>Open the document library <Icon name="arrow" size={16} /></a>
          </div>
          <div>
            <table className="table">
              <thead>
                <tr>
                  <th>Document</th>
                  <th>Line</th>
                  <th>Version</th>
                  <th>Updated</th>
                </tr>
              </thead>
              <tbody>
                <tr><td>Commercial Property — Wording</td><td>Property</td><td className="num">V7.2</td><td className="num">Apr 2025</td></tr>
                <tr><td>Commercial Fleet — Wording</td><td>Motor</td><td className="num">V6.1</td><td className="num">Mar 2025</td></tr>
                <tr><td>Cyber &amp; Technology — Wording</td><td>Cyber</td><td className="num">V4.0</td><td className="num">Jan 2025</td></tr>
                <tr><td>D&amp;O Side-A/B/C — Wording</td><td>Executive</td><td className="num">V5.3</td><td className="num">Sep 2024</td></tr>
                <tr><td>Combined Liability — IPID</td><td>Liability</td><td className="num">V3.1</td><td className="num">Aug 2024</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>

    <section className="cta-strip">
      <div className="container">
        <div>
          <h2>Not sure which line you need?</h2>
          <p>Most businesses need three or four. We'll figure it out with you in a 30-minute call.</p>
        </div>
        <a className="btn btn-primary" onClick={(e) => { e.preventDefault(); go('contact'); }} href="#">Talk to an underwriter <Icon name="arrow" size={16} /></a>
      </div>
    </section>
  </>
  );
};

const Risk = ({ go }) => (
  <>
    <section className="page-hero">
      <div className="container">
        <div className="crumbs">VerityOne <span>/</span> Risk Services</div>
        <h1>Stop the claim before it <em>becomes</em> a claim.</h1>
        <p className="sub">
          A 24-strong team of engineers, fire specialists and cyber consultants who turn up at your sites,
          write you a 12-page report nobody asked for, and quietly save you a fortune over five years.
        </p>
      </div>
    </section>

    <section>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--ink-100)', borderRadius: 6, overflow: 'hidden' }}>
          {[
            ['3,180', 'Site surveys conducted in 2024'],
            ['82%', 'of recommendations implemented within 12 months'],
            ['£14.6m', 'estimated losses avoided across the book'],
            ['24', 'in-house risk engineers &amp; surveyors']
          ].map(([n, l], i) => (
            <div key={i} style={{ padding: 28, borderRight: i < 3 ? '1px solid var(--ink-100)' : 'none' }}>
              <div style={{ fontSize: 40, fontWeight: 700, color: 'var(--navy-800)', letterSpacing: '-0.025em', lineHeight: 1, marginBottom: 10 }}>{n}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-500)' }} dangerouslySetInnerHTML={{ __html: l }} />
            </div>
          ))}
        </div>
      </div>
    </section>

    <section>
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Service lines</div>
          <h2>Six disciplines, all under one engineering team.</h2>
        </div>

        <div className="grid-3">
          {[
            { i: 'building', title: 'Property surveys', desc: 'Construction, occupancy, protection &amp; exposure assessments. RICS-aligned reports.' },
            { i: 'bolt',     title: 'Fire engineering', desc: 'Sprinkler review, compartmentation, hot-works protocols, and waste handling.' },
            { i: 'truck',    title: 'Fleet risk',       desc: 'Telematics audit, driver risk profiling, accident root-cause analysis.' },
            { i: 'shield',   title: 'Cyber posture',    desc: 'External attack-surface scans, tabletop incident exercises, NIS2 readiness.' },
            { i: 'tool',     title: 'Plant &amp; machinery', desc: 'PUWER &amp; LOLER inspection coordination, breakdown risk assessments.' },
            { i: 'users',    title: 'Health &amp; safety',  desc: 'IOSH-accredited audits, contractor management, near-miss reporting frameworks.' }
          ].map((s, i) => (
            <div key={i} className="card">
              <div className="icon"><Icon name={s.i} /></div>
              <h3 dangerouslySetInnerHTML={{ __html: s.title }} />
              <p dangerouslySetInnerHTML={{ __html: s.desc }} />
              <a className="card-link" href="#">Service detail <Icon name="arrow" size={14} /></a>
            </div>
          ))}
        </div>
      </div>
    </section>

    <section className="bg-paper">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Engagement model</div>
          <h2>What working with us actually looks like.</h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {[
            ['Included', 'Bundled with cover', 'Standard surveys for policies above £10m sum insured. Annual fleet risk review for 50+ vehicle fleets. Cyber baseline assessment at inception.', 'No additional cost'],
            ['On-demand', 'Pay-as-you-need', 'Single-site engineering reports, specific hazard reviews, claims-driven investigations. Quoted per assignment, typically £1,800–£6,400.', 'From £1,800'],
            ['Retained', 'Continuous programme', 'Dedicated risk engineer, quarterly portfolio review, board-ready risk reporting. For multi-site mid-market &amp; corporate clients.', 'From £36,000 / yr']
          ].map(([tag, name, d, price], i) => (
            <div key={i} style={{ background: 'var(--white)', border: '1px solid var(--ink-100)', borderRadius: 6, padding: 28, display: 'flex', flexDirection: 'column' }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>{tag}</div>
              <h3 style={{ marginBottom: 10 }}>{name}</h3>
              <p style={{ fontSize: 14, color: 'var(--ink-500)', flexGrow: 1 }} dangerouslySetInnerHTML={{ __html: d }} />
              <div style={{ paddingTop: 18, borderTop: '1px solid var(--ink-100)', fontSize: 13, color: 'var(--navy-800)', fontWeight: 600 }}>{price}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  </>
);

const Careers = ({ go }) => {
  const jobs = [
    ['Senior Underwriter — Property &amp; Casualty', 'London', 'Permanent', '£80k – £105k + bonus', 'Underwriting'],
    ['Claims Handler — Motor Fleet', 'Manchester', 'Permanent', '£32k – £38k', 'Claims'],
    ['Risk Engineer (Fire)', 'Field-based, North', 'Permanent', '£58k – £72k + car', 'Risk Services'],
    ['Cyber Claims Specialist', 'London / Hybrid', 'Permanent', '£68k – £85k', 'Claims'],
    ['Actuarial Analyst', 'London', 'Permanent', '£55k – £68k + study support', 'Actuarial'],
    ['Broker Relationship Manager — Scotland', 'Edinburgh', 'Permanent', '£60k – £74k + car', 'Distribution'],
    ['Junior Site Reliability Engineer', 'Cork', 'Permanent', '€55k – €70k', 'Technology'],
    ['Graduate Underwriter (Sept 2026 intake)', 'London / Manchester', 'Graduate', 'From £34k + bonus', 'Underwriting']
  ];
  return (
  <>
    <section className="page-hero">
      <div className="container">
        <div className="crumbs">VerityOne <span>/</span> Careers</div>
        <h1>Insurance is a more <em>interesting</em> business than it looks.</h1>
        <p className="sub">
          We're 612 people across four offices, and we hire about 80 more each year. If you want to do
          serious technical work in a company that doesn't take itself too seriously, you might fit.
        </p>
      </div>
    </section>

    <section>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginBottom: 64 }}>
          <div>
            <div className="eyebrow">Why VerityOne</div>
            <h2 style={{ marginTop: 12, marginBottom: 18 }}>An old-fashioned career, in a modern company.</h2>
            <p>
              We pay properly. We promote internally first. We pay for your professional study (CII, IFoA, CISSP)
              and give you the time to do it. Our average tenure is 7.2 years, which in financial services
              counts as a moderate scandal.
            </p>
            <p>
              We are hiring across every function, but particularly in claims, underwriting, risk engineering
              and the technology platform. We are based in London, Manchester, Edinburgh and Cork.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {[
              ['7.2 yrs', 'Average tenure'],
              ['80+', 'Hires per year'],
              ['612', 'People across 4 offices'],
              ['46%', 'Of leaders are internal hires']
            ].map(([n, l], i) => (
              <div key={i} style={{ padding: 22, background: 'var(--paper)', borderRadius: 6 }}>
                <div style={{ fontSize: 28, fontWeight: 700, color: 'var(--navy-800)', letterSpacing: '-0.025em', lineHeight: 1, marginBottom: 8 }}>{n}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-500)' }}>{l}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
          <div>
            <div className="eyebrow">Open positions</div>
            <h2 style={{ marginTop: 10 }}>{jobs.length} roles, across four offices.</h2>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn btn-ghost btn-small">All teams</button>
            <button className="btn btn-ghost btn-small">All locations</button>
            <button className="btn btn-ghost btn-small">All contracts</button>
          </div>
        </div>

        <div style={{ border: '1px solid var(--ink-100)', borderRadius: 6, overflow: 'hidden' }}>
          <div className="job" style={{ background: 'var(--paper)', borderTop: 'none', fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-400)', fontWeight: 600, padding: '14px 24px', cursor: 'default' }}>
            <div>Role</div><div>Location</div><div>Type</div><div>Salary</div>
          </div>
          {jobs.map(([title, loc, type, sal, team], i) => (
            <div key={i} className="job">
              <div>
                <h4 dangerouslySetInnerHTML={{ __html: title }} />
                <div className="meta">
                  <span className="pill" style={{ marginRight: 8 }}>{team}</span>
                  Posted 4 days ago
                </div>
              </div>
              <div style={{ fontSize: 14, color: 'var(--ink-700)' }}><Icon name="pin" size={13} /> {loc}</div>
              <div style={{ fontSize: 14, color: 'var(--ink-700)' }}>{type}</div>
              <div style={{ fontSize: 14, color: 'var(--navy-800)', fontWeight: 600 }}>{sal}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 32, padding: 28, background: 'var(--navy-50)', borderRadius: 6, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
          <div>
            <h3 style={{ marginBottom: 6 }}>Don't see your role?</h3>
            <p style={{ margin: 0, color: 'var(--ink-500)' }}>We accept speculative applications. Tell us what you'd want to do here.</p>
          </div>
          <a className="btn btn-primary" href="mailto:careers@verityone-insurance.co.uk">Email the careers team <Icon name="arrow" size={16} /></a>
        </div>
      </div>
    </section>
  </>
  );
};

Object.assign(window, { Claims, Coverage, Risk, Careers });