/* global React, I */
// ===== FAQ accordion =====
function FAQ({ t }) {
  const s = t.faq;
  const [openSet, setOpenSet] = React.useState(new Set());
  const toggle = (i) => setOpenSet(prev => {
    const next = new Set(prev);
    next.has(i) ? next.delete(i) : next.add(i);
    return next;
  });
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow center">{s.eyebrow}</span>
          <h2 className="h2">{s.title}</h2>
          <p className="lead" style={{marginInline:"auto"}}>{s.lead}</p>
        </div>
        <div className="faq">
          {s.items.map((it,i)=>{
            const isOpen = openSet.has(i);
            return (
              <div className={"qa"+(isOpen?" open":"")} key={i}>
                <button className="qa-q" onClick={()=>toggle(i)} aria-expanded={isOpen}>
                  {it.q}
                  <span className="pm"><I.chev /></span>
                </button>
                <div className="qa-a" style={{maxHeight: isOpen ? "600px" : "0"}}>
                  <p>{it.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ===== Contacto =====
const W3F_KEY = "cc4eb867-6eb3-476a-a88e-26c5ca495356";
const PREFIXES = [
  {f:"🇪🇸",c:"+34",n:"España"},{f:"🇦🇹",c:"+43",n:"Austria"},{f:"🇧🇪",c:"+32",n:"Bélgica"},
  {f:"🇧🇬",c:"+359",n:"Bulgaria"},{f:"🇭🇷",c:"+385",n:"Croacia"},{f:"🇨🇾",c:"+357",n:"Chipre"},
  {f:"🇨🇿",c:"+420",n:"Rep. Checa"},{f:"🇩🇰",c:"+45",n:"Dinamarca"},{f:"🇪🇪",c:"+372",n:"Estonia"},
  {f:"🇫🇮",c:"+358",n:"Finlandia"},{f:"🇫🇷",c:"+33",n:"Francia"},{f:"🇩🇪",c:"+49",n:"Alemania"},
  {f:"🇬🇷",c:"+30",n:"Grecia"},{f:"🇭🇺",c:"+36",n:"Hungría"},{f:"🇮🇪",c:"+353",n:"Irlanda"},
  {f:"🇮🇹",c:"+39",n:"Italia"},{f:"🇱🇻",c:"+371",n:"Letonia"},{f:"🇱🇹",c:"+370",n:"Lituania"},
  {f:"🇱🇺",c:"+352",n:"Luxemburgo"},{f:"🇲🇹",c:"+356",n:"Malta"},{f:"🇳🇱",c:"+31",n:"Países Bajos"},
  {f:"🇳🇴",c:"+47",n:"Noruega"},{f:"🇵🇱",c:"+48",n:"Polonia"},{f:"🇵🇹",c:"+351",n:"Portugal"},
  {f:"🇷🇴",c:"+40",n:"Rumanía"},{f:"🇷🇸",c:"+381",n:"Serbia"},{f:"🇸🇰",c:"+421",n:"Eslovaquia"},
  {f:"🇸🇮",c:"+386",n:"Eslovenia"},{f:"🇸🇪",c:"+46",n:"Suecia"},{f:"🇨🇭",c:"+41",n:"Suiza"},
  {f:"🇬🇧",c:"+44",n:"Reino Unido"},{f:"🇺🇦",c:"+380",n:"Ucrania"},
];

function PhonePrefix({ value, onChange }) {
  const [query, setQuery] = React.useState("");
  const [open, setOpen] = React.useState(false);
  const wrapRef = React.useRef(null);
  const inputRef = React.useRef(null);
  const cur = PREFIXES.find(function(p){ return p.c === value; }) || PREFIXES[0];
  const q = query.trim().toLowerCase();
  const filtered = q
    ? PREFIXES.filter(function(p){ return p.n.toLowerCase().includes(q) || p.c.includes(q); })
    : PREFIXES;
  React.useEffect(function() {
    function handler(e) { if (wrapRef.current && !wrapRef.current.contains(e.target)) { setOpen(false); setQuery(""); } }
    document.addEventListener("mousedown", handler);
    return function(){ document.removeEventListener("mousedown", handler); };
  }, []);
  function openDrop() {
    setOpen(function(o){ return !o; });
    setTimeout(function(){ if (inputRef.current) inputRef.current.focus(); }, 30);
  }
  function pick(p) { onChange(p.c); setQuery(""); setOpen(false); }
  return (
    <div className="prefix-wrap" ref={wrapRef}>
      <button type="button" className="prefix-btn" onClick={openDrop}>
        <span className="pf">{cur.f}</span>
        <span className="pc">{cur.c}</span>
        <I.chev className={"pchev" + (open ? " up" : "")} />
      </button>
      {open && (
        <div className="prefix-drop">
          <input ref={inputRef} className="prefix-search" placeholder="Buscar país…"
            value={query} onChange={function(e){ setQuery(e.target.value); }} />
          <div className="prefix-list">
            {filtered.length === 0
              ? <div className="prefix-empty">Sin resultados</div>
              : filtered.map(function(p){
                  return (
                    <button type="button" key={p.c}
                      className={"prefix-item" + (p.c === value ? " sel" : "")}
                      onClick={function(){ pick(p); }}>
                      <span className="pf">{p.f}</span>
                      <span className="pn">{p.n}</span>
                      <span className="pp">{p.c}</span>
                    </button>
                  );
                })
            }
          </div>
        </div>
      )}
    </div>
  );
}

function ContactForm({ t, contact }) {
  const f = t.contact.form;
  const [v, setV] = React.useState({ name:"", company:"", email:"", phone:"", phonePrefix:"+34", type:"", message:"", consent:false });
  const [err, setErr] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [apiErr, setApiErr] = React.useState(false);
  const set = (k) => (e) => setV(s=>({ ...s, [k]: e.target.type==="checkbox" ? e.target.checked : e.target.value }));
  const [apiMsg, setApiMsg] = React.useState("");
  const submit = (e) => {
    e.preventDefault();
    const er = {};
    if (!v.name.trim()) er.name = f.err.req;
    if (!v.email.trim()) er.email = f.err.req;
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.email)) er.email = f.err.email;
    if (!v.message.trim()) er.message = f.err.req;
    if (!v.consent) er.consent = f.err.consent;
    setErr(er);
    if (Object.keys(er).length > 0) return;
    setSending(true);
    setApiErr(false);
    setApiMsg("");
    const fd = new FormData();
    fd.append("access_key", W3F_KEY);
    fd.append("subject", "Nueva consulta de " + v.name + " - Comprostock20");
    fd.append("from_name", v.name);
    fd.append("name", v.name);
    fd.append("email", v.email);
    fd.append("empresa", v.company || "-");
    fd.append("telefono", v.phone ? v.phonePrefix + " " + v.phone : "-");
    fd.append("tipo_stock", v.type || "-");
    fd.append("mensaje", v.message);
    fetch("https://api.web3forms.com/submit", { method: "POST", body: fd })
      .then(function(r) { return r.json(); })
      .then(function(d) {
        setSending(false);
        if (d.success) { setSent(true); } else { setApiErr(true); setApiMsg(d.message || ""); }
      })
      .catch(function(err) { setSending(false); setApiErr(true); setApiMsg(err.message || ""); });
  };
  return (
    <form className={"form"+(sent?" sent":"")} onSubmit={submit} noValidate>
      <div className="form-body">
        <div className="frow">
          <div className={"field"+(err.name?" bad":"")}>
            <label>{f.name}</label>
            <input value={v.name} onChange={set("name")} placeholder={f.ph.name} />
            <div className="err">{err.name}</div>
          </div>
          <div className="field">
            <label>{f.company}</label>
            <input value={v.company} onChange={set("company")} placeholder={f.ph.company} />
          </div>
        </div>
        <div className="frow">
          <div className={"field"+(err.email?" bad":"")}>
            <label>{f.email}</label>
            <input type="email" value={v.email} onChange={set("email")} placeholder={f.ph.email} />
            <div className="err">{err.email}</div>
          </div>
          <div className="field">
            <label>{f.phone}</label>
            <div className="phone-wrap">
              <PhonePrefix value={v.phonePrefix} onChange={function(c){ setV(function(s){ return Object.assign({},s,{phonePrefix:c}); }); }} />
              <input type="tel" className="phone-num" value={v.phone} onChange={set("phone")} placeholder={f.ph.phone} />
            </div>
          </div>
        </div>
        <div className="field">
          <label>{f.type}</label>
          <select value={v.type} onChange={set("type")}>
            {f.options.map((o,i)=>(<option key={i} value={i===0?"":o}>{o}</option>))}
          </select>
        </div>
        <div className={"field"+(err.message?" bad":"")}>
          <label>{f.message}</label>
          <textarea value={v.message} onChange={set("message")} placeholder={f.ph.message}></textarea>
          <div className="err">{err.message}</div>
        </div>
        <label className="consent" style={err.consent?{color:"#ff8a94"}:null}>
          <input type="checkbox" checked={v.consent} onChange={set("consent")} />
          <span>{f.consent}</span>
        </label>
        {apiErr && <p style={{color:"#ff8a94",fontSize:14,marginBottom:8}}>Error: {apiMsg || "Inténtalo de nuevo o contáctanos por WhatsApp."}</p>}
        <button type="submit" className="btn btn-primary btn-lg" disabled={sending}>
          {sending ? "Enviando…" : <>{f.submit} <I.arrow /></>}
        </button>
      </div>
      <div className="ok">
        <div className="ok-ic"><I.checkc /></div>
        <h3>{f.okT}</h3>
        <p>{f.okD}</p>
      </div>
    </form>
  );
}

function Contact({ t, contact }) {
  const s = t.contact;
  const cards = [
    { cls:"", ic:"phone", label:s.cards.phone, val:contact.tel, href:"tel:"+contact.telRaw },
    { cls:"wa", ic:"wa", label:s.cards.wa, val:contact.tel, href:contact.waLink },
    { cls:"", ic:"mail", label:s.cards.email, val:contact.email, href:"mailto:"+contact.email },
    { cls:"", ic:"clock", label:s.cards.hours, val:s.cards.hoursV, href:null },
  ];
  return (
    <section className="section" id="contacto" style={{background:"var(--bg-2)"}}>
      <div className="wrap">
        <div className="contact">
          <div className="contact-aside reveal">
            <span className="eyebrow">{s.eyebrow}</span>
            <h2 className="h2">{s.title}</h2>
            <p className="lead">{s.lead}</p>
            <div className="contact-cards">
              {cards.map((c,i)=>{ const Ic=I[c.ic]; const inner=(
                <>
                  <div className="cc-ic"><Ic /></div>
                  <div><small>{c.label}</small><b>{c.val}</b></div>
                </>
              );
                return c.href
                  ? <a className={"cc "+c.cls} key={i} href={c.href} target={c.ic==="wa"?"_blank":undefined} rel="noopener">{inner}</a>
                  : <div className={"cc "+c.cls} key={i}>{inner}</div>;
              })}
            </div>
          </div>
          <div className="reveal d2">
            <ContactForm t={t} contact={contact} />
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Footer =====
function Footer({ t, contact, go }) {
  const fo = t.footer;
  const serviceLinks = [
    { href:"#servicios", label:t.nav.servicios },
    { href:"#tipos", label:t.nav.tipos },
    { href:"#como", label:t.nav.como },
    { href:"#faq", label:t.nav.faq },
  ];
  const companyLinks = [
    { href:"#nosotros", label:t.nav.nosotros },
    { href:"#contacto", label:t.nav.contacto },
  ];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="foot-top">
          <div className="foot-brand">
            <img src="assets/logo.png" alt="Comprostock20" />
            <p>{fo.tagline}</p>
          </div>
          <div className="foot-col">
            <h5>{fo.colS}</h5>
            {serviceLinks.map((l,i)=>(<a key={i} href={l.href} onClick={(e)=>go(e,l.href)}>{l.label}</a>))}
          </div>
          <div className="foot-col">
            <h5>{fo.colC}</h5>
            {companyLinks.map((l,i)=>(<a key={i} href={l.href} onClick={(e)=>go(e,l.href)}>{l.label}</a>))}
          </div>
          <div className="foot-col">
            <h5>{fo.colX}</h5>
            <a href={"tel:"+contact.telRaw}>{contact.tel}</a>
            <a href={contact.waLink} target="_blank" rel="noopener">WhatsApp</a>
            <a href={"mailto:"+contact.email}>{contact.email}</a>
          </div>
        </div>
        <div className="foot-bot">
          <span>© {new Date().getFullYear()} Comprostock20. {fo.rights}</span>
          <span style={{display:"flex",gap:18,flexWrap:"wrap"}}>
            {fo.legal.map((l,i)=>(<a key={i} href="#" style={{color:"inherit"}}>{l}</a>))}
          </span>
        </div>
      </div>
    </footer>
  );
}

window.FAQ = FAQ;
window.Contact = Contact;
window.Footer = Footer;