/* CLW LLC — shared site parts (nav, footer, CTA band, helpers).
   Loaded on every page via <script type="text/babel">. Exports to window. */

const PHONE_DISPLAY = '832-361-4993';
const PHONE_SMS = 'sms:8323614993';
const PHONE_TEL = 'tel:8323614993';
const EMAIL = 'Chance.clw@gmail.com';

const NAV_LINKS = [
  { label: 'Home', href: 'Home.html' },
  { label: 'Services', href: 'Services.html' },
  { label: 'About', href: 'About.html' },
  { label: 'Contact', href: 'Contact.html' },
];

/* --- Photo placeholder. Clearly labelled so Chance knows what to swap in. --- */
function PhotoFrame({ label = 'Real job photo', note, icon = 'home', ratio = '4 / 3', rounded = 'var(--radius-lg)', style = {} }) {
  const { Icon } = window.CLWDesignSystem_9f04d4;
  return (
    <div style={{
      aspectRatio: ratio, width: '100%', borderRadius: rounded, overflow: 'hidden',
      background: 'linear-gradient(135deg, var(--sand-200), var(--sand-300))',
      border: '1px solid var(--border)',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10,
      color: 'var(--stone-500)', position: 'relative', textAlign: 'center', padding: 'var(--space-5)', ...style,
    }}>
      <Icon name={icon} size={40} color="var(--stone-400)" strokeWidth={1.6} />
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{label}</span>
      {note && <span style={{ fontSize: 'var(--text-small)', color: 'var(--stone-500)', maxWidth: 240, lineHeight: 1.4 }}>{note}</span>}
      <span style={{
        position: 'absolute', top: 10, left: 10, fontFamily: 'var(--font-display)', fontSize: 10,
        fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--stone-500)',
        background: 'rgba(255,255,255,0.65)', borderRadius: 'var(--radius-pill)', padding: '3px 8px',
      }}>Photo</span>
    </div>
  );
}

function Section({ id, bg = 'var(--surface-page)', children, style = {} }) {
  return (
    <section id={id} data-screen-label={id} style={{ background: bg, padding: 'var(--section-pad-y) 0', ...style }}>
      <div className="clw-container">{children}</div>
    </section>
  );
}

function Eyebrow({ children, onDark = false, style = {} }) {
  return <div style={{
    fontFamily: 'var(--font-display)', fontSize: 'var(--text-overline)', fontWeight: 700,
    letterSpacing: 'var(--tracking-overline)', textTransform: 'uppercase',
    color: onDark ? 'var(--clay-400)' : 'var(--color-accent)', marginBottom: 'var(--space-3)', ...style,
  }}>{children}</div>;
}

/* --- Repeated "Text for a quote" CTA band (navy). --- */
function CTABand({ heading = 'Ready to get it done right?', sub = "Text Chance a quick message — he'll get back to you, usually the same day.", id = 'cta' }) {
  const { Button, Icon } = window.CLWDesignSystem_9f04d4;
  return (
    <section id={id} style={{ background: 'var(--navy-800)', color: 'var(--text-on-dark)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 90% at 85% 0%, rgba(46,107,196,0.30), transparent 60%)' }}></div>
      <div className="clw-container" style={{ position: 'relative', padding: 'var(--space-8) var(--gutter)', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--space-5)' }}>
        <div style={{ maxWidth: 680 }}>
          <h2 style={{ color: '#fff', fontSize: 'var(--text-h1)', marginBottom: 'var(--space-3)' }}>{heading}</h2>
          <p style={{ fontSize: 'var(--text-body-lg)', color: 'rgba(251,248,243,0.82)', lineHeight: 'var(--leading-relaxed)', margin: 0 }}>{sub}</p>
        </div>
        <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap', justifyContent: 'center' }}>
          <Button variant="primary" size="lg" href={PHONE_SMS} icon={<Icon name="message" size={20} />}>Text for a quote</Button>
          <Button variant="tertiary" size="lg" href={PHONE_TEL} icon={<Icon name="phone" size={18} />}
            style={{ color: '#fff', borderColor: 'rgba(251,248,243,0.35)' }}>Call {PHONE_DISPLAY}</Button>
        </div>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 'var(--space-2)', color: 'rgba(251,248,243,0.7)', fontSize: 'var(--text-small)' }}>
          <Icon name="clock" size={16} color="var(--clay-400)" /> Available 24/7 · No pricing games, just a straight answer.
        </span>
      </div>
    </section>
  );
}

/* --- Service-area callout (Texas, statewide). --- */
function ServiceArea() {
  const { Icon, Badge } = window.CLWDesignSystem_9f04d4;
  return (
    <Section id="area" bg="var(--surface-muted)">
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 'var(--space-4)' }}>
        <div style={{ width: 64, height: 64, borderRadius: 'var(--radius-md)', background: 'var(--clay-50)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="pin" size={32} color="var(--clay-600)" strokeWidth={2.2} />
        </div>
        <Eyebrow>Service area</Eyebrow>
        <h2 style={{ maxWidth: 620, margin: 0 }}>Serving mobile home communities all across Texas</h2>
        <p className="clw-lead" style={{ maxWidth: 600 }}>
          Based in Texas and on the road statewide — from the Gulf Coast to the Hill Country and up through East Texas. If you're in Texas, we can help.
        </p>
        <div style={{ display: 'flex', gap: 'var(--space-2)', flexWrap: 'wrap', justifyContent: 'center' }}>
          <Badge variant="navy">Houston</Badge>
          <Badge variant="navy">Conroe</Badge>
          <Badge variant="navy">Lufkin</Badge>
          <Badge variant="navy">Waco</Badge>
          <Badge variant="navy">Statewide</Badge>
        </div>
      </div>
    </Section>
  );
}

