/* Stanley Bankruptcy Law, content pages: Types, FAQ, About, Contact, Blog */

const CB = window.StanleyBankruptcyLawDesignSystem_1e6713;

function PageHead({ eyebrow, title, intro }) {
  return (
    <div style={{ background: 'var(--brand)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(110% 100% at 90% 0%, rgba(200,151,47,0.14) 0%, transparent 55%)' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(125deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 30px)' }} />
      <div className="page-head-inner" style={{ position: 'relative', maxWidth: 'var(--container-narrow)', margin: '0 auto', padding: '70px 24px 64px', textAlign: 'center' }}>
        <Eyebrow onBrand>{eyebrow}</Eyebrow>
        <h1 className="page-head-h1" style={{ color: '#F7F5EE', fontSize: '44px', lineHeight: 1.08, margin: '0 auto 16px', maxWidth: '20ch' }}>{title}</h1>
        {intro && <p style={{ color: '#D7E3DA', fontSize: '18px', lineHeight: 1.6, margin: '0 auto', maxWidth: '58ch' }}>{intro}</p>}
      </div>
    </div>);

}

/* ===================== BANKRUPTCY TYPES ===================== */
function TypesPage({ navigate }) {
  const { Button, Badge, Card } = CB;
  const chapters = [
  {
    tag: 'Chapter 7', sub: 'Getting a fresh start', icon: 'sunrise', accent: 'var(--brand)',
    paras: [
    'Chapter 7 is often referred to as "straight" or "liquidation" bankruptcy. It\'s designed to give people relatively quick relief by wiping out most unsecured debts, such as credit cards, medical bills, and personal loans. In many cases, the entire process is completed in just a few months from filing to discharge without you having to even go to court.',
    'While the term "liquidation" can sound intimidating, in reality it\'s not so scary. Most individuals who file Chapter 7 are able to keep all their property, like a home, car, and personal belongings, using available exemptions.'],

    who: 'Chapter 7 is typically best for individuals who:',
    points: [
    'Do not have enough assets or disposable income to repay their debts.',
    'Need immediate relief from aggressive creditor phone calls and harassment.',
    'Pass the "means test," which compares your income and expenses to the median in Kentucky.',
    'Are looking for a clean slate to rebuild their credit.']

  },
  {
    tag: 'Chapter 13', sub: 'Reorganize, renegotiate & repay', icon: 'calendar-range', accent: 'var(--gold-700)',
    paras: [
    'Chapter 13 is a reorganization bankruptcy that allows you to pay all or a portion of your debts through a court-approved repayment plan. Instead of eliminating debts in a few months, you make a single monthly payment based on your income, expenses, and what you owe, generally over a three-to-five year period.',
    'This option is highly effective for people who have fallen behind on secured debts like a mortgage or car loan. The bankruptcy can stop a foreclosure or repossession, and give you time to catch up while keeping your home or car. At the end of the plan, any unpaid qualifying unsecured debt is typically discharged.'],

    who: 'Chapter 13 is often the right choice for individuals who:',
    points: [
    'Have a steady, reliable income.',
    'Are facing foreclosure and want to save their home.',
    'Need to stop vehicle repossession, keep the vehicle, and catch up on missed payments.',
    'Have non-exempt property you want to protect from liquidation.',
    'Want a plan to repay their debts over time with one affordable monthly payment.']

  }];

  return (
    <main>
      <PageHead eyebrow="Chapter 7 & Chapter 13" title="Two common ways to get relief from overwhelming debt"
      intro="Both options can provide a path to a fresh start, but they work in very different ways. We're here to help you understand which fits your situation." />
      <Section bg="paper">
        <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
          {chapters.map((c) =>
          <Card key={c.tag} padding="lg" accentTop>
              <div className="resp-grid-types">
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '14px', marginBottom: '18px' }}>
                    <div style={{ width: '54px', height: '54px', borderRadius: 'var(--radius-md)', background: c.accent, color: 'var(--gold-300)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={c.icon} size={28} /></div>
                    <div>
                      <Badge variant="brand" style={{ marginBottom: '6px' }}>{c.tag}</Badge>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: '26px', fontWeight: 600, color: 'var(--text-strong)', lineHeight: 1.1 }}>{c.sub}</div>
                    </div>
                  </div>
                  {c.paras.map((p, i) => <p key={i} style={{ fontSize: '16px', color: 'var(--ink-700)', lineHeight: 1.66, margin: '0 0 14px' }}>{p}</p>)}
                </div>
                <div style={{ background: 'var(--green-50)', borderRadius: 'var(--radius-md)', padding: '26px', alignSelf: 'start' }}>
                  <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: '15px', color: 'var(--text-strong)', marginBottom: '16px', lineHeight: 1.4 }}>{c.who}</div>
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '13px' }}>
                    {c.points.map((pt) =>
                  <li key={pt} style={{ display: 'flex', alignItems: 'flex-start', gap: '11px', fontSize: '14.5px', color: 'var(--ink-700)', lineHeight: 1.5 }}>
                        <span style={{ color: 'var(--success)', flexShrink: 0, marginTop: '1px' }}><Icon name="check-circle-2" size={18} /></span>{pt}
                      </li>
                  )}
                  </ul>
                </div>
              </div>
            </Card>
          )}
        </div>
        <div style={{ textAlign: 'center', marginTop: '44px', padding: '36px', background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)' }}>
          <h3 style={{ fontSize: '24px', margin: '0 0 10px' }}>Unsure which chapter is right for you?</h3>
          <p style={{ fontSize: '16px', color: 'var(--ink-700)', margin: '0 auto 22px', maxWidth: '54ch' }}>Schedule your free, no-obligation consultation today to discuss your financial options with an experienced bankruptcy attorney in Eastern Kentucky.</p>
          <Button variant="accent" size="lg" onClick={() => navigate('contact')} iconLeft={<Icon name="calendar-check" size={18} />}>Begin your fresh start today</Button>
        </div>
      </Section>
      <CtaBand navigate={navigate} />
    </main>);

}

