const COATINGS = [
  { name: 'Paintwork Coating', price: '£150 – £250', icon: 'car', desc: 'A durable ceramic layer over your paint for a deep, glossy, self-cleaning finish that lasts 2 years.', features: ['2 year protection', 'Hydrophobic, self-cleaning', 'Enhanced gloss & depth', 'UV & chemical resistance'] },
  { name: 'Window Coating', price: '£100 – £150', icon: 'droplet', desc: 'Hydrophobic glass coating that sheets water away for dramatically improved wet-weather visibility.', features: ['Rain sheets off the glass', 'Clearer night driving', 'Easier to keep clean', 'Long-lasting clarity'] },
  { name: 'Wheel Face Coating', price: '£100 – £170', icon: 'sparkle', desc: 'A 2 year ceramic coating that protects wheel faces from brake dust and grime, so a quick rinse keeps them looking factory-fresh.', features: ['2 year protection', 'Repels brake dust', 'High-temperature resistant', 'Faster, easier cleaning'] },
];
const BENEFITS = [
  ['2 Years, not months', 'Unlike wax, a ceramic coating bonds to your paint and protects for 2 years.'],
  ['Self-cleaning gloss', 'The hydrophobic surface means dirt and water simply slide off — your car stays cleaner.'],
  ['Deep, wet-look shine', 'Ceramic adds remarkable depth and clarity, amplifying the finish beneath it.'],
  ['Real protection', 'Guards against UV fade, bird lime, road salt and light chemical etching.'],
];
const FAQS = [
  { q: 'How long does a ceramic coating last?', a: 'Our paintwork and wheel face ceramic coatings each provide 2 years of protection. We will advise on simple aftercare to get the most from it.' },
  { q: 'Is ceramic coating worth it?', a: 'If you want lasting protection, an easier-to-clean car and a striking gloss, yes. It is the most durable protection we offer and pays for itself in time saved and finish preserved.' },
  { q: 'Why is ceramic an add-on to Gold or Platinum only?', a: 'A coating is only as good as the surface beneath it. The paint must be decontaminated and machine-polished first, which is exactly what our Gold and Platinum details include, so the coating bonds to a flawless finish.' },
  { q: 'Can you coat just the wheels or glass?', a: 'Yes. Window and wheel face coatings can be added individually. Paintwork coating requires the paint correction included in a Gold or Platinum detail.' },
];

