/* Generic practice-area page renderer. Set window.HDZ_PAGE before loading. */
const { Button: PButton, ProcessTimeline: PTimeline, TestimonialCard: PTestimonial, Accordion: PAccordion } = window.WarpDesignSystem_e8eaa1;

const PP_STR = {
  overview: { en: 'Overview', es: 'Resumen' },
  process: { en: 'How it works', es: 'Cómo funciona' },
  processTitle: { en: 'What to expect, step by step.', es: 'Qué esperar, paso a paso.' },
  faq: { en: 'FAQ', es: 'Preguntas Frecuentes' },
  faqTitle: { en: 'Common questions.', es: 'Preguntas comunes.' },
  clientVoice: { en: 'Client Voice', es: 'Voz del Cliente' },
  otherAreas: { en: 'Other practice areas', es: 'Otras áreas de práctica' },
  home: { en: 'Home', es: 'Inicio' },
};

function PracticePage() {
  const [lang, setLang] = useLang();
  const t = (o) => o[lang];
  const slug = window.HDZ_PAGE;
  const page = window.PRACTICE_PAGES[slug];
  const href = `${slug}.html`;
  const others = SHARED.nav[lang].slice(1).filter((l) => l.href !== href);

  return (
    <div>
      <SiteNav lang={lang} setLang={setLang} activeHref={href} />

      {/* HERO */}
      <header className="hero-pp" style={{ position: 'relative', padding: '200px 0 96px', background: 'radial-gradient(ellipse 70% 55% at 30% 0%, #171310 0%, var(--color-bg) 65%)', borderBottom: '1px solid var(--color-hairline)' }}>
        <div className="container">
          {/* breadcrumb */}
          <div style={{ display: 'flex', gap: '10px', alignItems: 'center', fontSize: '12px', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--color-mute)', marginBottom: '32px' }}>
            <a href="index.html" style={{ color: 'var(--color-mute)', textDecoration: 'none' }}>{t(PP_STR.home)}</a>
            <span style={{ color: 'var(--color-accent)' }}>/</span>
            <span style={{ color: 'var(--color-text)' }}>{t(page.title)}</span>
          </div>
          <div className={(page.imageSlot || page.heroImage) ? 'hero-grid' : undefined} style={(page.imageSlot || page.heroImage) ? { display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: '56px', alignItems: 'center' } : undefined}>
            <Reveal>
              {page.hideHeroIcon ? null : <div style={{ color: 'var(--color-accent)', marginBottom: '24px' }}>{Icons[page.icon](40)}</div>}
              <h1 style={{ margin: '0 0 24px', fontSize: 'clamp(42px, 5.5vw, 68px)', lineHeight: 1.05, letterSpacing: '-0.5px', maxWidth: '720px' }}>
                {t(page.title)}
              </h1>
              <p style={{ margin: '0 0 40px', maxWidth: '620px', color: 'var(--color-text)', fontSize: 'var(--text-body-lg-size)', lineHeight: 'var(--text-body-lg-lh)' }}>
                {t(page.heroSub)}
              </p>
              <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
                <PButton variant="gold" href="#contact">{t(SHARED.cta)}</PButton>
                <PButton variant="outline" href={`tel:${HDZ_CONTACT.phoneRaw}`}>{HDZ_CONTACT.phone}</PButton>
              </div>
            </Reveal>
            {(page.imageSlot || page.heroImage) && (
              <Reveal delay={200}>
                <div className="hero-portrait" style={{ position: 'relative' }}>
                  <div style={{ position: 'absolute', top: '-20px', left: '-20px', width: '80px', height: '80px', borderTop: '1px solid var(--color-accent)', borderLeft: '1px solid var(--color-accent)', pointerEvents: 'none' }}></div>
                  {page.heroImage ? (
                    <img className="feather-img-soft" fetchPriority="high" src={page.heroImage.src} alt={page.heroImage.alt[lang]} style={{ width: '100%', display: 'block', filter: 'brightness(0.88) saturate(0.92)' }} />
                  ) : (
                    <div style={{ width: '100%', aspectRatio: '4 / 3', border: '1px solid var(--color-hairline)', borderRadius: 'var(--radius-xs)', overflow: 'hidden', background: 'var(--color-card)' }}>
                      <image-slot id={page.imageSlot.id} shape="rect" placeholder={t(page.imageSlot.placeholder)} style={{ width: '100%', height: '100%' }}></image-slot>
                    </div>
                  )}
                  <div style={{ position: 'absolute', bottom: '-20px', right: '-20px', width: '80px', height: '80px', borderBottom: '1px solid var(--color-accent)', borderRight: '1px solid var(--color-accent)', pointerEvents: 'none' }}></div>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </header>

      {/* OVERVIEW + CASE TYPES */}
      <section className="section">
        <div className="container">
          <div className="grid-2" style={{ alignItems: 'start', gap: '64px' }}>
            <div style={{ position: 'sticky', top: '120px' }}>
              <SectionHeading eyebrow={t(PP_STR.overview)} title={t(page.caseTypesTitle)} />
              <p style={{ margin: 0, color: 'var(--color-text)', fontSize: 'var(--text-body-md-size)', lineHeight: 'var(--text-body-md-lh)' }}>
                {t(page.overview)}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '0' }}>
              {page.caseTypes[lang].map((c, i) => (
                <Reveal key={c.t} delay={i * 50}>
                  <div style={{ padding: '24px 0', borderBottom: '1px solid var(--color-hairline)' }}>
                    <div style={{ fontFamily: 'var(--font-serif)', fontSize: '22px', fontWeight: 500, color: 'var(--color-ink)', marginBottom: '6px' }}>{c.t}</div>
                    <p style={{ margin: 0, fontSize: 'var(--text-body-sm-size)', lineHeight: 'var(--text-body-sm-lh)', color: 'var(--color-text)' }}>{c.b}</p>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* PROCESS + TESTIMONIAL */}
      <section className="section section-soft" style={{ borderTop: '1px solid var(--color-hairline)', borderBottom: '1px solid var(--color-hairline)' }}>
        <div className="container">
          <div className="grid-2" style={{ alignItems: 'start', gap: '64px' }}>
            <div>
              <SectionHeading eyebrow={t(PP_STR.process)} title={t(PP_STR.processTitle)} />
              <PTimeline steps={page.process[lang]} />
            </div>
            <div style={{ position: 'sticky', top: '120px' }}>
              <SectionHeading eyebrow={t(PP_STR.clientVoice)} title="" />
              <PTestimonial {...page.testimonial[lang]} />
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section">
        <div className="container" style={{ maxWidth: '880px' }}>
          <SectionHeading eyebrow={t(PP_STR.faq)} title={t(PP_STR.faqTitle)} align="center" />
          <PAccordion items={page.faq[lang]} />
        </div>
      </section>

      <CTABand lang={lang} title={t(page.ctaTitle)} sub={t(page.ctaSub)} />

      {/* INTERNAL LINKS */}
      <section style={{ padding: '48px 0', borderBottom: '1px solid var(--color-hairline)' }}>
        <div className="container" style={{ display: 'flex', gap: '12px 32px', flexWrap: 'wrap', alignItems: 'center' }}>
          <span style={{ fontSize: '11px', fontWeight: 600, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--color-mute)' }}>
            {t(PP_STR.otherAreas)}
          </span>
          {others.map((o) => (
            <a key={o.href} href={o.href} style={{ color: 'var(--color-text)', textDecoration: 'none', fontSize: '14px', fontWeight: 500 }}
              onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--color-accent)')}
              onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--color-text)')}
            >
              {o.label} →
            </a>
          ))}
        </div>
      </section>

      <ContactSection lang={lang} />
      <SiteFooter lang={lang} />
      <FloatingCall />
    </div>
  );
}

window.PracticePage = PracticePage;