// Shared subpage template — reads __PAGE_CONFIG__ from window and renders.
// All subpages use the same Nav, Footer, dark theme as index.html.

const SubpageHero = ({ breadcrumb, eyebrow, title, subhead, accent }) => (
  <section style={{ position: 'relative', paddingTop: 120, paddingBottom: 80, overflow: 'hidden' }}>
    <div className="container">
      {/* Breadcrumb */}
      <nav className="reveal" style={{
        display: 'flex', alignItems: 'center', gap: 8,
        fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase',
        color: 'rgba(255,255,255,0.45)', marginBottom: 28,
      }}>
        {breadcrumb.map((b, i) => (
          <React.Fragment key={i}>
            {b.href
              ? <a href={b.href} style={{ color: 'rgba(255,255,255,0.65)' }}>{b.label}</a>
              : <span style={{ color: '#fff' }}>{b.label}</span>}
            {i < breadcrumb.length - 1 && <span style={{ opacity: 0.4 }}>/</span>}
          </React.Fragment>
        ))}
      </nav>

      <div style={{ maxWidth: 820 }}>
        <div className="eyebrow reveal">— {eyebrow}</div>
        <h1 className="reveal" style={{
          color: '#fff', fontSize: 'clamp(36px, 5vw, 60px)', marginTop: 18, textWrap: 'balance', letterSpacing: '-0.02em',
        }}>
          {title}
        </h1>
        <p className="reveal" data-delay="0.05" style={{
          color: 'rgba(255,255,255,0.7)', fontSize: 18, marginTop: 22, maxWidth: 640, textWrap: 'pretty',
        }}>
          {subhead}
        </p>
        <div className="reveal" data-delay="0.1" style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 30 }}>
          <a href={PHONE_TEL} className="btn btn-primary" style={{ background: accent, padding: '14px 24px', fontSize: 16 }}>
            <Icon name="phone" size={15} /> Call {PHONE_DISPLAY}
          </a>
          <a href="contact.html" className="btn btn-outline-light" style={{ padding: '14px 22px' }}>
            Get a Free Quote <Icon name="arrowRight" size={14} className="arrow" />
          </a>
        </div>
      </div>
    </div>
  </section>
);

const WhatsIncluded = ({ heading, items, accent }) => (
  <section style={{ padding: '80px 0' }}>
    <div className="container">
      <div className="wi-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
        <div className="reveal">
          <div className="eyebrow">— What's Included</div>
          <h2 style={{ fontSize: 'clamp(26px, 3.5vw, 38px)', marginTop: 14 }}>{heading}</h2>
        </div>
        <ul className="reveal" data-delay="0.1" style={{
          listStyle: 'none', padding: 0, margin: 0,
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px 24px',
        }}>
          {items.map(it => (
            <li key={it} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, fontSize: 15.5, color: 'rgba(255,255,255,0.85)' }}>
              <span style={{
                flexShrink: 0, width: 22, height: 22, borderRadius: 999,
                background: 'rgba(74,134,214,0.16)',
                color: '#4a86d6',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginTop: 2,
              }}>
                <Icon name="check" size={13} stroke={2.5} />
              </span>
              {it}
            </li>
          ))}
        </ul>
      </div>
      <style>{`@media (max-width: 800px) { .wi-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .wi-grid ul { grid-template-columns: 1fr !important; } }`}</style>
    </div>
  </section>
);

