/* Stanley Bankruptcy Law, Home page */

const { Button: HButton, Badge: HBadge, Card: HCard, Stat: HStat } = window.StanleyBankruptcyLawDesignSystem_1e6713;

function HeroPhoto() {
  return (
    <div className="hero-photo" style={{ position:'relative', borderRadius:'var(--radius-lg)', overflow:'hidden', aspectRatio:'4/5', boxShadow:'var(--shadow-lg)', border:'1px solid var(--green-900)' }}>
      <img src={'/dalton-window.jpg'} alt="Dalton Stanley" style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 18%' }} />
      <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg, transparent 45%, rgba(19,39,31,0.78) 100%)' }} />
      <div style={{ position:'absolute', left:'18px', bottom:'18px', right:'18px' }}>
        <div style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:'20px', color:'#F4F2EA' }}>Dalton Stanley</div>
        <div style={{ fontFamily:'var(--font-sans)', fontSize:'13px', color:'rgba(244,242,234,0.82)' }}>Pikeville native · JD + MBA, University of Kentucky</div>
      </div>
    </div>
  );
}

function HomePage({ navigate }) {
  const promises = [
    { icon:'badge-dollar-sign', title:'$0 down to file', body:'Start your Chapter 7 with nothing down. We keep the path to relief simple and affordable.' },
    { icon:'map-pin', title:'Local to Eastern Kentucky', body:'Led by Pikeville native Dalton Stanley: genuine, local care, not a faceless firm three states away.' },
    { icon:'gavel', title:'Experience Working at the Courthouse', body:'Former Judicial Law Clerk at the U.S. Bankruptcy Court for the Eastern District of Kentucky.' },
  ];
  return (
    <main>
      {/* HERO */}
      <div style={{ background:'var(--brand)', position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', inset:0, background:'radial-gradient(120% 90% at 88% 0%, rgba(200,151,47,0.16) 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="resp-grid-hero hero-inner" style={{ position:'relative', maxWidth:'var(--container)', margin:'0 auto', padding:'88px 24px 92px' }}>
          <div>
            <Eyebrow onBrand>A Fresh Start for Eastern Kentucky</Eyebrow>
            <h1 className="hero-h1" style={{ color:'#F7F5EE', fontSize:'54px', lineHeight:1.04, margin:'0 0 22px', letterSpacing:'-0.025em' }}>
              File Your Chapter&nbsp;7 Bankruptcy for <span style={{ color:'var(--gold-300)' }}>$0 down.</span>
            </h1>
            <p style={{ color:'#D7E3DA', fontSize:'19px', lineHeight:1.6, maxWidth:'52ch', margin:'0 0 16px' }}>
              Financial struggles are heavy, but you don't have to carry them alone. We believe in straightforward talk and practical solutions, the legal expertise you need with the local care you deserve.
            </p>
            <p style={{ color:'var(--gold-300)', fontFamily:'var(--font-display)', fontSize:'20px', fontStyle:'italic', margin:'0 0 30px' }}>
              Be honest. Be clear. Walk with you every step of the way.
            </p>
            <div style={{ display:'flex', gap:'14px', flexWrap:'wrap' }}>
              <HButton variant="accent" size="lg" onClick={()=>navigate('contact')} iconLeft={<Icon name="calendar-check" size={18} />}>Schedule a free consult</HButton>
              <HButton variant="outline" size="lg" onClick={()=>navigate('types')} style={{ color:'#F4F2EA', borderColor:'rgba(244,242,234,0.4)' }} iconRight={<Icon name="arrow-right" size={17} />}>Explore your options</HButton>
            </div>
            <div style={{ display:'flex', gap:'10px', marginTop:'30px', flexWrap:'wrap' }}>
              <HBadge variant="accent">Chapter 7</HBadge>
              <HBadge variant="accent">Chapter 13</HBadge>
              <HBadge variant="brand" style={{ background:'rgba(255,255,255,0.08)', color:'#E4EDE7', borderColor:'rgba(255,255,255,0.18)' }}>Free consultation</HBadge>
            </div>
          </div>
          <div className="hero-photo-wrap"><HeroPhoto /></div>
        </div>
      </div>

      {/* PROMISES */}
      <Section bg="paper" pad="md">
        <div className="resp-grid-3col">
          {promises.map((p)=>(
            <HCard key={p.title} accentTop padding="md">
              <div style={{ width:'46px', height:'46px', borderRadius:'var(--radius-md)', background:'var(--green-50)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--brand)', marginBottom:'16px' }}>
                <Icon name={p.icon} size={24} />
              </div>
              <h3 style={{ fontSize:'20px', margin:'0 0 8px' }}>{p.title}</h3>
              <p style={{ fontSize:'15px', color:'var(--ink-700)', lineHeight:1.6, margin:0 }}>{p.body}</p>
            </HCard>
          ))}
        </div>
      </Section>

      {/* TWO CHAPTERS */}
      <Section bg="surface">
        <div style={{ textAlign:'center', maxWidth:'60ch', margin:'0 auto 44px' }}>
          <Eyebrow>Two Possible Paths to Relief</Eyebrow>
          <h2 style={{ fontSize:'36px', margin:'0 0 14px' }}>Which bankruptcy is right for you?</h2>
          <p style={{ fontSize:'17px', color:'var(--ink-700)', margin:0 }}>Both Chapter 7 and Chapter 13 lead to a fresh start, they just work in very different ways. The right option depends on your income, assets, and goals.</p>
        </div>
        <div className="resp-grid-2col">
          {[
            { tag:'Chapter 7', sub:'The fresh start', icon:'sunrise', desc:'Wipes out most unsecured debts, credit cards, medical bills, personal loans, often in just a few months from filing to discharge.', points:['No down payment to begin','Stop creditor calls & harassment','Most clients keep their property'] },
            { tag:'Chapter 13', sub:'Reorganize & repay', icon:'calendar-range', desc:'One affordable monthly payment over three to five years. Stops foreclosure and repossession while you catch up.', points:['Save your home from foreclosure','Stop vehicle repossession','Protect non-exempt property'] },
          ].map((c)=>(
            <HCard key={c.tag} interactive padding="lg" style={{ display:'flex', flexDirection:'column' }}>
              <div style={{ display:'flex', alignItems:'center', gap:'14px', marginBottom:'16px' }}>
                <div style={{ width:'52px', height:'52px', borderRadius:'var(--radius-md)', background:'var(--brand)', color:'var(--gold-300)', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name={c.icon} size={26} /></div>
                <div>
                  <div style={{ fontFamily:'var(--font-display)', fontSize:'24px', fontWeight:600, color:'var(--text-strong)', lineHeight:1.1 }}>{c.tag}</div>
                  <div style={{ fontFamily:'var(--font-sans)', fontSize:'13px', letterSpacing:'0.04em', textTransform:'uppercase', color:'var(--accent-strong)', fontWeight:600 }}>{c.sub}</div>
                </div>
              </div>
              <p style={{ fontSize:'15.5px', color:'var(--ink-700)', lineHeight:1.6, margin:'0 0 18px' }}>{c.desc}</p>
              <ul style={{ listStyle:'none', padding:0, margin:'0 0 22px', display:'flex', flexDirection:'column', gap:'10px' }}>
                {c.points.map((pt)=>(
                  <li key={pt} style={{ display:'flex', alignItems:'flex-start', gap:'10px', fontSize:'15px', color:'var(--ink-700)' }}>
                    <span style={{ color:'var(--success)', marginTop:'1px' }}><Icon name="check" size={18} strokeWidth={2.4} /></span>{pt}
                  </li>
                ))}
              </ul>
              <div style={{ marginTop:'auto' }}>
                <HButton variant="outline" onClick={()=>navigate(c.tag==='Chapter 7'?'chapter-7':c.tag==='Chapter 13'?'chapter-13':'types')} iconRight={<Icon name="arrow-right" size={16} />}>Learn about {c.tag}</HButton>
              </div>
            </HCard>
          ))}
        </div>
      </Section>

      {/* SERVICE AREA */}
      <Section bg="paper">
        <div className="resp-grid-sa">
          <div>
            <Eyebrow>Proudly Local</Eyebrow>
            <h2 style={{ fontSize:'33px', margin:'0 0 16px' }}>Serving families across Eastern Kentucky</h2>
            <p style={{ fontSize:'16.5px', color:'var(--ink-700)', lineHeight:1.65, margin:'0 0 24px' }}>
              From Ashland to London, we help Eastern Kentucky residents find debt relief through Chapter 7 and Chapter 13 bankruptcy. Local roots, real understanding of the court, and a plain-spoken commitment to walk with you, and if you don't see your county listed, just ask; we serve other counties as well.
            </p>
            <div style={{ display:'flex', gap:'34px' }}>
              <HStat value="12+" label="Counties served" sublabel="Ashland to London" />
              <HStat value="$0" label="Down to file" sublabel="Chapter 7 bankruptcy" />
            </div>
          </div>
          <div style={{ display:'flex', flexWrap:'wrap', gap:'10px', alignContent:'flex-start' }}>
            {window.CITIES.map((city)=>(
              <span key={city} style={{ display:'inline-flex', alignItems:'center', gap:'7px', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--radius-pill)', padding:'9px 16px', fontFamily:'var(--font-sans)', fontSize:'14.5px', fontWeight:500, color:'var(--text-strong)', boxShadow:'var(--shadow-sm)' }}>
                <Icon name="map-pin" size={14} color="var(--accent-strong)" />{city}
              </span>
            ))}
            <div style={{ width:'100%', marginTop:'6px', display:'flex', flexWrap:'wrap', gap:'8px' }}>
              {[
                {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 Kentucky'},
              ].map((c)=>(
                <a key={c.slug} href={window.hrefFor ? window.hrefFor(c.slug) : '#'} onClick={(e)=>{ e.preventDefault(); navigate(c.slug); }}
                  style={{ display:'inline-flex', alignItems:'center', gap:'5px', fontFamily:'var(--font-sans)', fontSize:'13.5px', fontWeight:600, color:'var(--brand)', textDecoration:'none', background:'var(--green-50)', border:'1px solid var(--green-200)', borderRadius:'999px', padding:'6px 13px' }}>
                  <Icon name="arrow-right" size={13} />{c.label} page
                </a>
              ))}
            </div>
          </div>
        </div>
      </Section>

      {/* REVIEWS */}
      <ReviewsSection />

      {/* CTA BAND */}
      <CtaBand navigate={navigate} />
    </main>
  );
}

function CtaBand({ navigate }) {
  return (
    <div style={{ background:'var(--green-900)', position:'relative', overflow:'hidden' }}>
      <div style={{ position:'absolute', inset:0, background:'radial-gradient(100% 120% at 12% 100%, rgba(200,151,47,0.18) 0%, transparent 55%)' }} />
      <div className="cta-inner" style={{ position:'relative', maxWidth:'var(--container-narrow)', margin:'0 auto', padding:'72px 24px', textAlign:'center' }}>
        <Eyebrow onBrand>Your Fresh Start</Eyebrow>
        <h2 className="cta-h2" style={{ color:'#F7F5EE', fontSize:'34px', margin:'0 auto 16px', maxWidth:'22ch' }}>Let's talk through your options, free, and with no obligation.</h2>
        <p style={{ color:'#C5D4E4', fontSize:'17px', lineHeight:1.6, margin:'0 auto 30px', maxWidth:'52ch' }}>
          Schedule a call to discuss your financial situation with an experienced bankruptcy attorney in Eastern Kentucky. Honest answers, clear next steps.
        </p>
        <div style={{ display:'flex', gap:'14px', justifyContent:'center', flexWrap:'wrap' }}>
          <HButton variant="accent" size="lg" onClick={()=>navigate('contact')} iconLeft={<Icon name="calendar-check" size={18} />}>Begin your fresh start</HButton>
          <HButton variant="ghost" size="lg" onClick={()=>navigate('faq')} style={{ color:'#F4F2EA' }} iconRight={<Icon name="arrow-right" size={17} />}>Read the FAQ</HButton>
        </div>
      </div>
    </div>
  );
}

function StarRating({ count = 5 }) {
  return (
    <div style={{ display:'flex', gap:'3px', alignItems:'center' }}>
      {Array.from({ length: count }).map((_, i) => (
        <svg key={i} width="18" height="18" viewBox="0 0 24 24" fill="var(--gold-500,#C8972F)" stroke="none">
          <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
        </svg>
      ))}
    </div>
  );
}

function ReviewsSection() {
  const { Card } = window.StanleyBankruptcyLawDesignSystem_1e6713;
  const reviews = [
    {
      name: 'Tammy Stanley',
      date: 'June 2026',
      text: 'Dalton had helped me with many things, and he\'s always a pleasure to work with. The city tried to charge me thousands for a trash collection bill I didn\'t owe. He got it thrown out after they initially refused. I also had a plumber try to put a lien on my property for a bill owed by someone else. He was able to call and keep them from placing a lien on the house. I\'m very thankful for his knowledge, professionalism, and his ability to get things accomplished.',
      reply: 'No one wants to pay debt they don\'t owe, so I was more than happy to take care of that for you. If you ever need anything again, please reach out.',
    },
    {
      name: 'Cody Estep',
      date: 'June 2026',
      text: 'Working with Dalton was a fantastic experience. When our HOA tried to tell us we couldn\'t rent our home, Dalton stepped in and took care of everything. He was highly professional, persistent, and firm with the other lawyer, never backing down from what we were legally entitled to do. We are so thankful for his help and highly recommend him with any type of law!',
      reply: 'Thank you for the kind words. I enjoyed working with you.',
    },
    {
      name: 'Misti Smith',
      date: 'June 2026',
      text: 'I had a very positive experience working with Dalton. He was there for me every step of the way and made sure I was fairly compensated for the injustice I experienced. What stood out most was the personalized attention he provided throughout the process. He was always friendly, professional, and easy to work with, which made a difficult situation much less stressful. I truly felt like he cared about my case and my well-being. I highly recommend Stanley Bankruptcy Law to anyone looking for knowledgeable representation and someone that genuinely puts their clients first.',
      reply: 'As an attorney in Eastern Kentucky, being able to help people through a stressful situation is what I enjoy most. I\'m so glad I was able to help!',
    },
  ];
  return (
    <Section bg="surface">
      <div style={{ textAlign:'center', maxWidth:'56ch', margin:'0 auto 40px' }}>
        <Eyebrow>Client reviews</Eyebrow>
        <h2 style={{ fontSize:'34px', margin:'0 0 12px' }}>What clients say</h2>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:'10px' }}>
          <StarRating />
          <span style={{ fontFamily:'var(--font-display)', fontSize:'22px', fontWeight:600, color:'var(--text-strong)' }}>5.0</span>
          <span style={{ fontFamily:'var(--font-sans)', fontSize:'15px', color:'var(--text-muted)' }}>· 3 Google reviews</span>
        </div>
      </div>
      <div className="resp-grid-3col">
        {reviews.map((r) => (
          <Card key={r.name} padding="lg" accentTop style={{ display:'flex', flexDirection:'column', gap:'14px' }}>
            <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:'12px' }}>
              <div>
                <div style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:'17px', color:'var(--text-strong)', marginBottom:'3px' }}>{r.name}</div>
                <div style={{ fontFamily:'var(--font-sans)', fontSize:'12.5px', color:'var(--text-muted)' }}>{r.date}</div>
              </div>
              <div style={{ display:'flex', alignItems:'center', gap:'5px', flexShrink:0 }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                  <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                  <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/>
                  <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
                </svg>
                <span style={{ fontFamily:'var(--font-sans)', fontSize:'12px', fontWeight:600, color:'var(--text-muted)' }}>Google</span>
              </div>
            </div>
            <StarRating />
            <p style={{ fontFamily:'var(--font-sans)', fontSize:'15px', lineHeight:1.62, color:'var(--ink-700)', margin:0, flex:1 }}>{r.text}</p>
            <div style={{ background:'var(--green-50)', border:'1px solid var(--green-200)', borderRadius:'var(--radius-md)', padding:'12px 14px', marginTop:'4px' }}>
              <div style={{ display:'flex', alignItems:'center', gap:'7px', marginBottom:'6px' }}>
                <img src={'/logo.png'} alt="Stanley Bankruptcy Law" style={{ height:'18px' }} />
                <span style={{ fontFamily:'var(--font-sans)', fontWeight:600, fontSize:'12.5px', color:'var(--brand)' }}>Response from Dalton Stanley</span>
              </div>
              <p style={{ fontFamily:'var(--font-sans)', fontSize:'13.5px', lineHeight:1.55, color:'var(--ink-700)', margin:0, fontStyle:'italic' }}>{r.reply}</p>
            </div>
          </Card>
        ))}
      </div>
      <div style={{ textAlign:'center', marginTop:'26px' }}>
        <a href="https://share.google/lSvp9VDf78uAuCcjy" target="_blank" rel="noopener noreferrer"
          style={{ display:'inline-flex', alignItems:'center', gap:'7px', fontFamily:'var(--font-sans)', fontSize:'14px', fontWeight:600, color:'var(--brand)', textDecoration:'none', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'999px', padding:'10px 20px', boxShadow:'var(--shadow-sm)' }}>
          <Icon name="external-link" size={15} />View all reviews on Google
        </a>
      </div>
    </Section>
  );
}

Object.assign(window, { HomePage, CtaBand, ReviewsSection, StarRating });