/* ===================== FAQ ===================== */
function FaqItem({ q, a, open, onClick }) {
  return (
    <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)', boxShadow: open ? 'var(--shadow-md)' : 'var(--shadow-sm)', overflow: 'hidden', transition: 'box-shadow var(--dur) var(--ease-out)' }}>
      <button onClick={onClick} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '16px', padding: '20px 24px', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left', fontFamily: 'var(--font-display)', fontSize: '18.5px', fontWeight: 600, color: 'var(--text-strong)' }}>
        {q}
        <span style={{ flexShrink: 0, color: 'var(--accent-strong)', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur) var(--ease-out)' }}><Icon name="chevron-down" size={22} /></span>
      </button>
      <div style={{ maxHeight: open ? '320px' : '0', transition: 'max-height var(--dur-slow) var(--ease-out)', overflow: 'hidden' }}>
        <p style={{ padding: '0 24px 22px', margin: 0, fontSize: '15.5px', lineHeight: 1.66, color: 'var(--ink-700)' }}>{a}</p>
      </div>
    </div>);

}

function FaqPage({ navigate }) {
  const { Callout } = CB;
  const [open, setOpen] = React.useState(0);
  const faqs = [
  { q: 'Will I lose my house or my car if I file?', a: 'In most cases, no. Exemptions are designed to let people keep essential property. Most Chapter 7 filers keep their home, vehicle, and personal belongings, and Chapter 13 is specifically built to help you catch up on a mortgage or car loan and keep them.' },
  { q: 'How much does it cost to file bankruptcy?', a: 'You can begin your Chapter 7 with $0 down. We\'ll walk you through the court filing fee and our straightforward fee structure during your free consultation, so there are no surprises, just honest, clear numbers.' },
  { q: 'Can bankruptcy stop creditor calls and harassment?', a: 'Yes. The moment your case is filed, an "automatic stay" goes into effect that legally stops most collection calls, lawsuits, wage garnishments, foreclosures, and repossessions while your case moves forward.' },
  { q: 'What\'s the difference between Chapter 7 and Chapter 13?', a: 'Chapter 7 wipes out most unsecured debts in a few months. Chapter 13 reorganizes your debts into one affordable monthly payment over three to five years. This is ideal if you\'re behind on a mortgage or car and want to keep them. We\'ll help you choose the right path.' },
  { q: 'Which debts can be discharged?', a: 'Bankruptcy can eliminate most unsecured debts, credit cards, medical bills, and personal loans. Some debts, like most student loans (unless you qualify for student loan discharge), recent taxes, and child support, generally cannot be discharged. We\'ll review your specific debts together. If you\'re interested in discharging your student loans, please let us know so we can give you our honest evaluation.' },
  { q: 'Will bankruptcy ruin my credit forever?', a: 'No. For many people already behind on payments, credit is already suffering. Bankruptcy gives you a clean slate to rebuild, many clients begin re-establishing healthy credit within a year of their discharge.' },
  { q: 'How soon should I talk to an attorney?', a: 'The sooner the better, especially if you\'re facing a foreclosure sale, repossession, or wage garnishment, where timing matters. Your consultation is free and carries no obligation.' }];

  return (
    <main>
      <PageHead eyebrow="Debts FAQ" title="Straight answers to the questions we hear most"
      intro="Honest, plain-spoken answers about debt relief in Eastern Kentucky. Have a question that isn't here? Ask it during your free consultation." />
      <Section bg="paper" narrow>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
          {faqs.map((f, i) => <FaqItem key={i} q={f.q} a={f.a} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />)}
        </div>
        <div style={{ marginTop: '28px' }}>
          <Callout variant="quiet" icon={<Icon name="info" size={18} />}>
            This page is for general educational purposes and is not legal advice. Every situation is different, schedule a free consult to discuss yours.
          </Callout>
        </div>
      </Section>
      <CtaBand navigate={navigate} />
    </main>);

}

