/* ===== Reusable atoms shared across pages ===== */

/* Page-level hero (smaller than home hero). Used on subpages. */
function PageHero({ eyebrow, title, subtitle, accent }) {
  return (
    <section className="page-hero">
      <div className="aurora" aria-hidden="true">
        <div className="wave wave-1"></div>
        <div className="wave wave-2"></div>
        <div className="wave wave-3"></div>
        <div className="wave wave-4"></div>
      </div>
      <div className="container">
        <div className="reveal" data-delay="1">
          {eyebrow && <span className="eyebrow">{eyebrow}</span>}
        </div>
        <h1 className="page-hero-title reveal" data-delay="2">
          {title}
          {accent && <span className="accent">{accent}</span>}
        </h1>
        {subtitle && (
          <p className="page-hero-subtitle reveal" data-delay="3">{subtitle}</p>
        )}
      </div>
    </section>
  );
}

/* WhatsApp CTA — reusable */
function WACta({ label = "Solicitar cotización por WhatsApp", phone = "573106018633", message }) {
  const url = `https://wa.me/${phone}?text=${encodeURIComponent(message || 'Hola Polarizados Ya, quisiera más información.')}`;
  return (
    <a href={url} className="btn btn-whatsapp" target="_blank" rel="noopener">
      <Whatsapp /> {label}
    </a>
  );
}

/* FAQ accordion item */
function FAQItem({ q, a, open = false }) {
  const [isOpen, setIsOpen] = React.useState(open);
  return (
    <div className={`faq-item ${isOpen ? 'open' : ''}`}>
      <button className="faq-q" onClick={() => setIsOpen(!isOpen)}>
        <span>{q}</span>
        <span className="faq-icon">
          <svg viewBox="0 0 16 16" fill="none">
            <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </span>
      </button>
      <div className="faq-a"><p>{a}</p></div>
    </div>
  );
}

/* Service card */
function ServiceCard({ num, title, desc, href, tags }) {
  return (
    <a className="service-card reveal" data-delay={String(((parseInt(num) - 1) % 3) + 1)} href={href}>
      <div className="service-num">{num} / 06</div>
      <Arrow className="svc-arrow" />
      <h3>{title}</h3>
      <p>{desc}</p>
      {tags && tags.length > 0 && (
        <div className="service-tags">
          {tags.map((t) => <span key={t}>{t}</span>)}
        </div>
      )}
    </a>
  );
}

/* Section header */
function SectionHead({ eyebrow, title, accent, subtitle }) {
  return (
    <div className="section-head reveal">
      <div>
        {eyebrow && <span className="eyebrow" style={{ marginBottom: 16, display: 'inline-flex' }}>{eyebrow}</span>}
        <h2>
          {title}
          {accent && <> <span className="accent">{accent}</span></>}
        </h2>
      </div>
      {subtitle && <p>{subtitle}</p>}
    </div>
  );
}

/* Image / Video placeholder */
function MediaSlot({ label, ratio = '16/9', mode = 'image', size = 'sm' }) {
  return (
    <div className={`media-slot media-slot-${size}`} style={{ aspectRatio: ratio }}>
      <div className="media-slot-grid"></div>
      <div className="media-slot-meta">
        <span className="mono">{mode === 'video' ? 'VIDEO' : 'IMAGEN'}</span>
        <span className="mono">{ratio}</span>
      </div>
      <div className="media-slot-label">{label}</div>
      {mode === 'video' && (
        <div className="media-slot-play">
          <svg viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="11" stroke="currentColor" strokeWidth="1"/>
            <path d="M10 8.5L16 12L10 15.5V8.5Z" fill="currentColor"/>
          </svg>
        </div>
      )}
    </div>
  );
}

window.PageHero = PageHero;
window.WACta = WACta;
window.FAQItem = FAQItem;
window.ServiceCard = ServiceCard;
window.SectionHead = SectionHead;
window.MediaSlot = MediaSlot;