/* global React, useApp, useReveal */
const { useState, useEffect, useRef } = React;

/* SECTION: Waterproof — dry/wet toggle with underwater product shot */
function WaterproofSection() {
  const { t } = useApp();
  const copy = t.waterproof;
  const [wet, setWet] = useState(true);
  const ref = useReveal();

  return (
    <section className="lx-section-dark" ref={ref} data-screen-label="Waterproof">
      <div className="lx-container-wide lx-reveal">
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:64, alignItems:"center"}} className="wp-grid">
          <div>
            <div className="lx-eyebrow on-dark" style={{color:"#ff4a57"}}>{copy.eyebrow}</div>
            <h2 className="lx-section-title lx-mt-16" style={{whiteSpace:"pre-line"}}>{copy.title}</h2>
            <p className="lx-subtitle on-dark lx-mt-24" style={{maxWidth:480}}>{copy.subtitle}</p>
            <div style={{display:"inline-flex", background:"rgba(255,255,255,0.06)", padding:4, borderRadius:12, gap:4, marginTop:32}}>
              {[
                {v:false, t:copy.toggleDry},
                {v:true, t:copy.toggleWet},
              ].map(({v,t:lbl}) => (
                <button key={String(v)} onClick={() => setWet(v)} style={{
                  padding:"10px 22px", borderRadius:10, border:0,
                  background: wet === v ? "rgba(var(--lx-red-glow),0.2)" : "transparent",
                  color: wet === v ? "#fff" : "rgba(255,255,255,0.55)",
                  fontFamily:"inherit", fontSize:14, fontWeight:500, cursor:"pointer", transition:"all 200ms",
                }}>{lbl}</button>
              ))}
            </div>
            <div style={{marginTop:32, fontSize:12, color:"rgba(255,255,255,0.4)", letterSpacing:"0.04em"}}>{copy.spec}</div>
          </div>
          <div style={{position:"relative", aspectRatio:"1/1", borderRadius:18, overflow:"hidden", background:"#0a0a0c"}}>
            <img src={wet ? "images/lumaflex/body-pro-main.webp" : "images/lumaflex/essential-lifestyle.jpg"} alt=""
              style={{position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover", transition:"opacity 500ms"}}/>
            {wet && [...Array(14)].map((_, i) => (
              <div key={i} style={{
                position:"absolute", left:`${(i*29)%100}%`, bottom:-10,
                width:6+(i%3)*2, height:6+(i%3)*2, borderRadius:"50%",
                background:"rgba(255,255,255,0.35)", border:"1px solid rgba(255,255,255,0.5)",
                animation:`lxBubble ${5+(i%4)}s linear ${i*0.3}s infinite`,
              }}/>
            ))}
          </div>
        </div>
      </div>
      <style>{`@media (max-width:860px){.wp-grid{grid-template-columns:1fr!important}}`}</style>
    </section>
  );
}

/* SECTION: Certs / Science */
function CertsSection() {
  const { t } = useApp();
  const copy = t.certs;
  const ref = useReveal();
  return (
    <section className="lx-section-white" ref={ref} data-screen-label="Certs">
      <div className="lx-container lx-reveal" style={{textAlign:"center"}}>
        <div className="lx-eyebrow">{copy.eyebrow}</div>
        <h2 className="lx-section-title lx-mt-16">{copy.title}</h2>
        <p className="lx-subtitle lx-mt-24" style={{maxWidth:720, margin:"24px auto 0"}}>{copy.subtitle}</p>

        <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:12, marginTop:64}} className="cert-grid">
          {copy.items.map((c, i) => (
            <div key={i} style={{
              background:"#f5f5f7", borderRadius:14, padding:"28px 20px",
              textAlign:"center",
            }}>
              <div style={{fontSize:20, fontWeight:600, letterSpacing:"-0.02em"}}>{c.k}</div>
              <div style={{fontSize:12, color:"rgba(0,0,0,0.5)", marginTop:6}}>{c.v}</div>
            </div>
          ))}
        </div>

        <div style={{marginTop:48, fontSize:12, color:"rgba(0,0,0,0.4)", letterSpacing:"0.06em"}}>{copy.nasaNote}</div>
      </div>
      <style>{`@media (max-width:720px){.cert-grid{grid-template-columns:1fr 1fr!important}}`}</style>
    </section>
  );
}

