/* Homepage */
const { Button: HButton, PracticeCard, ProcessTimeline, TestimonialCard: HTestimonial, Accordion, Eyebrow: HEyebrow } = window.WarpDesignSystem_e8eaa1;

const HOME = {
  heroTitle1: { en: 'Fearless Representation.', es: 'Representación Sin Miedo.' },
  heroTitle2: { en: 'Relentless Results.', es: 'Resultados Implacables.' },
  heroSub: {
    en: 'Trusted legal representation for Personal Injury, Criminal Defense, Family Law, and Civil Litigation throughout Cameron County and the Rio Grande Valley.',
    es: 'Representación legal de confianza en Lesiones Personales, Defensa Criminal, Derecho Familiar y Litigio Civil en Brownsville y todo el Valle del Río Grande.',
  },
  heroCta2: { en: 'Practice Areas', es: 'Áreas de Práctica' },

  paEyebrow: { en: 'Practice Areas', es: 'Áreas de Práctica' },
  paTitle: { en: 'One firm for the moments that matter most.', es: 'Un despacho para los momentos más importantes.' },
  learnMore: { en: 'Learn more', es: 'Más información' },
  pa: {
    en: [
      { icon: 'Car', title: 'Personal Injury', href: 'personal-injury.html', blurb: 'Car wrecks, 18-wheeler crashes, and catastrophic injuries. We make the insurance company take you seriously — and we don\u2019t get paid unless you do.' },
      { icon: 'Shield', title: 'Criminal Defense', href: 'criminal-defense.html', blurb: 'One charge can change everything. From DWI to felonies, we protect your record, your license, and your future.' },
      { icon: 'Family', title: 'Family Law', href: 'family-law.html', blurb: 'Divorce, custody, and support. Steady guidance and firm protection for the people you love most.' },
      { icon: 'Scale', title: 'Civil Litigation', href: 'civil-litigation.html', blurb: 'Business disputes, broken contracts, property fights. When talking fails, we litigate — and we prepare every case for trial.' },
    ],
    es: [
      { icon: 'Car', title: 'Lesiones Personales', href: 'personal-injury.html', blurb: 'Choques de auto, accidentes de tráileres y lesiones catastróficas. Hacemos que la aseguradora lo tome en serio — y no cobramos a menos que usted cobre.' },
      { icon: 'Shield', title: 'Defensa Criminal', href: 'criminal-defense.html', blurb: 'Un cargo puede cambiarlo todo. Desde DWI hasta delitos graves, protegemos su récord, su licencia y su futuro.' },
      { icon: 'Family', title: 'Derecho Familiar', href: 'family-law.html', blurb: 'Divorcio, custodia y manutención. Guía firme y protección para las personas que más ama.' },
      { icon: 'Scale', title: 'Litigio Civil', href: 'civil-litigation.html', blurb: 'Disputas comerciales, contratos incumplidos, conflictos de propiedad. Cuando hablar no funciona, litigamos.' },
    ],
  },

  whyEyebrow: { en: 'Why Choose Us', es: 'Por Qué Elegirnos' },
  whyTitle: { en: 'Prepared like every case is going to trial.', es: 'Preparados como si cada caso fuera a juicio.' },
  why: {
    en: [
      { n: '01', t: 'Trial-ready from day one', b: 'Insurance companies and prosecutors know which lawyers settle and which ones fight. We build every case to stand up in a courtroom.' },
      { n: '02', t: 'You talk to your attorney', b: 'Not a call center. Not a case manager. Your case is handled personally, and your calls are returned.' },
      { n: '03', t: 'Se habla español', b: 'Every conversation, document, and court appearance explained clearly — in English or Spanish, whichever is home for you.' },
      { n: '04', t: 'Brownsville roots', b: 'We live here. We know the Valley\u2019s courts, its judges, and its people — because they are our people.' },
    ],
    es: [
      { n: '01', t: 'Listos para juicio desde el primer día', b: 'Las aseguradoras y los fiscales saben qué abogados se conforman y cuáles pelean. Construimos cada caso para sostenerse en la corte.' },
      { n: '02', t: 'Usted habla con su abogado', b: 'No un centro de llamadas. Su caso se maneja personalmente y sus llamadas se devuelven.' },
      { n: '03', t: 'Hablamos su idioma', b: 'Cada conversación, documento y audiencia explicados con claridad — en inglés o español, el que sea su hogar.' },
      { n: '04', t: 'Raíces en Brownsville', b: 'Vivimos aquí. Conocemos las cortes del Valle, sus jueces y su gente — porque son nuestra gente.' },
    ],
  },

  testiEyebrow: { en: 'Client Voices', es: 'Voces de Clientes' },
  testiTitle: { en: 'The Valley trusts us with what matters.', es: 'El Valle nos confía lo que importa.' },
  testi: {
    en: [
      { quote: 'After my accident I was drowning in bills and the insurance company wouldn\u2019t return my calls. Ernie took over and everything changed.', name: 'R. Trevino', detail: 'Personal injury client · Brownsville' },
      { quote: 'He explained every step in Spanish so my parents could follow along. That meant everything to our family.', name: 'M. Garza', detail: 'Criminal defense client · Harlingen' },
      { quote: 'Calm when I couldn\u2019t be, and a fighter when it counted. My kids are home because of him.', name: 'S. Delgado', detail: 'Family law client · San Benito' },
      { quote: 'Our contract dispute could have sunk the company. It settled in months, on our terms.', name: 'J. Cavazos', detail: 'Business client · McAllen' },
      { quote: 'He answered on a Sunday and was at the jail Monday morning. I will never forget that.', name: 'A. Salinas', detail: 'Criminal defense client · Los Fresnos' },
      { quote: 'Every call returned, every question answered. You are never left wondering what is happening with your case.', name: 'V. Peña', detail: 'Personal injury client · South Padre Island' },
    ],
    es: [
      { quote: 'Después de mi accidente estaba ahogado en cuentas y la aseguradora no me devolvía las llamadas. Ernie tomó el control y todo cambió.', name: 'R. Trevino', detail: 'Cliente de lesiones personales · Brownsville' },
      { quote: 'Explicó cada paso en español para que mis padres pudieran entender. Eso lo significó todo para nuestra familia.', name: 'M. Garza', detail: 'Cliente de defensa criminal · Harlingen' },
      { quote: 'Tranquilo cuando yo no podía estarlo, y un luchador cuando contó. Mis hijos están en casa gracias a él.', name: 'S. Delgado', detail: 'Cliente de derecho familiar · San Benito' },
      { quote: 'Nuestra disputa de contrato pudo haber hundido la empresa. Se resolvió en meses, en nuestros términos.', name: 'J. Cavazos', detail: 'Cliente comercial · McAllen' },
      { quote: 'Contestó un domingo y el lunes por la mañana estaba en la cárcel ayudándome. Nunca lo olvidaré.', name: 'A. Salinas', detail: 'Cliente de defensa criminal · Los Fresnos' },
      { quote: 'Cada llamada devuelta, cada pregunta respondida. Nunca se queda preguntándose qué pasa con su caso.', name: 'V. Peña', detail: 'Cliente de lesiones personales · South Padre Island' },
    ],
  },
  testiNote: {
    en: 'Client quotes are verified reviews.',
    es: 'Las citas de clientes son reseñas verificadas.',
  },

  attyEyebrow: { en: 'The Attorney', es: 'El Abogado' },
  attyTitle: { en: 'Ernie J. Hernandez', es: 'Ernie J. Hernandez' },
  attyBody: {
    en: 'Ernie J. Hernandez has spent 8 years standing between Valley families and the worst days of their lives. A graduate of Thurgood Marshall School of Law and licensed to practice in Texas since 2019, he built his firm on a simple promise: every client gets a lawyer who prepares, who communicates, and who is never afraid of a courtroom.',
    es: 'Ernie J. Hernandez ha pasado 8 años defendiendo a las familias del Valle en los peores días de sus vidas. Graduado de Thurgood Marshall School of Law y licenciado en Texas desde 2019, construyó su despacho sobre una promesa simple: cada cliente recibe un abogado que se prepara, que se comunica y que nunca le teme a la corte.',
  },
  attyFacts: {
    en: [
      { k: 'Education', v: 'Thurgood Marshall School of Law, J.D. 2019' },
      { k: 'Bar Admission', v: 'State Bar of Texas, 2019' },
      { k: 'Experience', v: '8 years of litigation practice' },
      { k: 'Languages', v: 'English · Español' },
    ],
    es: [
      { k: 'Educación', v: 'Thurgood Marshall School of Law, J.D. 2019' },
      { k: 'Admisión al Colegio', v: 'Colegio de Abogados de Texas, 2019' },
      { k: 'Experiencia', v: '8 años de práctica en litigio' },
      { k: 'Idiomas', v: 'English · Español' },
    ],
  },

  processEyebrow: { en: 'Our Process', es: 'Nuestro Proceso' },
  processTitle: { en: 'From first call to final resolution.', es: 'De la primera llamada a la resolución final.' },
  process: {
    en: [
      { title: 'Consultation', body: 'We listen. Free, confidential, and in your language. You leave knowing where you stand.' },
      { title: 'Investigation', body: 'Evidence disappears fast. We move immediately — records, witnesses, scene, experts.' },
      { title: 'Strategy', body: 'A plan built for your goals, not a template. You approve every major decision.' },
      { title: 'Negotiation', body: 'We negotiate from strength, because the other side knows we will try the case.' },
      { title: 'Trial', body: 'If they won\u2019t be fair, we pick a jury. Preparation is why we don\u2019t blink.' },
      { title: 'Resolution', body: 'Your recovery, your record, your family — resolved, and explained in plain language.' },
    ],
    es: [
      { title: 'Consulta', body: 'Escuchamos. Gratis, confidencial y en su idioma. Sale sabiendo dónde está parado.' },
      { title: 'Investigación', body: 'La evidencia desaparece rápido. Actuamos de inmediato — récords, testigos, escena, expertos.' },
      { title: 'Estrategia', body: 'Un plan hecho para sus metas, no una plantilla. Usted aprueba cada decisión importante.' },
      { title: 'Negociación', body: 'Negociamos desde la fuerza, porque la otra parte sabe que iremos a juicio.' },
      { title: 'Juicio', body: 'Si no son justos, escogemos un jurado. La preparación es la razón por la que no parpadeamos.' },
      { title: 'Resolución', body: 'Su recuperación, su récord, su familia — resuelto y explicado en lenguaje claro.' },
    ],
  },

  faqEyebrow: { en: 'FAQ', es: 'Preguntas Frecuentes' },
  faqTitle: { en: 'Answers before you even ask.', es: 'Respuestas antes de que pregunte.' },
  faq: {
    en: [
      { q: 'How much does a consultation cost?', a: 'Nothing. Your first consultation is always free and confidential. For personal injury cases, you pay no fee at all unless we recover money for you.' },
      { q: 'Do you speak Spanish?', a: 'Sí. Every conversation, document, and court proceeding can be handled fully in Spanish or English — whichever is more comfortable for you and your family.' },
      { q: 'What should I bring to my first meeting?', a: 'Whatever you have: police or accident reports, photos, medical records, court papers, tickets, or letters from insurance companies. Don\u2019t worry if you have nothing — we can get started with just your story.' },
      { q: 'How quickly should I contact a lawyer?', a: 'Immediately. Evidence disappears, deadlines run, and anything you say to insurers or investigators can be used later. Call before you give any statement.' },
      { q: 'Which areas do you serve?', a: 'Brownsville, Harlingen, McAllen, South Padre Island, San Benito, Los Fresnos, and the wider Rio Grande Valley, including Cameron and Hidalgo Counties.' },
    ],
    es: [
      { q: '¿Cuánto cuesta una consulta?', a: 'Nada. Su primera consulta siempre es gratuita y confidencial. En casos de lesiones personales, no paga honorarios a menos que recuperemos dinero para usted.' },
      { q: '¿Hablan español?', a: 'Sí. Cada conversación, documento y procedimiento judicial puede manejarse completamente en español o inglés — el que sea más cómodo para usted y su familia.' },
      { q: '¿Qué debo llevar a mi primera cita?', a: 'Lo que tenga: reportes de policía o de accidente, fotos, récords médicos, documentos de la corte, multas o cartas de aseguradoras. Si no tiene nada, no se preocupe — podemos empezar solo con su historia.' },
      { q: '¿Qué tan pronto debo contactar a un abogado?', a: 'De inmediato. La evidencia desaparece, los plazos corren, y todo lo que diga a aseguradoras o investigadores puede usarse después. Llame antes de dar cualquier declaración.' },
      { q: '¿Qué áreas atienden?', a: 'Brownsville, Harlingen, McAllen, South Padre Island, San Benito, Los Fresnos y todo el Valle del Río Grande, incluyendo los condados de Cameron e Hidalgo.' },
    ],
  },
};

