// Portfolio section + Contact form

const { useState: useStateC, useRef: useRefC, useEffect: useEffectC } = React;

function Portfolio({ t }) {
  const demos = [window.DemoRestaurant, window.DemoMining, window.DemoMarket];
  const links = [
    "demos/fuego-y-sal.html",
    "demos/cordillera-norte.html",
    "demos/mercado-andes.html",
  ];
  const domains = ["fuegoysal.cl", "cordilleranorte.cl", "mercadoandes.cl"];
  const [active, setActive] = useStateC(null);

  return (
    <section id="portfolio" className="section">
      <div className="container">
        <div style={{ marginBottom: 60, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "end" }} className="portfolio-head">
          <div>
            <span className="eyebrow"><span className="dot"></span>{t.portfolio.eyebrow}</span>
            <h2 className="h2" style={{ marginTop: 24, maxWidth: "16ch" }}>{t.portfolio.title}</h2>
          </div>
          <p className="lead" style={{ marginBottom: 6 }}>{t.portfolio.sub}</p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }} className="portfolio-grid">
          {t.portfolio.items.map((item, i) => {
            const Demo = demos[i];
            const isActive = active === i;
            return (
              <a
                key={i}
                href={links[i]}
                onMouseEnter={() => setActive(i)}
                onMouseLeave={() => setActive(null)}
                style={{
                  background: "var(--bg-1)",
                  border: "1px solid var(--line)",
                  borderRadius: "var(--r-lg)",
                  overflow: "hidden",
                  transition: "all 0.4s var(--ease)",
                  cursor: "pointer",
                  textDecoration: "none",
                  color: "inherit",
                  display: "block",
                  transform: isActive ? "translateY(-6px)" : "translateY(0)",
                  borderColor: isActive ? "var(--line-strong)" : "var(--line)",
                  boxShadow: isActive ? "0 30px 60px rgba(0,0,0,0.5)" : "none",
                }}
              >
                {/* browser chrome */}
                <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 14px", borderBottom: "1px solid var(--line)", background: "var(--bg-2)" }}>
                  <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#ff5f56" }} />
                  <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#ffbd2e" }} />
                  <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#27c93f" }} />
                  <div style={{ flex: 1, marginLeft: 8, padding: "4px 10px", background: "var(--bg-3)", borderRadius: 6, fontSize: 10, fontFamily: "var(--ff-mono)", color: "var(--fg-3)" }}>
                    {domains[i]}
                  </div>
                </div>
                {/* live demo viewport */}
                <div style={{ height: 320, position: "relative", overflow: "hidden", background: "var(--bg-0)" }}>
                  {Demo && <Demo active={isActive} />}
                </div>
                {/* meta */}
                <div style={{ padding: "20px 22px" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
                    <span className="mono mono--accent">{item.tag}</span>
                    <span className="mono" style={{ fontSize: 10 }}>{item.role}</span>
                  </div>
                  <h3 className="h3" style={{ fontSize: 22, marginBottom: 8 }}>{item.name}</h3>
                  <p style={{ color: "var(--fg-2)", fontSize: 13, lineHeight: 1.5, margin: "0 0 18px" }}>{item.desc}</p>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 14, borderTop: "1px solid var(--line)" }}>
                    <span style={{ fontSize: 13, color: "var(--accent)", display: "inline-flex", alignItems: "center", gap: 6 }}>
                      {t.portfolio.view}
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style={{ transform: isActive ? "translateX(3px)" : "none", transition: "transform 0.3s var(--ease)" }}>
                        <path d="M2 6h7M6 3l3 3-3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    </span>
                    <span className="mono" style={{ fontSize: 9, color: "var(--fg-3)" }}>DEMO EN VIVO ↗</span>
                  </div>
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Contact({ t }) {
  const [name, setName] = useStateC("");
  const [email, setEmail] = useStateC("");
  const [msg, setMsg] = useStateC("");
  const [state, setState] = useStateC("idle"); // idle | sending | success

  const submit = async (e) => {
    e.preventDefault();
    if (!name || !email || !msg) return;
    setState("sending");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name, email, message: msg }),
      });
      if (res.ok) {
        setState("success");
      } else {
        setState("idle");
        alert("Error al enviar. Intenta de nuevo.");
      }
    } catch {
      setState("idle");
      alert("Error de red. Intenta de nuevo.");
    }
  };

  return (
    <section id="contact" className="section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "start" }} className="contact-grid">
          <div>
            <span className="eyebrow"><span className="dot"></span>{t.contact.eyebrow}</span>
            <h2 className="h2" style={{ marginTop: 24, marginBottom: 20 }}>{t.contact.title}</h2>
            <p className="lead" style={{ marginBottom: 40 }}>{t.contact.sub}</p>

            <div className="mono" style={{ marginBottom: 16 }}>{t.contact.or}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <a href="mailto:jorge.norambuena2712@gmail.com" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "18px 22px", background: "var(--bg-1)", border: "1px solid var(--line)", borderRadius: "var(--r-md)", transition: "all 0.25s var(--ease)" }} className="contact-link">
                <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                  <span style={{ width: 36, height: 36, borderRadius: 10, background: "var(--accent-soft)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--accent)" }}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.6"/><path d="M3 7l9 6 9-6" stroke="currentColor" strokeWidth="1.6"/></svg>
                  </span>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{t.contact.mail}</div>
                    <div className="mono" style={{ fontSize: 10 }}>jorge.norambuena2712@gmail.com</div>
                  </div>
                </div>
                <span style={{ color: "var(--fg-3)" }}>↗</span>
              </a>
            </div>
          </div>

          <div className="card" style={{ padding: 36, position: "relative" }}>
            {state === "success" ? (
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", minHeight: 360, textAlign: "center" }}>
                <div style={{
                  width: 64, height: 64, borderRadius: "50%",
                  background: "var(--accent-soft)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  color: "var(--accent)",
                  marginBottom: 24,
                  animation: "pulse 1.5s var(--ease) infinite",
                }}>
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </div>
                <h3 className="h3" style={{ marginBottom: 8 }}>{t.contact.success}</h3>
                <div className="mono">via Resend → jorge.norambuena2712@gmail.com</div>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 4 }}>
                  <span className="mono">→ form.send</span>
                  <span className="mono" style={{ fontSize: 10, color: "var(--accent)" }}>● POWERED BY RESEND</span>
                </div>
                <div>
                  <label className="label">{t.contact.name}</label>
                  <input className="input" value={name} onChange={e => setName(e.target.value)} required />
                </div>
                <div>
                  <label className="label">{t.contact.email}</label>
                  <input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)} required />
                </div>
                <div>
                  <label className="label">{t.contact.message}</label>
                  <textarea className="textarea" value={msg} onChange={e => setMsg(e.target.value)} required />
                </div>
                <button type="submit" className="btn btn--primary btn--lg" style={{ justifyContent: "center", marginTop: 8 }} disabled={state === "sending"}>
                  {state === "sending" ? t.contact.sending : t.contact.send}
                  {state !== "sending" && (
                    <span className="arrow"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                  )}
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Portfolio = Portfolio;
window.Contact = Contact;