const ImageWithText = ({ image, alt, eyebrow, heading, body }) => {
  // If no image is provided, render text-only at a comfortable max width.
  if (!image) {
    return (
      <section style={{ padding: '80px 0' }}>
        <div className="container">
          <div className="reveal" style={{ maxWidth: 720 }}>
            <div className="eyebrow">— {eyebrow}</div>
            <h2 style={{ fontSize: 'clamp(26px, 3.5vw, 38px)', marginTop: 14 }}>{heading}</h2>
            <p style={{ color: 'rgba(255,255,255,0.7)', fontSize: 16.5, marginTop: 18, lineHeight: 1.7 }}>{body}</p>
          </div>
        </div>
      </section>
    );
  }
  return (
    <section style={{ padding: '80px 0' }}>
      <div className="container">
        <div className="iwt-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div className="reveal" style={{ borderRadius: 14, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.08)' }}>
            <img src={image} alt={alt} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', aspectRatio: '4/3' }} />
          </div>
          <div className="reveal" data-delay="0.08">
            <div className="eyebrow">— {eyebrow}</div>
            <h2 style={{ fontSize: 'clamp(26px, 3.5vw, 38px)', marginTop: 14, maxWidth: 520 }}>{heading}</h2>
            <p style={{ color: 'rgba(255,255,255,0.7)', fontSize: 16.5, marginTop: 18, lineHeight: 1.7, maxWidth: 520 }}>{body}</p>
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .iwt-grid { grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </section>
  );
};

const IssuesGrid = ({ eyebrow, heading, items }) => (
  <section style={{ padding: '80px 0' }}>
    <div className="container">
      <div className="reveal" style={{ maxWidth: 720, marginBottom: 40 }}>
        <div className="eyebrow">— {eyebrow}</div>
        <h2 style={{ fontSize: 'clamp(26px, 3.5vw, 38px)', marginTop: 14 }}>{heading}</h2>
      </div>
      <div className="ig-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {items.map((it, i) => (
          <div key={i} className="card reveal" data-delay={`${i * 0.05}`} style={{ padding: 22 }}>
            <div style={{
              width: 38, height: 38, borderRadius: 8,
              background: 'rgba(74,134,214,0.14)',
              color: '#4a86d6',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 16,
            }}>
              <Icon name={it.icon || 'wrench'} size={18} />
            </div>
            <h3 style={{ fontSize: 16, fontWeight: 700, letterSpacing: '-0.005em' }}>{it.title}</h3>
            {it.body && <p style={{ color: 'rgba(255,255,255,0.6)', fontSize: 14, marginTop: 6, lineHeight: 1.5 }}>{it.body}</p>}
          </div>
        ))}
      </div>
      <style>{`
        @media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 540px) { .ig-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </div>
  </section>
);

const CTABand = ({ accent }) => (
  <section style={{ padding: '90px 0', position: 'relative', overflow: 'hidden' }}>
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: 'radial-gradient(circle at 85% 50%, rgba(0,72,144,0.22), transparent 45%)',
    }}></div>
    <div className="container" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40, alignItems: 'center' }}>
      <div className="reveal">
        <div className="eyebrow" style={{ color: '#4a86d6' }}>— Get Started</div>
        <h2 style={{ color: '#fff', fontSize: 'clamp(28px, 4vw, 44px)', marginTop: 14, maxWidth: 640 }}>
          Need a Garage Door Fixed or Installed?
        </h2>
        <p style={{ color: 'rgba(255,255,255,0.72)', fontSize: 17, marginTop: 14, maxWidth: 540 }}>
          Tell us what's going on. We'll get back to you within one business day — usually sooner.
        </p>
      </div>
      <div className="reveal" data-delay="0.1" style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
        <a href={PHONE_TEL} className="btn btn-primary" style={{ background: accent, padding: '15px 24px', fontSize: 16 }}>
          <Icon name="phone" size={16} /> Call {PHONE_DISPLAY}
        </a>
        <a href="contact.html" className="btn btn-outline-light" style={{ padding: '15px 22px' }}>
          Get a Free Quote <Icon name="arrowRight" size={15} className="arrow" />
        </a>
      </div>
    </div>
  </section>
);

// Subpage shell — composes sections from window.__PAGE_CONFIG__
const Subpage = () => {
  const cfg = window.__PAGE_CONFIG__ || {};
  const accent = '#004890';

  useReveal();

  return (
    <>
      <TopBar accent={accent} />
      <Nav accent={accent} />

      <SubpageHero {...cfg.hero} accent={accent} />
      {cfg.included && <WhatsIncluded {...cfg.included} accent={accent} />}
      {cfg.imageText && <ImageWithText {...cfg.imageText} />}
      {cfg.issues && <IssuesGrid {...cfg.issues} />}
      {cfg.extra && cfg.extra()}
      <CTABand accent={accent} />
      <Footer accent={accent} />

      <a href={PHONE_TEL} className="float-call pulse" aria-label={`Call ${PHONE_DISPLAY}`}>
        <Icon name="phone" size={22} />
      </a>
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<Subpage />);