/* ===================== ABOUT ===================== */
function AboutPage({ navigate }) {
  const { Button, Badge, Card } = CB;
  const creds = [
  { icon: 'gavel', t: 'U.S. Bankruptcy Court Clerkship', d: 'Served as a Judicial Law Clerk at the U.S. Bankruptcy Court for the Eastern District of Kentucky, working directly with the court on complex issues and learning how judges make their decisions.' },
  { icon: 'graduation-cap', t: 'JD + MBA, University of Kentucky', d: 'Combines legal skill with a practical, real-world understanding of finances to help clients find the best path forward.' },
  { icon: 'shield-check', t: 'Office of the U.S. Trustee', d: 'Gained experience at the Department of Justice\'s Office of the U.S. Trustee, often described as the "watchdog" of the bankruptcy system.' }];

  return (
    <main>
      <PageHead eyebrow="About" title={<><span style={{ textDecoration:'underline', textDecorationColor:'var(--gold-300)', textDecorationThickness:'3px', textUnderlineOffset:'5px' }}>Dalton Stanley</span> Eastern Kentucky bankruptcy attorney</>} />
      <Section bg="paper">
        <div className="resp-grid-about">
          <div>
            <div className="about-photo-wrap" style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden', aspectRatio: '4/5', boxShadow: 'var(--shadow-lg)', position: 'relative', border: '1px solid var(--green-900)' }}>
              <img src={'/dalton-library.jpg'} alt="Dalton Stanley" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 18%' }} />
            </div>
            <div style={{ marginTop: '18px', display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
              <Badge variant="brand">Pikeville native</Badge>
              <Badge variant="accent">Eastern KY</Badge>
            </div>
          </div>
          <div>
            <Eyebrow>Local roots, real understanding</Eyebrow>
            <p style={{ fontSize: '18px', color: 'var(--text-strong)', lineHeight: 1.6, margin: '0 0 18px', fontFamily: 'var(--font-display)', fontWeight: 500 }}>
              Facing financial challenges is overwhelming, but having a local attorney who understands the system makes a significant difference.
            </p>
            <p style={{ fontSize: '16px', color: 'var(--ink-700)', lineHeight: 1.66, margin: '0 0 16px' }}>Dalton Stanley brings a unique perspective, having served as a Judicial Law Clerk at the U.S. Bankruptcy Court for the Eastern District of Kentucky. During this time, he worked directly with the court on complex issues. His job involved discussing bankruptcy issues with judges to help them decide which way to rule on specific issues. This helped him learn how judges make their decisions.

            </p>
            <p style={{ fontSize: '16px', color: 'var(--ink-700)', lineHeight: 1.66, margin: '0 0 16px' }}>His experience extends well beyond the courtroom. Before opening his own practice, he spent a year working directly with clients to help them get bankruptcy relief, and gained additional experience at the Department of Justice's Office of the U.S. Trustee who oversees the integrity of the bankruptcy system.

            </p>
            <p style={{ fontSize: '16px', color: 'var(--ink-700)', lineHeight: 1.66, margin: '0 0 28px' }}>
              Whether you're dealing with personal debt or business restructuring, Dalton uses his years of specialized training and local Kentucky experience to provide clear, compassionate, and effective guidance for your fresh start.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
              {creds.map((c) =>
              <Card key={c.t} padding="md" style={{ display: 'flex', gap: '16px', alignItems: 'flex-start' }}>
                  <div style={{ width: '44px', height: '44px', flexShrink: 0, borderRadius: 'var(--radius-md)', background: 'var(--green-50)', color: 'var(--brand)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={c.icon} size={22} /></div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: '15.5px', color: 'var(--text-strong)', marginBottom: '4px' }}>{c.t}</div>
                    <div style={{ fontSize: '14.5px', color: 'var(--ink-700)', lineHeight: 1.55 }}>{c.d}</div>
                  </div>
                </Card>
              )}
            </div>
            <div style={{ marginTop: '28px' }}>
              <Button variant="accent" size="lg" onClick={() => navigate('contact')} iconLeft={<Icon name="calendar-check" size={18} />}>Schedule a free consult with Dalton</Button>
            </div>
          </div>
        </div>
      </Section>
      <CtaBand navigate={navigate} />
    </main>);

}

/* ===================== CONTACT ===================== */
function ContactPage() {
  const { Button, Card, Callout } = CB;
  const [sent, setSent] = React.useState(false);
  const fieldS = { width: '100%', padding: '12px 14px', fontFamily: 'var(--font-sans)', fontSize: '15px', color: 'var(--text-strong)', background: 'var(--surface)', border: '1.5px solid var(--border-strong)', borderRadius: 'var(--radius-md)', outline: 'none', boxSizing: 'border-box' };
  const labelS = { display: 'block', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: '13.5px', color: 'var(--text-strong)', marginBottom: '6px' };
  const info = [
  { icon: 'calendar-check', t: 'Free consultation', d: 'Book a no-obligation call at a time that works for you.', cta: 'Open scheduler' },
  { icon: 'phone', t: 'Call or text', d: <span><a href="tel:+12764095541" style={{ color: 'var(--brand)', fontWeight: 600, textDecoration: 'none' }}>(276) 409-5541</a> · <a href="sms:+12764095541" style={{ color: 'var(--brand)', fontWeight: 600, textDecoration: 'none' }}>Send a text</a></span> },
  { icon: 'mail', t: 'Email', d: <a href="mailto:dalton@stanleybankruptcylaw.com" style={{ color: 'var(--brand)', fontWeight: 600, textDecoration: 'none' }}>dalton@stanleybankruptcylaw.com</a> },
  { icon: 'map-pin', t: 'Office, By Appointment Only', d: '156 Ky Oil Village, Betsy Layne, KY 41605' },
  { icon: 'scale', t: 'Licensed', d: 'Admitted to practice in the Commonwealth of Kentucky' }];

  return (
    <main>
      <PageHead eyebrow="Contact" title="Begin your fresh start today"
      intro="Schedule your free, no-obligation consultation. Honest answers, clear next steps, and someone local who will walk with you." />
      <Section bg="paper">
        <div className="resp-grid-contact">
          <Card padding="lg">
            {sent ?
            <div style={{ textAlign: 'center', padding: '40px 12px' }}>
                <div style={{ width: '64px', height: '64px', margin: '0 auto 18px', borderRadius: '50%', background: 'var(--success-bg)', color: 'var(--success)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="check" size={32} strokeWidth={2.4} /></div>
                <h3 style={{ fontSize: '24px', margin: '0 0 8px' }}>Thank you, we'll be in touch.</h3>
                <p style={{ fontSize: '15.5px', color: 'var(--ink-700)', margin: '0 auto 20px', maxWidth: '40ch' }}>We'll reach out shortly to schedule your free consultation. For the fastest response, you can also book directly on the calendar.</p>
                <Button variant="outline" onClick={() => setSent(false)}>Send another message</Button>
              </div> :

            <form action="https://formspree.io/f/xvzjkoaa" method="POST" onSubmit={(e) => {e.preventDefault();const formData = new FormData(e.target);fetch('https://formspree.io/f/xvzjkoaa',{method:'POST',body:formData,headers:{'Accept':'application/json'}}).then(()=>{if(window.gtag)gtag('event','conversion',{'send_to':'AW-18191405149/EW7uCLac0tgcEN2gq-JD'});setSent(true);}).catch(err=>console.error(err));}}>
                <h3 style={{ fontSize: '23px', margin: '0 0 6px' }}>Contact Us</h3>
                <p style={{ fontSize: '14.5px', color: 'var(--text-muted)', margin: '0 0 22px' }}>Fill out the form below and we'll get back to you as soon as possible. Submitting this form does not create an attorney-client relationship.</p>
                <div style={{ marginBottom: '16px' }}>
                  <label style={labelS}>Name <span style={{ color: 'var(--danger)' }}>*</span></label>
                  <input name="name" style={fieldS} required placeholder="Your full name" />
                </div>
                <div style={{ marginBottom: '16px' }}>
                  <label style={labelS}>Email <span style={{ color: 'var(--danger)' }}>*</span></label>
                  <input name="email" type="email" style={fieldS} required placeholder="you@email.com" />
                </div>
                <div style={{ marginBottom: '16px' }}>
                  <label style={labelS}>Phone Number</label>
                  <input name="phone" type="tel" style={fieldS} placeholder="(276) 000-0000" />
                </div>
                <div style={{ marginBottom: '22px' }}>
                  <label style={labelS}>How can we help you? <span style={{ color: 'var(--danger)' }}>*</span></label>
                  <textarea name="message" style={{ ...fieldS, minHeight: '130px', resize: 'vertical' }} required placeholder="Tell us a little about your situation…" />
                </div>
                <div style={{ marginBottom: '20px' }}>
                  <label style={labelS}>Is this an emergency? <span style={{ color: 'var(--danger)' }}>*</span></label>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginTop: '4px' }}>
                    {[
                      { val: 'yes', label: 'Yes, Help Me NOW!' },
                      { val: 'no',  label: "No, I'm exploring my options." },
                      { val: 'unsure', label: 'Unsure' },
                    ].map((opt) => (
                      <label key={opt.val} style={{ display: 'flex', alignItems: 'center', gap: '10px', fontFamily: 'var(--font-sans)', fontSize: '15px', color: 'var(--text-strong)', cursor: 'pointer', padding: '10px 14px', border: '1.5px solid var(--border-strong)', borderRadius: 'var(--radius-md)', background: 'var(--surface)', transition: 'border-color var(--dur) var(--ease-out)' }}
                        onMouseEnter={(e) => e.currentTarget.style.borderColor = 'var(--brand)'}
                        onMouseLeave={(e) => e.currentTarget.style.borderColor = 'var(--border-strong)'}>
                        <input name="emergency" type="radio" value={opt.val} required style={{ accentColor: 'var(--brand)', width: '17px', height: '17px', flexShrink: 0 }} />
                        {opt.label}
                      </label>
                    ))}
                  </div>
                </div>
                <div style={{ marginBottom: '22px' }}>
                  <label style={{ ...labelS, marginBottom: '10px' }}>Household information</label>
                  <div className="resp-grid-income">
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
                      <label style={{ fontFamily: 'var(--font-sans)', fontSize: '12.5px', color: 'var(--text-muted)', fontWeight: 500 }}>Estimated annual income</label>
                      <input name="income" style={{ ...fieldS, margin: 0 }} placeholder="e.g. $45,000" />
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
                      <label style={{ fontFamily: 'var(--font-sans)', fontSize: '12.5px', color: 'var(--text-muted)', fontWeight: 500 }}>People in household</label>
                      <input name="household_size" type="number" min="1" style={{ ...fieldS, margin: 0 }} placeholder="e.g. 3" />
                    </div>
                  </div>
                </div>
                <Button variant="accent" size="lg" type="submit" fullWidth iconLeft={<Icon name="send" size={17} />}>Submit</Button>
              </form>
            }
          </Card>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
            {info.map((it) =>
            <Card key={it.t} padding="md" accentTop={it.icon === 'calendar-check'} style={{ display: 'flex', gap: '16px', alignItems: 'flex-start' }}>
                <div style={{ width: '46px', height: '46px', flexShrink: 0, borderRadius: 'var(--radius-md)', background: 'var(--brand)', color: 'var(--gold-300)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={it.icon} size={22} /></div>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '18px', color: 'var(--text-strong)', marginBottom: '4px' }}>{it.t}</div>
                  <div style={{ fontSize: '14.5px', color: 'var(--ink-700)', lineHeight: 1.55 }}>{it.d}</div>
                  {it.cta && <a href="https://calendar.app.google/4zmD9koymo63V2QD7" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: '5px', marginTop: '8px', fontSize: '14px', fontWeight: 600, color: 'var(--brand)', textDecoration: 'none' }}>{it.cta} <Icon name="arrow-up-right" size={15} /></a>}
                </div>
              </Card>
            )}
            <Callout variant="accent" title="Eastern Kentucky, served locally" icon={<Icon name="map-pin" size={18} />}>
              Serving clients from Ashland to London, Boyd, Greenup, Carter, Lawrence, Johnson, Magoffin, Floyd, Pike, Knott, Letcher, Perry, Knox, Laurel and other counties as well.
            </Callout>
            <Card padding="md">
              <iframe title="Map: Stanley Bankruptcy Law, 156 Ky Oil Village, Betsy Layne, KY 41605" src="https://www.google.com/maps?q=156+KY+Oil+Village,+Betsy+Layne,+KY+41605&output=embed" width="100%" height="250" style={{ border: 0, display: 'block', borderRadius: 'var(--radius-md)' }} loading="lazy" referrerPolicy="no-referrer-when-downgrade" allowFullScreen></iframe>
              <a href="https://www.google.com/maps/dir/?api=1&destination=156+KY+Oil+Village,+Betsy+Layne,+KY+41605" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: '5px', marginTop: '12px', fontSize: '14px', fontWeight: 600, fontFamily: 'var(--font-sans)', color: 'var(--brand)', textDecoration: 'none' }}>Get directions <Icon name="arrow-up-right" size={15} /></a>
            </Card>
          </div>
        </div>
      </Section>
    </main>);

}

/* ===================== BLOG ===================== */
function BlogPage({ navigate }) {
  const { Button, Badge, Card } = CB;
  const posts = [
  { tag: 'Chapter 7', read: '7 min read', date: 'June 2026', icon: 'scale', article: 'article-discharge', verified: true, title: 'Which debts does bankruptcy actually erase?', excerpt: 'A statute-by-statute look at what a Chapter 7 discharge wipes out, what it leaves behind, and who qualifies under the means test.' },
  { tag: 'Foreclosure', read: '6 min read', date: 'May 2026', icon: 'home', article: 'article-foreclosure', verified: true, title: 'Can bankruptcy stop a foreclosure in Kentucky?', excerpt: 'The automatic stay can halt a foreclosure sale the moment you file. Here is how it works, and how Chapter 13 helps you keep the home.' },
  { tag: 'Your rights', read: '6 min read', date: 'June 2026', icon: 'shield-off', article: 'article-garnishment', verified: true, title: 'Can bankruptcy stop a wage garnishment in Kentucky?', excerpt: 'Filing turns a garnishment off by law, and the Consumer Credit Protection Act limits how much can be taken even before you file.' },
  { tag: 'Your rights', read: '5 min read', date: 'June 2026', icon: 'pause', article: 'article-stay', verified: true, title: "The automatic stay: the 'pause button' that starts the day you file", excerpt: 'The most powerful protection in bankruptcy is instant. What the stay freezes, how long it lasts, and where its limits are.' },
  { tag: 'Credit', read: '6 min read', date: 'April 2026', icon: 'trending-up', article: 'article-credit', title: 'Rebuilding your credit after bankruptcy', excerpt: 'Bankruptcy is a clean slate, not a dead end. A practical timeline for re-establishing healthy credit in the year after discharge.' },
  { tag: 'Getting started', read: '4 min read', date: 'April 2026', icon: 'clipboard-list', article: 'article-consult', title: 'What to bring to your free consultation', excerpt: 'A short checklist of the documents and details that help us give you the clearest possible answers on our first call.' },
  { tag: 'Exemptions', read: '2 min read', date: 'March 2026', icon: 'shield-check', article: 'article-exemptions', title: 'Will I lose my property? Federal exemptions explained', excerpt: 'Most filers keep their home, car, and belongings. Here is how exemptions protect what matters most to your family.' }];

  const feature = posts[0];
  const go = (p) => navigate(p.article ? p.article : 'contact');
  const VerifiedTag = () =>
  <span style={{ display: 'inline-flex', alignItems: 'center', gap: '5px', fontFamily: 'var(--font-sans)', fontSize: '12px', fontWeight: 600, color: 'var(--success)', background: 'var(--success-bg)', borderRadius: '999px', padding: '4px 10px' }}>
      <Icon name="badge-check" size={14} />Citations verified
    </span>;

  return (
    <main>
      <PageHead eyebrow="Blog" title="Honest guidance on debt, bankruptcy & your fresh start"
      intro="Plain-spoken articles on bankruptcy in Eastern Kentucky, written to help you understand your options, not to sell you." />
      <Section bg="paper">
        <Card padding="none" interactive style={{ overflow: 'hidden', marginBottom: '34px', cursor: 'pointer' }} onClick={() => go(feature)}>
          <div className="resp-grid-blog-feat">
            <div className="blog-feat-img" style={{ position: 'relative', background: 'var(--brand)', minHeight: '300px', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 90% at 80% 10%, rgba(200,151,47,0.22) 0%, transparent 55%)' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(125deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 28px)' }} />
              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--gold-300)' }}><Icon name={feature.icon} size={68} strokeWidth={1.4} /></div>
            </div>
            <div className="blog-feat-content" style={{ padding: '38px 40px', display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'flex', gap: '10px', alignItems: 'center', marginBottom: '14px', flexWrap: 'wrap' }}>
                <Badge variant="accent">Featured</Badge>
                {feature.verified && <VerifiedTag />}
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: '13px', color: 'var(--text-muted)' }}>{feature.tag} · {feature.date} · {feature.read}</span>
              </div>
              <h2 style={{ fontSize: '30px', lineHeight: 1.15, margin: '0 0 14px' }}>{feature.title}</h2>
              <p style={{ fontSize: '16.5px', color: 'var(--ink-700)', lineHeight: 1.62, margin: '0 0 24px' }}>{feature.excerpt}</p>
              <div style={{ marginTop: 'auto' }}>
                <Button variant="primary" href={feature.article && window.hrefFor ? window.hrefFor(feature.article) : undefined} onClick={(e) => {e.preventDefault();e.stopPropagation();go(feature);}} iconRight={<Icon name="arrow-right" size={16} />}>Read article</Button>
              </div>
            </div>
          </div>
        </Card>
        <div className="resp-grid-3col" style={{ gap: '24px' }}>
          {posts.slice(1).map((p) =>
          <Card key={p.title} interactive padding="none" style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column', cursor: 'pointer' }} onClick={() => go(p)}>
              <div style={{ position: 'relative', background: 'var(--green-50)', height: '128px', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--brand)' }}><Icon name={p.icon} size={40} strokeWidth={1.5} /></div>
                <span style={{ position: 'absolute', left: '14px', top: '14px', fontFamily: 'var(--font-sans)', fontSize: '12px', fontWeight: 600, color: 'var(--brand)', background: 'var(--surface)', borderRadius: '999px', padding: '4px 11px', boxShadow: 'var(--shadow-sm)' }}>{p.tag}</span>
                {p.verified && <span style={{ position: 'absolute', right: '14px', top: '14px', color: 'var(--success)', background: 'var(--surface)', borderRadius: '999px', padding: '4px', display: 'flex', boxShadow: 'var(--shadow-sm)' }} title="Citations verified against primary law"><Icon name="badge-check" size={16} /></span>}
              </div>
              <div style={{ padding: '22px 22px 24px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: '12.5px', color: 'var(--text-muted)', marginBottom: '8px' }}>{p.date} · {p.read}</div>
                <h3 style={{ fontSize: '19px', lineHeight: 1.25, margin: '0 0 10px' }}>{p.title}</h3>
                <p style={{ fontSize: '14.5px', color: 'var(--ink-700)', lineHeight: 1.58, margin: '0 0 16px' }}>{p.excerpt}</p>
                {p.article ?
                <a href={window.hrefFor ? window.hrefFor(p.article) : '#'} onClick={(e) => {e.preventDefault();e.stopPropagation();go(p);}} style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: '6px', fontFamily: 'var(--font-sans)', fontSize: '14px', fontWeight: 600, color: 'var(--brand)', textDecoration: 'none' }}>Read article <Icon name="arrow-right" size={15} /></a> :
                <span style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: '6px', fontFamily: 'var(--font-sans)', fontSize: '14px', fontWeight: 600, color: 'var(--brand)' }}>Read more <Icon name="arrow-right" size={15} /></span>}
              </div>
            </Card>
          )}
        </div>
      </Section>
      <CtaBand navigate={navigate} />
    </main>);

}

Object.assign(window, { TypesPage, FaqPage, AboutPage, ContactPage, BlogPage, PageHead });