/* Stanley Bankruptcy Law, website shell: Header, Footer, Section helpers */

const BRAND = window.StanleyBankruptcyLawDesignSystem_1e6713;

// ← Paste your Google Calendar booking URL here
const BOOKING_URL = 'https://calendar.app.google/4zmD9koymo63V2QD7';
const openBooking = () => window.open(BOOKING_URL, '_blank', 'noopener,noreferrer');
const { Button, Badge } = BRAND;

const NAV = [
{ id: 'home', label: 'Home' },
{ id: 'types', label: 'Bankruptcy Types' },
{ id: 'city-eastern-kentucky', label: 'Service Areas' },
{ id: 'faq', label: 'Debts FAQ' },
{ id: 'blog', label: 'Blog' },
{ id: 'about', label: 'About' },
{ id: 'contact', label: 'Contact' }];


const COUNTIES = ['Boyd', 'Greenup', 'Carter', 'Lawrence', 'Johnson', 'Magoffin', 'Floyd', 'Pike', 'Knott', 'Letcher', 'Perry', 'Knox', 'Laurel'];
const CITIES = ['Ashland', 'Grayson', 'Louisa', 'Paintsville', 'Prestonsburg', 'Pikeville', 'Hazard', 'Whitesburg', 'Hindman', 'Manchester', 'Corbin', 'London'];

// Depth-aware relative prefix so assets/scripts resolve correctly no matter
// how many path segments deep the current URL is (e.g. /blog/some-article).
function sitePrefix() {
  if (typeof window.__ASSET_PREFIX__ === 'string') return window.__ASSET_PREFIX__;
  const segs = window.location.pathname.split('/').filter(Boolean);
  return segs.map(() => '../').join('');
}

function Icon({ name, size = 20, color, strokeWidth = 1.9, style }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current || !window.lucide) return;
    ref.current.innerHTML = '<i data-lucide="' + name + '"></i>';
    window.lucide.createIcons({ node: ref.current });
    const svg = ref.current.querySelector('svg');
    if (svg) {
      svg.setAttribute('width', size);
      svg.setAttribute('height', size);
      svg.setAttribute('stroke-width', strokeWidth);
      svg.style.color = color || 'currentColor';
    }
  }, [name, size, strokeWidth, color]);
  return (
    <span ref={ref}
      style={{ display:'inline-flex', alignItems:'center', justifyContent:'center',
               flexShrink:0, width:size+'px', height:size+'px', ...(style||{}) }} />
  );
}

