/* global React, Icon, CheckBox, Navbar, QuoteForm, Footer */

function ServiceHero({ config, onQuoteClick }) {
  return (
    <section style={shSt.wrap}>
      <div style={shSt.imageBleed}>
        <img src={config.hero} alt={config.title} style={shSt.bleedImg} />
        <div style={shSt.overlay} />
      </div>
      <div style={shSt.inner}>
        <div style={shSt.copy}>
          <img src="assets/logo-white.png" alt="Deck Restore+" style={shSt.logo} />
          <div className="ds-eyebrow" style={{ color: 'var(--mint-300)', marginBottom: 14 }}>{config.eyebrow}</div>
          <h1 style={shSt.h1}>{config.headline}</h1>
          <p style={shSt.lead}>{config.lead}</p>
          <div style={shSt.ctaRow}>
            <button onClick={onQuoteClick} style={shSt.btn}>
              Get Free Quote
              <Icon name="arrowRight" size={18} stroke={2.5} color="var(--forest-900)" />
            </button>
            <a href="index.html" style={shSt.backLink}>← All Services</a>
          </div>
        </div>
      </div>
    </section>
  );
}
const shSt = {
  wrap: { position: 'relative', background: 'var(--forest-900)', overflow: 'hidden' },
  imageBleed: { position: 'absolute', inset: 0, zIndex: 0 },
  bleedImg: { width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.38) saturate(0.7)' },
  overlay: { position: 'absolute', inset: 0, background: 'linear-gradient(160deg,rgba(0,36,23,0.92) 0%,rgba(0,36,23,0.5) 55%,rgba(0,36,23,0.94) 100%)' },
  inner: { position: 'relative', zIndex: 1, maxWidth: 'var(--container)', margin: '0 auto', padding: '100px 32px 96px', minHeight: 460, display: 'flex', alignItems: 'center' },
  copy: { maxWidth: 680 },
  logo: { height: 46, marginBottom: 22, opacity: 0.95 },
  h1: { fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(2.6rem,5vw,4.5rem)', lineHeight: 1.05, letterSpacing: '-0.03em', color: '#fff', margin: '0 0 18px' },
  lead: { fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: 'rgba(255,255,255,0.82)', margin: '0 0 34px', maxWidth: 540 },
  ctaRow: { display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap' },
  btn: { display: 'inline-flex', alignItems: 'center', gap: 10, background: 'var(--mint-500)', color: 'var(--forest-900)', border: 'none', padding: '15px 26px', borderRadius: 14, fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15.5, cursor: 'pointer', boxShadow: '0 12px 30px -8px rgba(80,200,120,0.45)' },
  backLink: { fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 600, color: 'rgba(255,255,255,0.8)', textDecoration: 'none' },
};

function ServiceProcess({ steps }) {
  return (
    <section style={spSt.wrap}>
      <div style={spSt.inner}>
        <div className="ds-eyebrow" style={{ color: 'var(--mint-300)', textAlign: 'center', marginBottom: 12 }}>HOW WE DO IT</div>
        <h2 style={spSt.h2}>The process, step by step.</h2>
        <div style={spSt.list}>
          {steps.map(s => (
            <div key={s.num} style={spSt.step}>
              <div style={spSt.num}>{s.num}</div>
              <div>
                <h3 style={spSt.title}>{s.title}</h3>
                <p style={spSt.body}>{s.body}</p>
                <div style={spSt.pills}>
                  {s.pills.map(p => (
                    <div key={p} style={spSt.pill}>
                      <CheckBox size={20} />
                      <span>{p}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
const spSt = {
  wrap: { background: 'var(--forest-700)', padding: '88px 0' },
  inner: { maxWidth: 'var(--container)', margin: '0 auto', padding: '0 32px' },
  h2: { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(2rem,3.6vw,3rem)', lineHeight: 1.1, letterSpacing: '-0.02em', color: '#fff', margin: '0 0 48px', textAlign: 'center' },
  list: { display: 'flex', flexDirection: 'column', gap: 20 },
  step: { background: 'var(--forest-800)', borderRadius: 20, padding: '26px 30px', display: 'grid', gridTemplateColumns: '72px 1fr', gap: 20, border: '1px solid var(--forest-600)', alignItems: 'flex-start' },
  num: { fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 42, color: 'var(--mint-300)', letterSpacing: '-0.02em', lineHeight: 1 },
  title: { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, color: '#fff', margin: '0 0 8px', letterSpacing: '-0.01em' },
  body: { fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,0.78)', margin: '0 0 14px' },
  pills: { display: 'flex', gap: 8, flexWrap: 'wrap' },
  pill: { display: 'flex', alignItems: 'center', gap: 8, background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.12)', padding: '7px 12px', borderRadius: 999, fontFamily: 'var(--font-display)', fontSize: 12.5, fontWeight: 600, color: '#fff' },
};

function ServiceBenefits({ benefits }) {
  return (
    <section style={sbSt.wrap}>
      <div style={sbSt.inner}>
        <div className="ds-eyebrow" style={{ marginBottom: 12 }}>WHY IT MATTERS</div>
        <h2 style={sbSt.h2}>What you get.</h2>
        <div style={sbSt.grid}>
          {benefits.map(b => (
            <div key={b} style={sbSt.item}>
              <CheckBox size={26} />
              <span style={sbSt.itemText}>{b}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
const sbSt = {
  wrap: { background: 'var(--cream)', padding: '80px 0', borderTop: '1px solid var(--border)' },
  inner: { maxWidth: 'var(--container)', margin: '0 auto', padding: '0 32px' },
  h2: { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(2rem,3.4vw,2.75rem)', lineHeight: 1.1, letterSpacing: '-0.02em', color: 'var(--ink-900)', margin: '0 0 36px' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px,1fr))', gap: 18 },
  item: { display: 'flex', alignItems: 'flex-start', gap: 14 },
  itemText: { fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, color: 'var(--ink-900)', paddingTop: 2, lineHeight: 1.4 },
};

function ServiceGallery({ photos }) {
  return (
    <section style={sgSt.wrap}>
      <div style={sgSt.inner}>
        <div className="ds-eyebrow" style={{ marginBottom: 12 }}>OUR WORK</div>
        <div style={sgSt.header}>
          <h2 style={sgSt.h2}>Recent Projects</h2>
          <a href="index.html#work" style={sgSt.viewAll}>Full gallery →</a>
        </div>
        <div style={sgSt.grid}>
          {photos.map((src, i) => (
            <div key={i} style={sgSt.card}>
              <img src={src} alt="Project photo" style={sgSt.img} loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
const sgSt = {
  wrap: { background: 'var(--paper)', padding: '80px 0', borderTop: '1px solid var(--border)' },
  inner: { maxWidth: 'var(--container)', margin: '0 auto', padding: '0 32px' },
  header: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 28, flexWrap: 'wrap', gap: 12 },
  h2: { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(1.8rem,3vw,2.6rem)', letterSpacing: '-0.02em', color: 'var(--ink-900)', margin: 0 },
  viewAll: { fontFamily: 'var(--font-body)', fontSize: 14.5, fontWeight: 600, color: 'var(--forest-700)', textDecoration: 'none' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(280px,1fr))', gap: 18 },
  card: { borderRadius: 18, overflow: 'hidden', border: '1px solid var(--border)', boxShadow: 'var(--shadow-sm)', aspectRatio: '4/3' },
  img: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' },
};

function RelatedServices({ related }) {
  return (
    <section style={rsSt.wrap}>
      <div style={rsSt.inner}>
        <div className="ds-eyebrow" style={{ textAlign: 'center', marginBottom: 12 }}>EXPLORE MORE</div>
        <h2 style={rsSt.h2}>Related Services</h2>
        <div style={rsSt.grid}>
          {related.map(r => (
            <a key={r.slug} href={r.slug + '.html'} style={rsSt.card}>
              <span style={rsSt.cardTitle}>{r.title}</span>
              <span style={rsSt.arrow}>→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
const rsSt = {
  wrap: { background: 'var(--cream)', padding: '72px 0', borderTop: '1px solid var(--border)' },
  inner: { maxWidth: 'var(--container)', margin: '0 auto', padding: '0 32px', textAlign: 'center' },
  h2: { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(1.8rem,3vw,2.4rem)', letterSpacing: '-0.02em', color: 'var(--ink-900)', margin: '0 0 28px' },
  grid: { display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' },
  card: { display: 'inline-flex', alignItems: 'center', gap: 12, padding: '16px 28px', background: 'var(--paper)', border: '1px solid var(--border)', borderRadius: 14, textDecoration: 'none', transition: 'all var(--transition-base)' },
  cardTitle: { fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 700, color: 'var(--ink-900)' },
  arrow: { fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--forest-700)', fontWeight: 600 },
};

function ServicePage({ config }) {
  const scrollToQuote = () => {
    const el = document.getElementById('quote');
    if (el) {
      const top = el.getBoundingClientRect().top + window.pageYOffset - 80;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };
  return (
    <>
      <Navbar />
      <ServiceHero config={config} onQuoteClick={scrollToQuote} />
      <ServiceProcess steps={config.steps} />
      <ServiceBenefits benefits={config.benefits} />
      <ServiceGallery photos={config.gallery} />
      <RelatedServices related={config.related} />
      <QuoteForm />
      <Footer />
      <button
        style={fabSt}
        aria-label="Live chat"
        onClick={() => alert('Live chat coming soon. Use the quote form above or call us.')}
      >
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
        </svg>
      </button>
    </>
  );
}
const fabSt = {
  position: 'fixed', bottom: 28, right: 28, zIndex: 100,
  width: 56, height: 56, borderRadius: '50%',
  background: 'var(--forest-700)', border: 'none', cursor: 'pointer',
  boxShadow: '0 8px 24px -4px rgba(0,66,37,0.45)',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
};

window.ServicePage = ServicePage;