function CeramicHero() {
  return (
    <section style={{ position: 'relative', minHeight: '82vh', display: 'flex', alignItems: 'center', overflow: 'hidden' }} data-screen-label="Ceramic Hero">
      <img src={MVH_THEME + "/assets/cover-ceramic.png"} alt="Ceramic coating water beading" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(110deg, rgba(0,0,0,0.92), rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.7))' }}></div>
      <div className="shell" style={{ position: 'relative', zIndex: 3, paddingTop: 120 }}>
        <div className="reveal in" style={{ maxWidth: 720 }}>
          <Eyebrow>Paint Protection Specialists</Eyebrow>
          <h1 className="display" style={{ marginTop: 20, fontSize: 'clamp(46px,8vw,96px)', lineHeight: 0.94 }}>Ceramic<br /><span className="metal-gold">Coating</span></h1>
          <p className="lede" style={{ marginTop: 22, fontSize: 'clamp(16px,1.7vw,20px)' }}>Lock in 2 years of protection and a deep, self-cleaning gloss. Professionally applied to paintwork, glass and wheels — on your driveway.</p>
          <div style={{ display: 'flex', gap: 14, marginTop: 32, flexWrap: 'wrap' }}>
            <Button href="/booking/" variant="gold" size="lg" icon="arrowUpRight">Book A Coating</Button>
            <Button href={waLink('Hi MVH, I\'d like a quote for ceramic coating.')} target="_blank" variant="ghost" size="lg" icon="whatsapp">Get A Quote</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  React.useEffect(() => {
    injectSchema({ '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: FAQS.map(f => ({ '@type': 'Question', name: f.q, acceptedAnswer: { '@type': 'Answer', text: f.a } })) });
  }, []);
  return (
    <div>
      <Nav active="Ceramic" />
      <CeramicHero />

      {/* note band */}
      <div style={{ background: '#0a0a0a', borderTop: '1px solid #161616', borderBottom: '1px solid #161616' }}>
        <div className="shell" style={{ padding: '20px 28px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, textAlign: 'center', flexWrap: 'wrap' }}>
          <Icon name="shield" size={20} color="var(--lambo-gold)" />
          <span className="muted" style={{ fontSize: 14 }}>Ceramic coatings are available as an add-on to our <a href="/service-gold/" className="gold-text">Gold</a> &amp; <a href="/service-platinum/" className="gold-text">Platinum</a> packages, or included in our <a href="/service-diamond/" className="gold-text">Diamond Detail</a>.</span>
        </div>
      </div>

      {/* Benefits */}
      <section className="section" data-screen-label="Why Ceramic">
        <div className="shell">
          <div style={{ textAlign: 'center', marginBottom: 50 }}>
            <div style={{ display: 'flex', justifyContent: 'center' }}><Eyebrow center>Why Ceramic</Eyebrow></div>
            <h2 className="display h-1" style={{ marginTop: 18 }}>Protection that lasts</h2>
          </div>
          <div className="grid grid-4">
            {BENEFITS.map((b, i) => (
              <Reveal key={i} delay={i * 70} className="card" style={{ padding: '30px 24px' }}>
                <div style={{ fontFamily: 'var(--font-display)', color: 'var(--lambo-gold-text)', letterSpacing: 2, fontSize: 13 }}>{('0' + (i + 1))}</div>
                <h3 className="display" style={{ fontSize: 19, textTransform: 'uppercase', marginTop: 10 }}>{b[0]}</h3>
                <p style={{ color: 'var(--ash)', fontSize: 14, lineHeight: 1.6, marginTop: 10, fontWeight: 300 }}>{b[1]}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Diamond Detail — ceramic included */}
      <section className="section" style={{ borderTop: '1px solid #1a1a1a', borderBottom: '1px solid #1a1a1a', position: 'relative', overflow: 'hidden' }} data-screen-label="Diamond on Ceramic">
        <div style={{ position: 'absolute', top: -100, right: -100, width: 360, height: 360, borderRadius: '50%', background: 'radial-gradient(circle, rgba(212,175,55,0.06) 0%, transparent 70%)', pointerEvents: 'none' }}></div>
        <div className="shell">
          <Reveal>
            <div className="grid" style={{ gridTemplateColumns: '1fr 1.2fr', gap: 48, alignItems: 'center' }} id="ceramic-diamond-grid">
              <div style={{ position: 'relative', height: 380, background: '#111', border: '1px solid rgba(212,175,55,0.25)' }}>
                {DIAMOND_SERVICE.cover
                  ? <img src={DIAMOND_SERVICE.cover} alt="Diamond Detail" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                  : <image-slot id="ceramic-diamond" placeholder="Diamond Detail — ceramic coating showcase" shape="rect" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}></image-slot>
                }
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.65) 100%)', pointerEvents: 'none' }}></div>
                <div style={{ position: 'absolute', top: 16, left: 16 }}>
                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 14px', border: '1px solid rgba(212,175,55,0.35)', background: 'rgba(0,0,0,0.6)' }}>
                    <Icon name="sparkle" size={13} color="var(--lambo-gold)" />
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: 'var(--lambo-gold-text)', fontWeight: 600 }}>Most Exclusive</span>
                  </div>
                </div>
                <div style={{ position: 'absolute', bottom: 16, left: 16, display: 'flex', gap: 8 }}>
                  <span className="pill pill--gold">Paintwork Ceramic</span>
                  <span className="pill pill--gold">Wheel Ceramic</span>
                </div>
              </div>
              <div>
                <Eyebrow>Ceramic Included</Eyebrow>
                <h2 className="display" style={{ marginTop: 14, fontSize: 'clamp(34px, 4.5vw, 54px)', lineHeight: 0.95 }}>
                  <span className="metal-gold">Diamond Detail</span>
                </h2>
                <p className="lede" style={{ marginTop: 16 }}>Our flagship Diamond Detail includes both a 2 year paintwork ceramic coating and a 2 year wheel face ceramic coating as standard — no add-on pricing, no extras. Full 2-stage machine polish, interior deep clean, leather care, engine bay and more.</p>
                <div style={{ display: 'flex', gap: 20, marginTop: 24, alignItems: 'center', flexWrap: 'wrap' }}>
                  <div>
                    <div style={{ fontSize: 11, color: 'var(--ash)', textTransform: 'uppercase', letterSpacing: 1, fontFamily: 'var(--font-display)' }}>From</div>
                    <div className="metal-gold" style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 32 }}>£500</div>
                  </div>
                  <div style={{ width: 1, height: 36, background: '#2a2a2a' }}></div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--ash)', fontSize: 13 }}>
                    <Icon name="clock" size={16} color="var(--lambo-gold)" />Full day +
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 12, marginTop: 26, flexWrap: 'wrap' }}>
                  <Button href="/service-diamond/" variant="gold" size="lg" icon="arrowUpRight">View Diamond Detail</Button>
                  <Button href={waLink("Hi MVH, I'd like a quote for the Diamond Detail.")} target="_blank" variant="ghost" size="lg" icon="whatsapp">Get A Quote</Button>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
        <style>{`@media (max-width: 900px){ #ceramic-diamond-grid{grid-template-columns:1fr!important} }`}</style>
      </section>

      {/* Coating options + pricing */}
      <section className="section section--deep" data-screen-label="Coating Options">
        <div className="shell">
          <div style={{ marginBottom: 44 }}>
            <Eyebrow>Coating Options & Pricing</Eyebrow>
            <h2 className="display h-1" style={{ marginTop: 16 }}>Three ways to protect</h2>
            <p className="lede" style={{ marginTop: 14 }}>Price depends on vehicle size. Combine all three for total coverage.</p>
          </div>
          <div className="grid grid-3">
            {COATINGS.map((c, i) => (
              <Reveal key={i} delay={i * 90} className="card" style={{ padding: '32px 28px', display: 'flex', flexDirection: 'column' }}>
                <div style={{ width: 56, height: 56, border: '1px solid #2c2c2c', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 22 }}>
                  <Icon name={c.icon} size={26} color="var(--lambo-gold)" />
                </div>
                <h3 className="display" style={{ fontSize: 23, textTransform: 'uppercase' }}>{c.name}</h3>
                <p style={{ color: 'var(--ash)', fontSize: 14, lineHeight: 1.6, marginTop: 12, fontWeight: 300 }}>{c.desc}</p>
                <ul style={{ listStyle: 'none', padding: 0, margin: '20px 0 24px', display: 'grid', gap: 10 }}>
                  {c.features.map((f, k) => <li key={k} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 13.5, color: 'var(--smoke)', fontWeight: 300 }}><Icon name="check" size={17} color="var(--lambo-gold)" />{f}</li>)}
                </ul>
                <div style={{ marginTop: 'auto', borderTop: '1px solid #232323', paddingTop: 18, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                  <span className="metal-gold" style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24 }}>{c.price}</span>
                  <span style={{ fontSize: 11, color: 'var(--ash)', textTransform: 'uppercase', letterSpacing: 1 }}>By size</span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Before/After */}
      <section className="section" data-screen-label="Ceramic Result">
        <div className="shell">
          <div className="grid" style={{ gridTemplateColumns: '1.1fr 1fr', gap: 48, alignItems: 'center' }} id="ceramic-ba-grid">
            <Reveal><BeforeAfter id="ceramic-ba" beforeLabel="Untreated" afterLabel="Coated" caption="Ceramic paintwork coating · water behaviour" height={430} /></Reveal>
            <Reveal delay={120}>
              <Eyebrow>The Difference</Eyebrow>
              <h2 className="display h-1" style={{ marginTop: 16 }}>Water just<br />runs away</h2>
              <p className="lede" style={{ marginTop: 16 }}>A coated surface is intensely hydrophobic — rain beads and sheets straight off, taking dirt with it. Your vehicle stays cleaner, dries spot-free, and keeps its gloss for years.</p>
              <Button href="/gallery/" variant="gold" icon="arrowUpRight" style={{ marginTop: 24 }}>See More Results</Button>
            </Reveal>
          </div>
        </div>
        <style>{`@media (max-width: 900px){ #ceramic-ba-grid{grid-template-columns:1fr!important} }`}</style>
      </section>

      <section className="section section--deep" data-screen-label="Ceramic FAQ">
        <div className="shell" style={{ maxWidth: 880 }}>
          <div style={{ textAlign: 'center', marginBottom: 30 }}>
            <div style={{ display: 'flex', justifyContent: 'center' }}><Eyebrow center>Ceramic · FAQ</Eyebrow></div>
            <h2 className="display h-1" style={{ marginTop: 18 }}>Questions answered</h2>
          </div>
          <FAQ items={FAQS} />
        </div>
      </section>

      <CTABand title="Protect your investment" sub="Add a ceramic coating to your Gold or Platinum detail, or go all-in with the Diamond package. Message us for a tailored quote." />
      <Footer />
      <StickyActions />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