function HomePage() {
  const [lang, setLang] = useLang();
  const t = (o) => o[lang];

  return (
    <div>
      <SiteNav lang={lang} setLang={setLang} activeHref="index.html" />

      {/* HERO */}
      <header className="hero-home" style={{ position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'center', overflow: 'hidden', background: 'radial-gradient(ellipse 80% 60% at 70% 20%, #171310 0%, var(--color-bg) 60%)' }}>
        <div className="container hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: '48px', alignItems: 'center', paddingTop: '120px', paddingBottom: '80px' }}>
          <div>
            <Reveal>
              <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '28px' }}>
                <span style={{ width: '56px', height: '1px', background: 'var(--color-accent)' }}></span>
                <span style={{ fontSize: '12px', fontWeight: 600, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'var(--color-accent)' }}>
                  Brownsville · Rio Grande Valley
                </span>
              </div>
              <h1 className="hero-title" style={{ margin: '0 0 28px', fontSize: 'clamp(44px, 6.2vw, 76px)', lineHeight: 1.05, letterSpacing: '-0.5px' }}>
                {t(HOME.heroTitle1)}<br />
                <span style={{ color: 'var(--color-accent)' }}>{t(HOME.heroTitle2)}</span>
              </h1>
              <p style={{ margin: '0 0 40px', maxWidth: '520px', color: 'var(--color-text)', fontSize: 'var(--text-body-lg-size)', lineHeight: 'var(--text-body-lg-lh)' }}>
                {t(HOME.heroSub)}
              </p>
              <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
                <HButton variant="gold" href="#contact">{t(SHARED.cta)}</HButton>
                <HButton variant="outline" href="#practice">{t(HOME.heroCta2)}</HButton>
              </div>
            </Reveal>
          </div>
          <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)' }}></div>
              <img
                className="feather-img"
                src="assets/attorney-portrait.jpg"
                fetchPriority="high"
                alt="Attorney Ernie J. Hernandez standing in his law office"
                style={{ width: '100%', display: 'block', filter: 'contrast(1.02)' }}
              />
              <div style={{ position: 'absolute', bottom: '-20px', right: '-20px', width: '80px', height: '80px', borderBottom: '1px solid var(--color-accent)', borderRight: '1px solid var(--color-accent)' }}></div>
            </div>
          </Reveal>
        </div>
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, borderBottom: '1px solid var(--color-hairline)' }}></div>
      </header>

      {/* SERVING STRIP */}
      <div style={{ borderBottom: '1px solid var(--color-hairline)', padding: '20px 0', background: 'var(--color-bg-soft)' }}>
        <div className="container serving-strip" style={{ textAlign: 'center', fontSize: '14px', letterSpacing: '0.12em', textTransform: 'uppercase', color: '#FAF6F6' }}>
          {t(SHARED.serving)}
        </div>
      </div>

      {/* PRACTICE AREAS */}
      <section className="section" id="practice">
        <div className="container">
          <SectionHeading eyebrow={t(HOME.paEyebrow)} title={t(HOME.paTitle)} />
          <div className="grid-4">
            {HOME.pa[lang].map((p, i) => (
              <Reveal key={p.href} delay={i * 90}>
                <PracticeCard icon={Icons[p.icon](34)} title={p.title} blurb={p.blurb} href={p.href} linkLabel={t(HOME.learnMore)} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* WHY CHOOSE US */}
      <section className="section section-soft" style={{ borderTop: '1px solid var(--color-hairline)', borderBottom: '1px solid var(--color-hairline)' }}>
        <div className="container">
          <SectionHeading eyebrow={t(HOME.whyEyebrow)} title={t(HOME.whyTitle)} />
          <div className="grid-2" style={{ gap: '0 64px' }}>
            {HOME.why[lang].map((w, i) => (
              <Reveal key={w.n} delay={i * 80}>
                <div style={{ display: 'flex', gap: '28px', padding: '32px 0', borderBottom: '1px solid var(--color-hairline)' }}>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: '40px', color: 'var(--color-accent)', lineHeight: 1, opacity: 0.85 }}>{w.n}</div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-serif)', fontSize: '24px', fontWeight: 500, color: 'var(--color-ink)', marginBottom: '8px' }}>{w.t}</div>
                    <p style={{ margin: 0, fontSize: 'var(--text-body-sm-size)', lineHeight: 'var(--text-body-sm-lh)', color: 'var(--color-text)' }}>{w.b}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="section">
        <div className="container">
          <SectionHeading eyebrow={t(HOME.testiEyebrow)} title={t(HOME.testiTitle)} />
        </div>
        <div className="testi-marquee">
          <div className="testi-track">
            {[...HOME.testi[lang], ...HOME.testi[lang]].map((q, i) => (
              <div key={i} aria-hidden={i >= HOME.testi[lang].length ? 'true' : undefined}>
                <HTestimonial quote={q.quote} name={q.name} detail={q.detail} />
              </div>
            ))}
          </div>
        </div>
        <div className="container">
          <p style={{ marginTop: '20px', fontSize: 'var(--text-caption-size)', color: 'var(--color-mute)' }}>{t(HOME.testiNote)}</p>
        </div>
      </section>

      {/* ATTORNEY */}
      <section className="section section-soft" id="attorney" style={{ borderTop: '1px solid var(--color-hairline)', borderBottom: '1px solid var(--color-hairline)' }}>
        <div className="container">
          <div className="grid-2" style={{ alignItems: 'center' }}>
            <Reveal>
              <div style={{ position: 'relative', maxWidth: '420px' }}>
                <img
                  className="feather-img-soft"
                  src="assets/attorney-sitting.jpg"
                  loading="lazy"
                  decoding="async"
                  alt="Portrait of attorney Ernie J. Hernandez at his desk"
                  style={{ width: '100%', display: 'block' }}
                />
              </div>
            </Reveal>
            <Reveal delay={120}>
              <HEyebrow>{t(HOME.attyEyebrow)}</HEyebrow>
              <h2 style={{ margin: '0 0 24px', fontSize: 'clamp(34px, 4.5vw, 52px)', lineHeight: 1.1 }}>{t(HOME.attyTitle)}</h2>
              <p style={{ margin: '0 0 36px', color: 'var(--color-text)', fontSize: 'var(--text-body-md-size)', lineHeight: 'var(--text-body-md-lh)', maxWidth: '520px' }}>
                {t(HOME.attyBody)}
              </p>
              <div>
                {HOME.attyFacts[lang].map((f) => (
                  <div key={f.k} style={{ display: 'flex', justifyContent: 'space-between', gap: '24px', padding: '14px 0', borderBottom: '1px solid var(--color-hairline)', fontSize: '14px' }}>
                    <span style={{ color: 'var(--color-mute)', textTransform: 'uppercase', letterSpacing: '0.1em', fontSize: '11px', fontWeight: 600, paddingTop: '3px' }}>{f.k}</span>
                    <span style={{ color: 'var(--color-ink)', textAlign: 'right' }}>{f.v}</span>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section className="section">
        <div className="container">
          <div className="grid-2" style={{ alignItems: 'start' }}>
            <div style={{ position: 'sticky', top: '120px' }}>
              <SectionHeading eyebrow={t(HOME.processEyebrow)} title={t(HOME.processTitle)} />
              <HButton variant="gold" href="#contact">{t(SHARED.cta)}</HButton>
            </div>
            <Reveal>
              <ProcessTimeline steps={HOME.process[lang]} />
            </Reveal>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section section-soft" id="faq" style={{ borderTop: '1px solid var(--color-hairline)', borderBottom: '1px solid var(--color-hairline)' }}>
        <div className="container" style={{ maxWidth: '880px' }}>
          <SectionHeading eyebrow={t(HOME.faqEyebrow)} title={t(HOME.faqTitle)} align="center" />
          <Accordion items={HOME.faq[lang]} />
        </div>
      </section>

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

window.HomePage = HomePage;