/* SECTION: Compare table */
function CompareSection() {
  const { t } = useApp();
  const copy = t.compare;
  const ref = useReveal();
  const [highlight, setHighlight] = useState(2); // body-pro-kit default

  return (
    <section className="lx-section-light" id="compare" ref={ref} data-screen-label="Compare">
      <div className="lx-container lx-reveal">
        <div style={{textAlign:"center", marginBottom:48}}>
          <div className="lx-eyebrow">{copy.eyebrow}</div>
          <h2 className="lx-section-title lx-mt-16">{copy.title}</h2>
          <p className="lx-subtitle lx-mt-24" style={{maxWidth:600, margin:"24px auto 0"}}>{copy.subtitle}</p>
        </div>

        <div style={{background:"#fff", borderRadius:18, overflow:"hidden"}}>
          <div style={{display:"grid", gridTemplateColumns:"1.2fr 1fr 1fr 1fr", borderBottom:"1px solid rgba(0,0,0,0.06)"}}>
            {copy.headers.map((h, i) => (
              <button key={i} onClick={() => i>0 && setHighlight(i-1)}
                style={{
                  padding:"20px 16px", textAlign: i===0 ? "left" : "center",
                  fontSize: i===0 ? 13 : 15, fontWeight:600, letterSpacing:"-0.01em",
                  background: i>0 && highlight === i-1 ? "rgba(var(--lx-red-glow),0.06)" : "transparent",
                  color: i>0 && highlight === i-1 ? "#e50914" : "inherit",
                  border:0, cursor: i>0 ? "pointer" : "default",
                  transition:"all 200ms",
                }}>{h}</button>
            ))}
          </div>
          {copy.rows.map((r, ri) => (
            <div key={ri} style={{
              display:"grid", gridTemplateColumns:"1.2fr 1fr 1fr 1fr",
              borderBottom: ri < copy.rows.length-1 ? "1px solid rgba(0,0,0,0.04)" : "none",
            }}>
              <div style={{padding:"16px", fontSize:14, color:"rgba(0,0,0,0.55)"}}>{r.l}</div>
              {r.v.map((v, vi) => (
                <div key={vi} style={{
                  padding:"16px", textAlign:"center", fontSize:14,
                  background: highlight === vi ? "rgba(var(--lx-red-glow),0.04)" : "transparent",
                  color: highlight === vi ? "#1d1d1f" : "rgba(0,0,0,0.65)",
                  fontWeight: highlight === vi ? 500 : 400,
                  transition:"all 200ms",
                }}>{v}</div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* SECTION: FAQ accordion */
function FaqSection() {
  const { t } = useApp();
  const copy = t.faq;
  const ref = useReveal();
  const [open, setOpen] = useState(0);
  return (
    <section className="lx-section-white" id="faq" ref={ref} data-screen-label="FAQ">
      <div className="lx-container lx-reveal" style={{maxWidth:800}}>
        <div style={{textAlign:"center", marginBottom:56}}>
          <div className="lx-eyebrow">{copy.eyebrow}</div>
          <h2 className="lx-section-title lx-mt-16">{copy.title}</h2>
        </div>
        <div>
          {copy.items.map((it, i) => (
            <div key={i} style={{borderTop:"1px solid rgba(0,0,0,0.08)"}}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width:"100%", padding:"24px 0", background:"transparent", border:0, cursor:"pointer",
                display:"flex", justifyContent:"space-between", alignItems:"center", gap:20, textAlign:"left",
                fontFamily:"inherit", fontSize:18, fontWeight:500, letterSpacing:"-0.015em", color:"inherit",
              }}>
                <span>{it.q}</span>
                <span style={{fontSize:24, color:"#e50914", transform: open === i ? "rotate(45deg)" : "rotate(0)", transition:"transform 300ms", fontWeight:200}}>+</span>
              </button>
              <div style={{
                maxHeight: open === i ? 400 : 0, overflow:"hidden",
                transition:"max-height 400ms cubic-bezier(0.28,0,0.22,1)",
              }}>
                <p className="lx-body" style={{margin:0, padding:"0 0 24px", maxWidth:640}}>{it.a}</p>
              </div>
            </div>
          ))}
          <div style={{borderTop:"1px solid rgba(0,0,0,0.08)"}}/>
        </div>
      </div>
    </section>
  );
}

/* Footer */
function Footer() {
  const { t, locale } = useApp();
  const c = t.footer;
  const privacyHref = locale === "de" ? "datenschutz.html" : "datenschutz.html";
  const impressumHref = "impressum.html";
  return (
    <footer className="lx-footer" data-screen-label="Footer">
      <div className="lx-container-wide">
        <div className="lx-footer-grid">
          <div>
            <div style={{display:"flex", alignItems:"center", gap:10, color:"#fff", fontSize:22, fontWeight:600, letterSpacing:"-0.02em", marginBottom:16}}>
              <span style={{width:10, height:10, borderRadius:"50%", background:"#e50914", boxShadow:"0 0 14px 2px rgba(229,9,20,0.8)"}}/>
              LUMAFLEX
            </div>
            <div style={{maxWidth:300, color:"rgba(255,255,255,0.5)"}}>{c.tag}</div>
            <div style={{marginTop:20, fontSize:11, letterSpacing:"0.06em", color:"rgba(255,255,255,0.35)"}}>{c.certs}</div>
          </div>
          {[c.products, c.company, c.support].map((col, i) => (
            <div key={i}>
              <h5>{col.t}</h5>
              <ul>{col.i.map(x => <li key={x}><a href="#">{x}</a></li>)}</ul>
            </div>
          ))}
        </div>
        <div className="lx-footer-bottom">
          <span>{c.legal}</span>
          <span style={{display:"flex", gap:18, flexWrap:"wrap"}}>
            <a href={privacyHref}>{c.privacy}</a>
            <a href="#">{c.terms}</a>
            {c.impressum && <a href={impressumHref}>{c.impressum}</a>}
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { WaterproofSection, CertsSection, CompareSection, FaqSection, Footer });