function ConsultStrip({ navigate }) {
  return (
    <div style={{ background: 'var(--green-900)', color: '#E9F0EA', fontFamily: 'var(--font-sans)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '9px 24px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '14px', fontSize: '13.5px', flexWrap: 'wrap' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
          <Icon name="calendar-check" size={16} color="var(--gold-300)" />
          Schedule your free, no-obligation consult call today
        </span>
        <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer" onClick={(e) => {e.preventDefault();openBooking();}}
        style={{ color: 'var(--gold-300)', fontWeight: 600, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: '5px' }}>
          Book now <Icon name="arrow-right" size={14} />
        </a>
      </div>
    </div>);

}

function SiteHeader({ page, navigate, scrolled }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const closeMenu = () => setMenuOpen(false);
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50 }}>
      <ConsultStrip navigate={navigate} />
      <div style={{
        background: 'var(--paper)',
        borderBottom: '1px solid ' + (scrolled ? 'var(--border-strong)' : 'var(--border)'),
        boxShadow: scrolled ? 'var(--shadow-sm)' : 'none',
        transition: 'box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out)'
      }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 20px', height: 'var(--header-h)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <a href="/" onClick={(e) => {e.preventDefault();navigate('home');closeMenu();}} style={{ display: 'flex', alignItems: 'center' }}>
            <img src={'/logo.png'} alt="Stanley Bankruptcy Law" style={{ height: '62px', display: 'block' }} />
          </a>
          <nav className="nav-desktop">
            {NAV.map((n) => {
              const active = page === n.id;
              return (
                <a key={n.id} href={window.hrefFor ? window.hrefFor(n.id) : '#'}
                onClick={(e) => {e.preventDefault();navigate(n.id);}}
                style={{ fontFamily: 'var(--font-sans)', fontSize: '14.5px', fontWeight: 600,
                  color: active ? 'var(--brand)' : 'var(--ink-700)', textDecoration: 'none',
                  padding: '8px 14px', borderRadius: 'var(--radius-md)',
                  background: active ? 'var(--green-50)' : 'transparent',
                  transition: 'background var(--dur) var(--ease-out), color var(--dur) var(--ease-out)' }}
                onMouseEnter={(e) => {if (!active) e.currentTarget.style.background = 'var(--sand-100)';}}
                onMouseLeave={(e) => {if (!active) e.currentTarget.style.background = 'transparent';}}>
                  {n.label}
                </a>);
            })}
            <div style={{ marginLeft: '10px' }}>
              <Button variant="accent" size="sm" onClick={openBooking} iconLeft={<Icon name="phone" size={15} />}>
                Free Consult
              </Button>
            </div>
          </nav>
          <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
            <a className="nav-call-mobile" href="tel:+12764095541" aria-label="Call Stanley Bankruptcy Law now">
              <Icon name="phone" size={19} />
            </a>
            <button className="nav-mobile-btn" onClick={() => setMenuOpen(!menuOpen)}
              aria-label={menuOpen ? 'Close menu' : 'Open menu'}>
              <Icon name={menuOpen ? 'x' : 'menu'} size={28} />
            </button>
          </div>
        </div>
        <nav className={'nav-mobile-drawer' + (menuOpen ? ' is-open' : '')}>
          {NAV.map((n) => {
            const active = page === n.id;
            return (
              <a key={n.id} href={window.hrefFor ? window.hrefFor(n.id) : '#'}
                onClick={(e) => {e.preventDefault();navigate(n.id);closeMenu();}}
                style={{ fontFamily: 'var(--font-sans)', fontSize: '16px', fontWeight: 600,
                  color: active ? 'var(--brand)' : 'var(--ink-800)', textDecoration: 'none',
                  padding: '12px 14px', borderRadius: 'var(--radius-md)',
                  background: active ? 'var(--green-50)' : 'transparent',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                {n.label}
                {active && <Icon name="chevron-right" size={16} color="var(--brand)" />}
              </a>);
          })}
          <div style={{ marginTop: '10px', padding: '0 14px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
            <a href="tel:+12764095541" onClick={closeMenu} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '9px', minHeight: '46px', background: 'var(--brand)', color: '#F4F2EA', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: '15.5px', textDecoration: 'none', borderRadius: 'var(--radius-md)' }}>
              <Icon name="phone" size={17} color="var(--gold-300)" /> Call (276) 409-5541
            </a>
            <div style={{ display: 'flex', gap: '8px' }}>
              <a href="sms:+12764095541" onClick={closeMenu} style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px', minHeight: '46px', background: 'var(--green-50)', color: 'var(--brand)', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: '15px', textDecoration: 'none', borderRadius: 'var(--radius-md)' }}>
                <Icon name="message-square" size={16} /> Text us
              </a>
              <div style={{ flex: 1 }}>
                <Button variant="accent" size="md" onClick={() => {openBooking();closeMenu();}} iconLeft={<Icon name="calendar-check" size={16} />} fullWidth>
                  Free Consult
                </Button>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </header>);
}

function Section({ children, bg, narrow, pad = 'lg', id }) {
  const pads = { sm: '40px', md: '64px', lg: '92px' };
  const bgs = { paper: 'var(--paper)', surface: 'var(--surface)', sand: 'var(--sand-100)', brand: 'var(--brand)', brandDark: 'var(--green-900)' };
  return (
    <section id={id} data-pad={pad} style={{ background: bgs[bg] || bg || 'transparent', padding: pads[pad] + ' 24px' }}>
      <div style={{ maxWidth: narrow ? 'var(--container-narrow)' : 'var(--container)', margin: '0 auto' }}>
        {children}
      </div>
    </section>);

}

function Eyebrow({ children, onBrand }) {
  return (
    <div style={{ fontFamily: 'var(--font-sans)', fontSize: '12px', fontWeight: 600, letterSpacing: '0.14em',
      textTransform: 'uppercase', color: onBrand ? 'var(--gold-300)' : 'var(--accent-strong)',
      display: 'flex', alignItems: 'center', gap: '9px', marginBottom: '14px' }}>
      <span style={{ width: '24px', height: '2px', background: 'currentColor', opacity: 0.7 }} />
      {children}
    </div>);

}

function SiteFooter({ navigate }) {
  const disclaimer = "Dalton Stanley is the attorney responsible for the content of this website. Principal office located at 156 Ky Oil Village, Betsy Layne, KY 41605. The information provided on this website is for general educational and informational purposes only and does not constitute formal legal advice. Viewing this website or submitting a contact form does not create an attorney-client relationship. An attorney-client relationship is only established after a formal consultation and the execution of a written representation agreement. Licensed to practice law in the Commonwealth of Kentucky. THIS IS ADVERTISING MATERIAL. We are a debt relief agency. We help people file for bankruptcy relief under the Bankruptcy Code.";
  const linkS = { color: '#C5D4E4', textDecoration: 'none', fontSize: '14.5px', fontFamily: 'var(--font-sans)', display: 'block', padding: '5px 0' };
  return (
    <footer style={{ background: 'var(--green-900)', color: '#C5D4E4', fontFamily: 'var(--font-sans)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '64px 24px 0' }}>
        <div className="resp-grid-footer" style={{ paddingBottom: '48px', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: '23px', fontWeight: 600, color: '#F4F2EA', marginBottom: '12px' }}>Stanley Bankruptcy Law</div>
            <p style={{ fontSize: '14.5px', lineHeight: 1.6, maxWidth: '34ch', margin: '0 0 18px' }}>
              Honest, local bankruptcy help for Eastern Kentucky. A fresh start, with dignity and peace of mind.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', fontSize: '14px' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: '9px' }}><Icon name="map-pin" size={16} color="var(--gold-300)" />156 Ky Oil Village, Betsy Layne, KY 41605 · By Appointment Only</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: '9px' }}><Icon name="phone" size={16} color="var(--gold-300)" /><a href="tel:+12764095541" style={{ color: '#C5D4E4', textDecoration: 'none' }}>(276) 409-5541</a><span aria-hidden="true">·</span><a href="sms:+12764095541" style={{ color: 'var(--gold-300)', textDecoration: 'none', fontWeight: 600 }}>Text us</a></span>
              <span style={{ display: 'flex', alignItems: 'center', gap: '9px' }}><Icon name="mail" size={16} color="var(--gold-300)" /><a href="mailto:dalton@stanleybankruptcylaw.com" style={{ color: '#C5D4E4', textDecoration: 'none' }}>dalton@stanleybankruptcylaw.com</a></span>
              <span style={{ display: 'flex', alignItems: 'center', gap: '9px' }}><Icon name="scale" size={16} color="var(--gold-300)" />Licensed in the Commonwealth of Kentucky</span>
            </div>
          </div>
          <div>
            <div style={{ fontSize: '12px', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--gold-300)', fontWeight: 600, marginBottom: '10px' }}>Practice</div>
            {NAV.filter((n) => n.id.indexOf('city-') !== 0).map((n) => <a key={n.id} href={window.hrefFor ? window.hrefFor(n.id) : '#'} onClick={(e) => {e.preventDefault();navigate(n.id);}} style={linkS}>{n.label}</a>)}
            <a href={window.hrefFor ? window.hrefFor('chapter-7') : '/chapter-7'} onClick={(e) => {e.preventDefault();navigate('chapter-7');}} style={linkS}>Chapter 7 Bankruptcy</a>
            <a href={window.hrefFor ? window.hrefFor('chapter-13') : '/chapter-13'} onClick={(e) => {e.preventDefault();navigate('chapter-13');}} style={linkS}>Chapter 13 Bankruptcy</a>
          </div>
          <div>
            <div style={{ fontSize: '12px', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--gold-300)', fontWeight: 600, marginBottom: '10px' }}>SERVICE AREAS</div>
            {[
            { slug: 'city-pikeville', label: 'Pikeville' },
            { slug: 'city-hazard', label: 'Hazard' },
            { slug: 'city-whitesburg', label: 'Whitesburg' },
            { slug: 'city-grayson', label: 'Grayson' },
            { slug: 'city-salyersville', label: 'Salyersville' },
            { slug: 'city-prestonsburg', label: 'Prestonsburg' },
            { slug: 'city-paintsville', label: 'Paintsville' },
            { slug: 'city-ashland', label: 'Ashland' },
            { slug: 'city-london', label: 'London' },
            { slug: 'city-eastern-kentucky', label: 'All of Eastern KY' }].
            map((c) => <a key={c.slug} href={window.hrefFor ? window.hrefFor(c.slug) : '#'} onClick={(e) => {e.preventDefault();navigate(c.slug);}} style={linkS}>{c.label}</a>)}
          </div>
          <div>
            <div style={{ fontSize: '12px', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--gold-300)', fontWeight: 600, marginBottom: '10px' }}>Serving</div>
            <div style={{ fontSize: '14px', lineHeight: 1.85 }}>{COUNTIES.map((c) => c + ' County').join(' · ')}, and other counties as well.</div>
          </div>
        </div>
        <div style={{ padding: '26px 0 40px' }}>
          <p style={{ fontSize: '11.5px', lineHeight: 1.7, color: '#8FA897', margin: '0 0 16px', maxWidth: '92ch' }}>{disclaimer}</p>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '10px' }}>
            <p style={{ fontSize: '12px', color: '#8FA897', margin: 0 }}>© 2026 DT Stanley PLLC d/b/a Stanley Bankruptcy Law. All Rights Reserved.</p>
            <div style={{ display: 'flex', gap: '20px' }}>
              <a href={window.hrefFor ? window.hrefFor('privacy-policy') : '/privacy-policy'}
                onClick={(e) => { e.preventDefault(); navigate('privacy-policy'); }}
                style={{ fontSize: '12px', color: '#8FA897', textDecoration: 'none', fontFamily: 'var(--font-sans)' }}
                onMouseEnter={(e) => e.currentTarget.style.color = '#C5D4E4'}
                onMouseLeave={(e) => e.currentTarget.style.color = '#8FA897'}>
                Privacy Policy
              </a>
              <a href={window.hrefFor ? window.hrefFor('terms') : '/terms-of-service'}
                onClick={(e) => { e.preventDefault(); navigate('terms'); }}
                style={{ fontSize: '12px', color: '#8FA897', textDecoration: 'none', fontFamily: 'var(--font-sans)' }}
                onMouseEnter={(e) => e.currentTarget.style.color = '#C5D4E4'}
                onMouseLeave={(e) => e.currentTarget.style.color = '#8FA897'}>
                Terms of Service
              </a>
            </div>
          </div>
        </div>
      </div>
    </footer>);

}

function ChatWidget() {
  const [open, setOpen] = React.useState(false);
  const [msgs, setMsgs] = React.useState([{ from: 'bot', text: "Hi, I'm here to help. Tell us what you're facing, debt, foreclosure, garnishment, and we'll point you the right way." }]);
  const [text, setText] = React.useState('');
  const feedRef = React.useRef(null);
  React.useEffect(() => {if (window.lucide) window.lucide.createIcons();}, [open, msgs]);
  React.useEffect(() => {if (feedRef.current) feedRef.current.scrollTop = feedRef.current.scrollHeight;}, [msgs, open]);
  const send = (t) => {
    const q = (t || text).trim();if (!q) return;
    setText('');
    setMsgs((m) => [...m, { from: 'me', text: q }]);
    setTimeout(() => setMsgs((m) => [...m, { from: 'bot', text: "Thanks, that's exactly what a free consultation is for. The fastest way to clear answers is a no-obligation call with Dalton. You can also reach us at (276) 409-5541." }]), 650);
  };
  const quick = ['Will I lose my house?', 'How much does it cost?', 'Stop a foreclosure'];
  return (
    <div className="chat-widget-wrap" style={{ position: 'fixed', right: '22px', bottom: '22px', zIndex: 200, fontFamily: 'var(--font-sans)' }}>
      {open &&
      <div className="chat-widget-box" style={{ width: '344px', height: '470px', background: 'var(--surface)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)', border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', overflow: 'hidden', marginBottom: '14px' }}>
          <div style={{ background: 'var(--brand)', color: '#F4F2EA', padding: '15px 18px', display: 'flex', alignItems: 'center', gap: '12px' }}>
            <div style={{ width: '38px', height: '38px', borderRadius: '50%', background: 'rgba(255,255,255,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--gold-300)' }}><Icon name="scale" size={20} /></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, fontSize: '15px' }}>Stanley Bankruptcy Law</div>
              <div style={{ fontSize: '12px', color: '#C5D4E4', display: 'flex', alignItems: 'center', gap: '5px' }}><span style={{ width: '7px', height: '7px', borderRadius: '50%', background: '#7FD6A0', display: 'inline-block' }} />Typically replies same day</div>
            </div>
            <button onClick={() => setOpen(false)} style={{ background: 'none', border: 'none', color: '#C5D4E4', cursor: 'pointer', display: 'flex' }}><Icon name="x" size={20} /></button>
          </div>
          <div ref={feedRef} style={{ flex: 1, overflowY: 'auto', padding: '16px', display: 'flex', flexDirection: 'column', gap: '10px', background: 'var(--paper)' }}>
            {msgs.map((m, i) =>
          <div key={i} style={{ alignSelf: m.from === 'me' ? 'flex-end' : 'flex-start', maxWidth: '82%', background: m.from === 'me' ? 'var(--brand)' : 'var(--surface)', color: m.from === 'me' ? '#F4F2EA' : 'var(--ink-700)', border: m.from === 'me' ? 'none' : '1px solid var(--border)', borderRadius: '12px', padding: '10px 13px', fontSize: '14px', lineHeight: 1.5, boxShadow: 'var(--shadow-sm)' }}>{m.text}</div>
          )}
          </div>
          <div style={{ padding: '10px 12px', borderTop: '1px solid var(--border)', background: 'var(--surface)' }}>
            <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', marginBottom: '8px' }}>
              {quick.map((q) => <button key={q} onClick={() => send(q)} style={{ fontSize: '12px', fontFamily: 'var(--font-sans)', color: 'var(--brand)', background: 'var(--green-50)', border: '1px solid var(--green-200)', borderRadius: '999px', padding: '5px 10px', cursor: 'pointer' }}>{q}</button>)}
            </div>
            <form onSubmit={(e) => {e.preventDefault();send();}} style={{ display: 'flex', gap: '8px' }}>
              <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Type your message…" style={{ flex: 1, border: '1.5px solid var(--border-strong)', borderRadius: 'var(--radius-md)', padding: '9px 12px', fontFamily: 'var(--font-sans)', fontSize: '14px', outline: 'none' }} />
              <button type="submit" aria-label="Send" style={{ background: 'var(--accent)', border: 'none', borderRadius: 'var(--radius-md)', width: '42px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-on-accent)', cursor: 'pointer' }}><Icon name="send" size={17} /></button>
            </form>
          </div>
        </div>
      }
      <button onClick={() => {if(!open&&window.gtag)gtag('event','conversion',{'send_to':'AW-18191405149/qLxoCLmc0tgcEN2gq-JD'});setOpen(!open);}} aria-label="Chat with us"
      style={{ width: '60px', height: '60px', borderRadius: '50%', background: 'var(--brand)', color: 'var(--gold-300)', border: 'none', boxShadow: 'var(--shadow-lg)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', marginLeft: 'auto', transition: 'transform var(--dur) var(--ease-out)' }}
      onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
      onMouseLeave={(e) => e.currentTarget.style.transform = 'none'}>
        <Icon name={open ? 'chevron-down' : 'message-circle'} size={26} />
      </button>
    </div>);

}

Object.assign(window, { Icon, SiteHeader, SiteFooter, Section, Eyebrow, ConsultStrip, ChatWidget, NAV, COUNTIES, CITIES });