// VerityOne — Home, About, Contact pages

const HOME_PHOTO = "https://images.unsplash.com/photo-1604328698692-f76ea9498e76?w=900&q=80&auto=format&fit=crop";
const ABOUT_PHOTO = "https://images.unsplash.com/photo-1573164713988-8665fc963095?w=1200&q=80&auto=format&fit=crop";
const TESTIMONIAL_PHOTO = "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=800&q=80&auto=format&fit=crop";
const COVERAGE_PHOTO = "https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1100&q=80&auto=format&fit=crop";
const RISK_PHOTO = "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=1100&q=80&auto=format&fit=crop";

const HERO_HEADLINES = {
  confidence: { line1: <>Coverage with <em>confidence.</em></>, line2: 'Built for the businesses that keep Britain moving.' },
  fast: { line1: <>Insurance that <em>pays.</em> Fast.</>, line2: 'Commercial cover settled in days, not quarters.' },
  steady: { line1: <>We do the <em>worrying</em>, so you don’t.</>, line2: 'Twenty-three years of commercial cover for UK &amp; Irish business.' }
};

const Home = ({ go, onStaffLogin, tweaks = {} }) => {
  const hd = HERO_HEADLINES[tweaks.heroHeadline] || HERO_HEADLINES.confidence;
  return (
    <>
    <section className="hero" style={{ paddingTop: 72 }}>
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Commercial Insurance · UK &amp; Ireland</div>
            <h1>
              {hd.line1}<br />
              <span className="hero-subline" dangerouslySetInnerHTML={{ __html: hd.line2 }} style={{ fontSize: "22px", fontWeight: "600" }} />
            </h1>
            <p className="lede">From a single-site bakery to a 4,000-vehicle logistics fleet, VerityOne underwrites, services, and settles commercial cover with the kind of clarity finance directors actually want to read.



              </p>
            <div className="hero-cta">
              <a className="btn btn-primary" onClick={(e) => {e.preventDefault();go('contact');}} href="#">
                Request a tailored quote <Icon name="arrow" size={16} />
              </a>
              <a className="btn btn-secondary" onClick={(e) => {e.preventDefault();go('coverage');}} href="#">
                Explore our coverage
              </a>
            </div>
            <div className="hero-meta">
              <div className="item">
                <div className="label">Established</div>
                <div className="value">2003 · London</div>
              </div>
              <div className="item">
                <div className="label">Regulator</div>
                <div className="value">FCA · FRN 318204</div>
              </div>
              <div className="item">
                <div className="label">A.M. Best Rating</div>
                <div className="value">A (Excellent)</div>
              </div>
              <div className="item">
                <div className="label">Solvency II Ratio</div>
                <div className="value">186%</div>
              </div>
            </div>
          </div>

          <div className="hero-visual">
            <div className="ph" style={{ background: `linear-gradient(135deg, rgba(10,37,64,0.4), rgba(10,37,64,0.1)), url(${HOME_PHOTO}) center/cover` }}></div>
            <div className="badge-card">
              <div className="badge-num">94<small>%</small></div>
              <div className="badge-label">of straightforward claims settled within 5 working days<br /><span style={{ color: 'var(--ink-300)' }}>FY 2024 broker survey</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <div className="logo-strip" data-comment-anchor="537ac3902b-div-93-5">
      <div className="container">
        <div className="label">Trusted by 11,200+ UK organisations</div>
        <div className="logos">
          <span className="sans">NORTHFIELD GROUP</span>
          <span>Pemberton &amp; Hale</span>
          <span className="mono">/ARGENTUM</span>
          <span className="sans">MERIDIAN LOGISTICS</span>
          <span>St. Albans Foundry</span>
          <span className="sans">CASTERFIELD CARE</span>
        </div>
      </div>
    </div>

    {/* Stats */}
    <section>
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">By the numbers</div>
          <h2>Twenty-three years of underwriting the unglamorous &amp; the essential.</h2>
          <p>We don't insure unicorns. We insure the foundries, fleets, and family-run firms that the rest of the country relies on.</p>
        </div>

        <div className="stats">
          <div className="stat">
            <div className="num">£2.4<small>bn</small></div>
            <div className="label">Gross written premium in 2024</div>
            <div className="foot">Audited · KPMG LLP</div>
          </div>
          <div className="stat">
            <div className="num">11,200<small>+</small></div>
            <div className="label">Active commercial policyholders across the UK &amp; Ireland</div>
            <div className="foot">As of 31 Dec 2024</div>
          </div>
          <div className="stat">
            <div className="num">99.99<small>%</small></div>
            <div className="label">Broker portal availability over the trailing 12 months</div>
            <div className="foot">Internal SRE telemetry</div>
          </div>
          <div className="stat">
            <div className="num">4.7<small>★</small></div>
            <div className="label">Average customer review across 6,800 verified responses</div>
            <div className="foot">Feefo Platinum, 2024</div>
          </div>
        </div>
      </div>
    </section>

    {/* Coverage cards */}
    <section className="bg-paper" style={{ paddingTop: 88 }}>
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Commercial protection</div>
          <h2>Cover that's been pressure-tested by 23 years of British weather, traffic and tribunals.</h2>
        </div>

        <div className="grid-3">
          {[
            { icon: 'building', tag: 'Property', title: 'Property &amp; Material Damage', desc: 'Buildings, contents, business interruption and stock. Mid-market through to listed-estate complexity.' },
            { icon: 'truck', tag: 'Motor', title: 'Commercial Fleet', desc: 'From 3 vehicles to 4,000. Telematics-aware pricing without the telematics lecture.' },
            { icon: 'briefcase', tag: 'Liability', title: 'Public &amp; Employers&apos; Liability', desc: 'Statutory cover written plainly. Defence costs included as standard, not as an upsell.' },
            { icon: 'shield', tag: 'Cyber', title: 'Cyber &amp; Technology', desc: 'First-party breach response, regulatory penalties and business interruption from digital events.' },
            { icon: 'users', tag: 'D&amp;O', title: 'Directors &amp; Officers', desc: 'Side-A, B and C. Investigations, employment practices, and reputational crisis support.' },
            { icon: 'globe', tag: 'Marine', title: 'Marine, Cargo &amp; Trade', desc: 'Goods in transit, stock-throughput and specie. Worldwide territorial cover available.' }].
            map((c, i) =>
            <div key={i} className="card">
              <div className="icon"><Icon name={c.icon} /></div>
              <div className="kicker" style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-400)', fontWeight: 600 }}>{c.tag}</div>
              <h3 dangerouslySetInnerHTML={{ __html: c.title }} />
              <p>{c.desc}</p>
              <a className="card-link" onClick={(e) => {e.preventDefault();go('coverage');}} href="#">
                Read scope of cover <Icon name="arrow" size={14} />
              </a>
            </div>
            )}
        </div>
      </div>
    </section>

    {/* Claims feature */}
    <section>
      <div className="container">
        <div className="card-feature">
          <div className="copy">
            <div className="eyebrow">Claims support</div>
            <h3>Accelerated digital claims processing without losing the human at the other end of the phone.</h3>
            <p>
              Our triage platform routes simple claims to automatic settlement within hours, freeing our 140-strong
              claims team to spend their time on the complicated, the contested and the unusual. Roughly 62% of motor
              and small-property claims now clear without a phone call. The other 38% get a named handler the same day.
            </p>
            <ul>
              <li>Direct settlement to your bank account — no cheques, no clearing delays.</li>
              <li>24/7 incident reporting via web, broker portal or freephone.</li>
              <li>Named loss adjuster on claims over £50,000, within 4 working hours.</li>
              <li>Optional video FNOL for motor — assess damage from the kerbside.</li>
            </ul>
            <a className="btn btn-secondary" onClick={(e) => {e.preventDefault();go('claims');}} href="#">
              See the claims process <Icon name="arrow" size={16} />
            </a>
          </div>
          <div className="image" style={{ background: `linear-gradient(180deg, rgba(10,37,64,0.05), rgba(10,37,64,0.15)), url(${COVERAGE_PHOTO}) center/cover` }}></div>
        </div>
      </div>
    </section>

    {/* Risk services feature reversed */}
    <section className="bg-paper">
      <div className="container">
        <div className="card-feature" style={{ gridTemplateColumns: '1fr 1.1fr' }}>
          <div className="image" style={{ background: `linear-gradient(180deg, rgba(10,37,64,0.08), rgba(10,37,64,0.18)), url(${RISK_PHOTO}) center/cover`, order: 0 }}></div>
          <div className="copy">
            <div className="eyebrow">Risk services</div>
            <h3>The best claim is the one you never had to make.</h3>
            <p>
              Our in-house risk engineers conducted 3,180 site visits last year. Surveys are included with every
              property policy above £10m sum insured, and our risk improvement recommendations come with funding
              support from our affiliated lender, Cornhill Finance.
            </p>
            <ul>
              <li>Property surveys, fire engineering &amp; sprinkler review</li>
              <li>Driver risk profiling and fleet telematics review</li>
              <li>Cyber posture review &amp; tabletop incident exercises</li>
              <li>Health &amp; safety compliance audits (IOSH-accredited)</li>
            </ul>
            <a className="btn btn-secondary" onClick={(e) => {e.preventDefault();go('risk');}} href="#">
              Risk services overview <Icon name="arrow" size={16} />
            </a>
          </div>
        </div>
      </div>
    </section>

    {/* Testimonial */}
    <section>
      <div className="container">
        <div className="testimonial">
          <div className="photo" style={{ background: `url(${TESTIMONIAL_PHOTO}) center/cover` }}></div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Customer story</div>
            <blockquote>
              "When a delivery van caught fire outside our Aberdeen depot, VerityOne had a loss adjuster on site
              before our regional manager had finished his coffee. The vehicle was replaced in eleven days. We
              renewed for another five years."
            </blockquote>
            <div className="who">
              <strong>Margaret Eshun-Hartwell</strong>
              Director of Operations, Meridian Logistics (UK) Ltd<br />
              Policyholder since 2014 · Commercial Fleet &amp; Property
            </div>
            <div style={{ display: 'flex', gap: 32, marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--ink-100)', flexWrap: 'wrap' }}>
              <div>
                <div style={{ fontSize: 28, fontWeight: 700, color: 'var(--navy-800)', letterSpacing: '-0.02em' }}>11d</div>
                <div style={{ fontSize: 12, color: 'var(--ink-500)', letterSpacing: '0.04em' }}>Vehicle replacement</div>
              </div>
              <div>
                <div style={{ fontSize: 28, fontWeight: 700, color: 'var(--navy-800)', letterSpacing: '-0.02em' }}>£0</div>
                <div style={{ fontSize: 12, color: 'var(--ink-500)', letterSpacing: '0.04em' }}>Out-of-pocket</div>
              </div>
              <div>
                <div style={{ fontSize: 28, fontWeight: 700, color: 'var(--navy-800)', letterSpacing: '-0.02em' }}>2.1h</div>
                <div style={{ fontSize: 12, color: 'var(--ink-500)', letterSpacing: '0.04em' }}>First on-site response</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    {/* Trust badges */}
    {tweaks.showTrustBadges !== false &&
      <section className="tight" style={{ borderTop: '1px solid var(--ink-100)', borderBottom: '1px solid var(--ink-100)' }}>
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
          <div style={{ fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-400)', fontWeight: 600 }}>
            Accreditations &amp; memberships
          </div>
          <div className="badge-row">
            <div className="trust-badge"><Icon name="award" size={14} /><span>A.M. Best A (Excellent)</span></div>
            <div className="trust-badge"><Icon name="check" size={14} /><span>FCA Authorised &amp; Regulated</span></div>
            <div className="trust-badge"><Icon name="check" size={14} /><span>ISO 27001 certified<sup>*</sup></span></div>
            <div className="trust-badge"><Icon name="check" size={14} /><span>BIBA member firm</span></div>
            <div className="trust-badge"><Icon name="check" size={14} /><span>Lloyd's coverholder</span></div>
          </div>
        </div>
        <div style={{ fontSize: 11, color: 'var(--ink-300)', marginTop: 16, textAlign: 'right' }}>
          <sup></sup>
        </div>
      </div>
    </section>}

    {/* CTA */}
    <section className="cta-strip">
      <div className="container">
        <div>
          <h2>Ready for an underwriter who answers the phone?</h2>
          <p>Tell us about your business and we'll put a real broker on the line within one working hour.</p>
        </div>
        <div style={{ display: 'flex', gap: 12 }}>
          <a className="btn btn-primary" onClick={(e) => {e.preventDefault();go('contact');}} href="#">Request a quote <Icon name="arrow" size={16} /></a>
          <a className="btn btn-secondary" onClick={(e) => {e.preventDefault();go('contact');}} href="#" style={{ background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }}>Find your broker</a>
        </div>
      </div>
    </section>
  </>);
};


const About = ({ go }) =>
<>
    <section className="page-hero">
      <div className="container">
        <div className="crumbs">VerityOne <span>/</span> About Us</div>
        <h1>Twenty-three years of <em>quietly</em> doing the boring bits right.</h1>
        <p className="sub">
          Founded above a bookbinder's on Cornhill in 2003 by three former Lloyd's underwriters who'd had enough
          of bad faith and worse paperwork. We've grown, but the values are stubborn.
        </p>
      </div>
    </section>

    <section>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div className="eyebrow">Our story</div>
            <h2 style={{ marginTop: 14, marginBottom: 20 }}>Plain English, fair pricing, paid claims.</h2>
            <p>
              VerityOne was founded in 2003 by Henry Pemberton, Yusuf Asare and Catherine Linley, who'd spent
              the previous decade watching commercial insurance get more complicated for no good reason.
              The original five-page policy wording is framed in our boardroom — and the principles in it still
              govern how we draft contracts today.
            </p>
            <p>
              We are now 612 people across offices in London, Manchester, Edinburgh and Cork. Three quarters
              of our underwriters started their careers somewhere else in the industry and chose us deliberately.
              That tends to show in the work.
            </p>
            <p>
              In 2019 we became a member of the Lloyd's market as a coverholder. In 2022 we acquired the
              specialty book of Argentum Insurance Group. In 2024 we processed 187,000 claims. We've never
              missed a regulatory filing deadline.
            </p>
          </div>
          <div style={{ aspectRatio: '4/3.4', borderRadius: 6, background: `linear-gradient(180deg, rgba(10,37,64,0), rgba(10,37,64,0.1)), url(${ABOUT_PHOTO}) center/cover`, boxShadow: 'var(--shadow-md)' }}></div>
        </div>
      </div>
    </section>

    <section className="bg-paper">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Leadership</div>
          <h2>Run by underwriters &amp; engineers, not marketers.</h2>
        </div>
        <div className="grid-4">
          {[
        { name: 'Catherine Linley', role: 'Chief Executive Officer', tenure: 'With VerityOne since 2003', prev: 'Previously: Hiscox, Lloyd&apos;s Syndicate 1095' },
        { name: 'Marcus Whitfield', role: 'Chief Underwriting Officer', tenure: 'With VerityOne since 2008', prev: 'Previously: RSA, Aviva Commercial' },
        { name: 'Priya Bhattacharya', role: 'Chief Claims Officer', tenure: 'With VerityOne since 2015', prev: 'Previously: AXA, Crawford & Co.' },
        { name: 'David Okafor-Jones', role: 'Chief Technology Officer', tenure: 'With VerityOne since 2021', prev: 'Previously: Direct Line, Monzo' }].
        map((p, i) =>
        <div key={i} style={{ background: 'var(--white)', border: '1px solid var(--ink-100)', borderRadius: 6, padding: 20 }}>
              <div style={{ aspectRatio: '1/1', background: `linear-gradient(135deg, var(--navy-100), var(--navy-50))`, borderRadius: 4, marginBottom: 16, position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: 'var(--navy-700)', fontSize: 38, fontWeight: 700, fontFamily: 'var(--font-serif)', fontStyle: 'italic', letterSpacing: '-0.04em' }}>
                  {p.name.split(' ').map((n) => n[0]).join('')}
                </div>
              </div>
              <div style={{ fontWeight: 600, color: 'var(--navy-800)', fontSize: 16, marginBottom: 4 }}>{p.name}</div>
              <div style={{ fontSize: 13, color: 'var(--navy-600)', marginBottom: 8, fontWeight: 500 }}>{p.role}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-500)', lineHeight: 1.5 }}>{p.tenure}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-400)', lineHeight: 1.5 }} dangerouslySetInnerHTML={{ __html: p.prev }} />
            </div>
        )}
        </div>
      </div>
    </section>

    <section>
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">What we stand for</div>
          <h2 style={{ width: "900px" }}>Five principles behind every policy, claim and investigation.</h2>
          <p style={{ maxWidth: 760, marginTop: 16, width: "900px" }}>VerityOne was built around disciplined underwriting, transparent communication, and practical risk management.</p>
        </div>
        <div className="principles-grid">
          {[
        ['01', 'Plainly written.', 'If finance can\'t read it, the wording is wrong.'],
        ['02', 'Underwrite on facts.', 'Risk surveys, not risk vibes.'],
        ['03', 'Pay valid claims fast.', 'Eleven days beats three months. Always.'],
        ['04', 'Stay regional.', 'A postcode isn\'t a relationship.'],
        ['05', 'Quiet over loud.', 'Sponsorship money belongs in reserves.']].
        map(([n, t, d], i) =>
        <div key={i} className="principle-card">
              <div className="pc-num">{n}</div>
              <div className="pc-title">{t}</div>
              <div className="pc-desc">{d}</div>
            </div>
        )}
        </div>
      </div>
    </section>
  </>;