/* --- Footer: DS Footer styling, extended with Email + Hours per brief. --- */
function SiteFooter() {
  const { Icon } = window.CLWDesignSystem_9f04d4;
  const heading = { fontFamily: 'var(--font-display)', fontWeight: 'var(--weight-bold)', fontSize: 'var(--text-h6)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-wide)', color: 'var(--clay-400)', marginBottom: 'var(--space-3)' };
  const linkRow = { display: 'flex', alignItems: 'center', gap: 'var(--space-2)', color: 'var(--text-on-dark)', marginBottom: 'var(--space-2)' };
  return (
    <footer style={{ background: 'var(--navy-900)', color: 'var(--text-on-dark)' }}>
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'var(--space-8) var(--gutter) var(--space-6)',
        display: 'grid', gap: 'var(--space-7)', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
      }}>
        <div>
          <img src={(window.__resources && window.__resources.logoWhite) || 'assets/logos/clw-logo-white.png'} alt="CLW LLC" style={{ height: 56, width: 'auto', marginBottom: 'var(--space-4)' }} />
          <p style={{ color: 'rgba(251,248,243,0.75)', maxWidth: 280, marginBottom: 'var(--space-4)' }}>
            Mobile home skirting &amp; deck building across Texas. Family-owned. Every job done right and built to last.
          </p>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 'var(--space-2)', fontSize: 'var(--text-small)', color: 'var(--clay-400)', fontWeight: 'var(--weight-semibold)' }}>
            <Icon name="shield" size={16} /> Licensed &amp; Insured
          </span>
        </div>

        <div>
          <div style={heading}>Services</div>
          <a href="Services.html#repairs" style={{ ...linkRow, color: 'rgba(251,248,243,0.85)' }}>Skirting Repairs</a>
          <a href="Services.html#installation" style={{ ...linkRow, color: 'rgba(251,248,243,0.85)' }}>Skirting Installation</a>
          <a href="Services.html#decks" style={{ ...linkRow, color: 'rgba(251,248,243,0.85)' }}>Deck Building</a>
          <a href="About.html" style={{ ...linkRow, color: 'rgba(251,248,243,0.85)' }}>About Chance</a>
        </div>

        <div>
          <div style={heading}>Get a Quote</div>
          <a href={PHONE_SMS} style={linkRow}><Icon name="message" size={18} color="var(--clay-400)" /> Text {PHONE_DISPLAY}</a>
          <a href={PHONE_TEL} style={linkRow}><Icon name="phone" size={18} color="var(--clay-400)" /> Call {PHONE_DISPLAY}</a>
          <a href={'mailto:' + EMAIL} style={linkRow}><Icon name="message" size={18} color="var(--clay-400)" /> {EMAIL}</a>
          <div style={{ ...linkRow, color: 'rgba(251,248,243,0.85)' }}><Icon name="clock" size={18} color="var(--clay-400)" /> Open 24/7</div>
          <div style={{ ...linkRow, color: 'rgba(251,248,243,0.85)' }}><Icon name="pin" size={18} color="var(--clay-400)" /> Serving all of Texas</div>
        </div>
      </div>

      <div style={{ borderTop: '1px solid rgba(251,248,243,0.12)', padding: 'var(--space-4) var(--gutter)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'flex', flexWrap: 'wrap', gap: 'var(--space-2)', justifyContent: 'space-between', fontSize: 'var(--text-small)', color: 'rgba(251,248,243,0.6)' }}>
          <span>&copy; {new Date().getFullYear()} CLW LLC. All rights reserved.</span>
          <span>Honest &middot; Loyal &middot; Timely &middot; Dependable</span>
        </div>
      </div>
    </footer>
  );
}

/* Mounts the global chrome shared by every page: Navbar (top), then page
   content, Footer, and the mobile sticky bar. */
function renderPage(Content) {
  const { Navbar, StickyQuoteBar } = window.CLWDesignSystem_9f04d4;
  return (
    <React.Fragment>
      <Navbar logoSrc={(window.__resources && window.__resources.logoColor) || 'assets/logos/clw-logo.png'} links={NAV_LINKS} />
      <Content />
      <SiteFooter />
      <div id="clw-sticky"><StickyQuoteBar /></div>
    </React.Fragment>
  );
}

Object.assign(window, {
  PHONE_DISPLAY, PHONE_SMS, PHONE_TEL, EMAIL, NAV_LINKS,
  PhotoFrame, Section, Eyebrow, CTABand, ServiceArea, SiteFooter, renderPage,
});