/* global React */

function FAQ() {
  const t = window.useT();
  const [openIndex, setOpenIndex] = React.useState(null);

  const toggle = (i) => {
    setOpenIndex(prev => (prev === i ? null : i));
  };

  const faqItemKeys = [0, 2, 3, 4, 5, 6, 7, 8, 9, 11];

  const items = faqItemKeys.map((key) => ({
    question: t(`faq.items.${key}.question`),
    answer: t(`faq.items.${key}.answer`),
  }));

  const ChevronIcon = () => (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M5 7.5L10 12.5L15 7.5"/>
    </svg>
  );

  return (
    <section id="preguntas" data-screen-label="06 Preguntas" className="faq-section" style={{
      background: 'var(--eidora-lino)',
      color: 'var(--lr-tierra-profunda)',
      padding: 'clamp(80px, 8vw, 140px) clamp(24px, 4vw, 56px)',
      borderTop: '1px solid var(--border-subtle)',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>

        {/* Header */}
        <div className="faq-header" style={{
          display: 'grid',
          gridTemplateColumns: '280px 1fr',
          gap: 64,
          alignItems: 'start',
          marginBottom: 'clamp(48px, 6vw, 88px)',
        }}>
          <div style={{
            fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 11,
            letterSpacing: '0.32em', textTransform: 'uppercase',
            color: 'var(--lr-terracota)', paddingTop: 8,
          }}>
            {t('faq.header.label')}
          </div>
          <div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 400,
              fontSize: 'clamp(32px, 3.6vw, 52px)', lineHeight: 1.08,
              letterSpacing: '-0.022em',
              color: 'var(--lr-tierra-profunda)', margin: '0 0 20px',
              textWrap: 'balance',
            }}>
              {t('faq.header.title')}
            </h2>
            <p style={{
              fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.65,
              color: 'var(--lr-tierra-500)', maxWidth: 680, margin: 0,
            }}>
              {t('faq.header.description')}
            </p>
          </div>
        </div>

        {/* FAQ List */}
        <div role="list" style={{ borderTop: '1px solid var(--border-default)' }}>
          {items.map((item, i) => {
            const isOpen = openIndex === i;
            const panelId = `faq-panel-${i}`;
            const triggerId = `faq-trigger-${i}`;
            return (
              <div
                key={i}
                role="listitem"
                className={`faq-item${isOpen ? ' is-open' : ''}`}
                style={{
                  borderBottom: '1px solid var(--border-subtle)',
                  borderLeft: isOpen ? '2px solid var(--lr-terracota)' : '2px solid transparent',
                  paddingLeft: isOpen ? 'clamp(16px, 2vw, 24px)' : 'clamp(16px, 2vw, 24px)',
                  transition: 'border-color 280ms ease',
                }}
              >
                <button
                  id={triggerId}
                  type="button"
                  aria-expanded={isOpen}
                  aria-controls={panelId}
                  onClick={() => toggle(i)}
                  className="faq-trigger"
                  style={{
                    width: '100%',
                    display: 'grid',
                    gridTemplateColumns: '52px 1fr 32px',
                    gap: 24,
                    alignItems: 'center',
                    background: 'transparent',
                    border: 'none',
                    padding: '28px 0',
                    textAlign: 'left',
                    cursor: 'pointer',
                    color: 'var(--lr-tierra-profunda)',
                  }}
                >
                  <span className="faq-num" style={{
                    fontFamily: 'var(--font-ui)', fontWeight: 700,
                    fontSize: 11, letterSpacing: '0.2em',
                    color: isOpen ? 'var(--lr-terracota)' : 'var(--lr-arena-700)',
                    paddingTop: 2,
                    transition: 'color 280ms ease',
                  }}>
                    {String(i + 1).padStart(2, '0')}
                  </span>

                  <span className="faq-question" style={{
                    fontFamily: 'var(--font-body)',
                    fontSize: 'clamp(14px, 1.1vw, 17px)',
                    lineHeight: 1.3,
                    color: isOpen ? 'var(--lr-tierra-profunda)' : 'var(--lr-tierra-500)',
                    fontWeight: 400,
                    transition: 'color 280ms ease',
                  }}>
                    {item.question}
                  </span>

                  <span className="faq-chevron" aria-hidden="true" style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'flex-end',
                    color: 'var(--lr-terracota)',
                    transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
                    transition: 'transform 280ms cubic-bezier(0.4, 0, 0.2, 1)',
                    flexShrink: 0,
                  }}>
                    <ChevronIcon />
                  </span>
                </button>

                {/* Animated panel — grid-rows trick avoids janky height animation */}
                <div
                  id={panelId}
                  role="region"
                  aria-labelledby={triggerId}
                  className="faq-panel"
                  style={{
                    display: 'grid',
                    gridTemplateRows: isOpen ? '1fr' : '0fr',
                    transition: 'grid-template-rows 280ms cubic-bezier(0.4, 0, 0.2, 1)',
                    paddingLeft: 'calc(52px + 24px)',
                    paddingRight: 'calc(32px + 24px)',
                  }}
                >
                  <div style={{ overflow: 'hidden' }}>
                    <div style={{
                      borderTop: '1px solid var(--border-subtle)',
                      padding: 'clamp(20px, 2.5vw, 32px) 0 clamp(28px, 3.5vw, 44px) 0',
                    }}>
                      <p style={{
                        fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.85,
                        color: 'var(--lr-tierra-500)',
                        margin: 0,
                        maxWidth: 'none',
                      }}>
                        {item.answer}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

      </div>

      <style>{`
        .faq-trigger:hover .faq-question {
          color: var(--lr-tierra-profunda) !important;
        }
        .faq-trigger:focus-visible {
          outline: 2px solid var(--lr-terracota);
          outline-offset: 4px;
          border-radius: 2px;
        }
        @media (max-width: 767px) {
          .faq-section { padding: 88px 20px 80px !important; }
          .faq-header {
            grid-template-columns: 1fr !important;
            gap: 20px !important;
            margin-bottom: 40px !important;
          }
          .faq-trigger {
            grid-template-columns: 40px 1fr 28px !important;
            gap: 14px !important;
            padding: 22px 0 !important;
          }
          .faq-panel {
            padding-left: calc(40px + 14px) !important;
            padding-right: calc(28px + 14px) !important;
          }
        }
        @media (max-width: 479px) {
          .faq-section { padding: 72px 16px 64px !important; }
          .faq-trigger {
            grid-template-columns: 36px 1fr 24px !important;
            gap: 10px !important;
          }
          .faq-panel {
            padding-left: calc(36px + 10px) !important;
            padding-right: calc(24px + 10px) !important;
          }
        }
      `}</style>
    </section>
  );
}

window.FAQ = FAQ;