const Contact = ({ go }) => {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <>
    <section className="page-hero">
      <div className="container">
        <div className="crumbs">VerityOne <span>/</span> Contact</div>
        <h1>Talk to <em>a person</em> — usually within the hour.</h1>
        <p className="sub">Tell us a little about your business. We'll match you with the right underwriter or broker partner.</p>
      </div>
    </section>

    <section>
      <div className="container">
        <div className="contact-grid">
          <div>
            {submitted ?
              <div style={{ background: 'var(--navy-50)', border: '1px solid var(--navy-100)', padding: 36, borderRadius: 6 }}>
                <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'var(--green-600)', color: '#fff', display: 'grid', placeItems: 'center', marginBottom: 18 }}>
                  <Icon name="check" size={22} />
                </div>
                <h3 style={{ marginBottom: 10 }}>Received. Reference VTE-2026-{Math.floor(Math.random() * 90000 + 10000)}.</h3>
                <p style={{ marginBottom: 0 }}>A member of the underwriting team will be in touch within one working hour. If your enquiry is urgent, call <strong>+44 (0)20 7946 0188</strong>.</p>
              </div> :

              <>
                <h3 style={{ marginBottom: 22 }}>Request a quote</h3>
                <form onSubmit={(e) => {e.preventDefault();setSubmitted(true);}}>
                  <div className="form-grid">
                    <div className="field"><label>First name</label><input required placeholder="Catherine" /></div>
                    <div className="field"><label>Surname</label><input required placeholder="Walsh" /></div>
                    <div className="field full"><label>Company</label><input required placeholder="Walsh &amp; Mooney Logistics Ltd" /></div>
                    <div className="field"><label>Work email</label><input type="email" required placeholder="c.walsh@walshmooney.co.uk" /></div>
                    <div className="field"><label>Telephone</label><input placeholder="020 7946 0000" /></div>
                    <div className="field">
                      <label>Cover type</label>
                      <select defaultValue="">
                        <option value="" disabled>Select a coverage line…</option>
                        <option>Commercial Property</option>
                        <option>Commercial Fleet</option>
                        <option>Liability (PL/EL/PI)</option>
                        <option>Cyber &amp; Technology</option>
                        <option>Directors &amp; Officers</option>
                        <option>Marine, Cargo &amp; Trade</option>
                        <option>Combined / Bespoke</option>
                      </select>
                    </div>
                    <div className="field">
                      <label>Number of employees</label>
                      <select defaultValue="">
                        <option value="" disabled>Select…</option>
                        <option>1–9</option>
                        <option>10–49</option>
                        <option>50–249</option>
                        <option>250–999</option>
                        <option>1,000+</option>
                      </select>
                    </div>
                    <div className="field full">
                      <label>Tell us about the risk</label>
                      <textarea placeholder="Site locations, fleet size, turnover, renewal date, current insurer (optional)…"></textarea>
                      <div className="hint">We typically respond within one working hour, Monday–Friday, 08:00–18:00 GMT.</div>
                    </div>
                    <div className="field full" style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 10 }}>
                      <input type="checkbox" style={{ marginTop: 4 }} required />
                      <label style={{ fontWeight: 400, fontSize: 12.5, color: 'var(--ink-500)', lineHeight: 1.5 }}>
                        I consent to VerityOne processing the information above to respond to my enquiry, in line with the
                        Privacy Notice. We do not share enquiry data with third parties.
                      </label>
                    </div>
                    <div className="field full">
                      <button className="btn btn-primary" type="submit">Submit enquiry <Icon name="arrow" size={16} /></button>
                    </div>
                  </div>
                </form>
              </>
              }
          </div>
          <div className="info">
            <h4>General enquiries</h4>
            <p>
              <strong style={{ color: 'var(--navy-800)' }}>+44 (0)20 7946 0188</strong><br />
              <a href="mailto:enquiries@verityone-insurance.co.uk">enquiries@verityone-insurance.co.uk</a><br />
              Mon–Fri · 08:00–18:00 GMT
            </p>

            <h4>Make a claim</h4>
            <p>
              24-hour notification line<br />
              <strong style={{ color: 'var(--navy-800)' }}>0800 074 0188</strong> (UK)<br />
              <a href="mailto:claims@verityone-insurance.co.uk">claims@verityone-insurance.co.uk</a>
            </p>

            <h4>Broker desk</h4>
            <p>
              <strong style={{ color: 'var(--navy-800)' }}>+44 (0)20 7946 0190</strong><br />
              <a href="mailto:broker.desk@verityone-insurance.co.uk">broker.desk@verityone-insurance.co.uk</a>
            </p>

            <h4>Offices</h4>
            <p>
              <strong style={{ color: 'var(--navy-800)' }}>London (Head Office)</strong><br />
              46 Cornhill, London EC3V 3PB<br /><br />
              <strong style={{ color: 'var(--navy-800)' }}>Manchester</strong><br />
              Hardman Square, Manchester M3 3HF<br /><br />
              <strong style={{ color: 'var(--navy-800)' }}>Edinburgh</strong><br />
              17 Charlotte Square, Edinburgh EH2 4DR<br /><br />
              <strong style={{ color: 'var(--navy-800)' }}>Cork</strong><br />
              South Mall, Cork T12 W2WV, Ireland
            </p>
          </div>
        </div>
      </div>
    </section>
  </>);

};

Object.assign(window, { Home, About, Contact });