/* Contact, FAQ, CTA banner, Footer */

const Contact = () => {
  const ref = useReveal();
  return (
    <section id="contact" ref={ref}>
      <div className="container">
        <div className="reveal" style={{
          borderRadius: 28,
          padding: "clamp(36px, 5vw, 72px)",
          background: `
            radial-gradient(60% 70% at 15% 10%, rgba(193, 92, 196, 0.3), transparent 60%),
            radial-gradient(50% 70% at 90% 20%, rgba(214, 169, 224, 0.55), transparent 65%),
            #f8ecf4
          `,
          border: "1px solid var(--line)",
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, alignItems: "center",
        }} id="contact-wrap">
          <div>
            <div style={{ marginBottom: 14 }}><span className="eyebrow">{t("contact.eyebrow")}</span></div>
            <h2 className="h2" style={{ maxWidth: 460, marginBottom: 14 }}>{t("contact.title")}</h2>
            <p className="body-lg" style={{ maxWidth: 460, color: "var(--ink-2)" }}>{t("contact.subtitle")}</p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start" }}>
            <div style={{ fontSize: 13, color: "var(--ink-3)" }}>Email</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(22px, 2.5vw, 32px)", fontWeight: 400, letterSpacing: "-0.01em" }}>
              {t("contact.email")}
            </div>
            <a href={`mailto:${t("contact.email")}`} className="btn btn-primary btn-lg">
              {t("contact.cta")} <ArrowRight />
            </a>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) { #contact-wrap { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

const FAQ = () => {
  const items = t("faq.items");
  const help = t("faq.help");
  const [open, setOpen] = React.useState(1);
  const ref = useReveal();
  return (
    <section id="faq" ref={ref}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 40 }} className="reveal">
          <div style={{ marginBottom: 14 }}><span className="eyebrow">{t("faq.eyebrow")}</span></div>
          <h2 className="h2" style={{ maxWidth: 620, margin: "0 auto" }}>{t("faq.title")}</h2>
        </div>

        <div className="reveal" style={{ maxWidth: 820, margin: "0 auto", display: "flex", flexDirection: "column", gap: 10 }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderRadius: 16,
                border: "1px solid var(--line)",
                background: isOpen ? "var(--bg-cream)" : "#fff",
                overflow: "hidden",
                transition: "background 200ms var(--ease)",
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen} style={{
                  width: "100%",
                  display: "flex", alignItems: "center", justifyContent: "space-between",
                  padding: "18px 22px",
                  textAlign: "left", gap: 16,
                }}>
                  <span style={{ fontSize: 16, fontWeight: 500, letterSpacing: "-0.005em" }}>{it.q}</span>
                  <span aria-hidden style={{
                    width: 28, height: 28, borderRadius: 999,
                    border: "1px solid var(--line)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    flex: "none", color: "var(--ink-2)",
                    transform: isOpen ? "rotate(45deg)" : "none",
                    transition: "transform 300ms var(--ease)",
                    background: "#fff",
                  }}>
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 2v8M2 6h8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
                  </span>
                </button>
                <div style={{
                  display: "grid",
                  gridTemplateRows: isOpen ? "1fr" : "0fr",
                  transition: "grid-template-rows 350ms var(--ease)",
                }}>
                  <div style={{ overflow: "hidden" }}>
                    <p className="body" style={{ padding: "0 22px 22px", color: "var(--ink-3)" }}>{it.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        <div className="reveal card" style={{
          maxWidth: 820, margin: "32px auto 0",
          padding: 28,
          display: "grid", gridTemplateColumns: "1fr auto", gap: 20, alignItems: "center",
          background: "var(--bg-pink)", border: "1px solid var(--line)",
        }} id="help-wrap">
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 400, letterSpacing: "-0.01em" }}>{help.title}</div>
            <p style={{ color: "var(--ink-3)", fontSize: 14, marginTop: 6 }}>{help.body}</p>
          </div>
          <a href="#contact" className="btn btn-primary">{help.cta} <ArrowRight /></a>
        </div>
      </div>
      <style>{`
        @media (max-width: 560px) { #help-wrap { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

const CTABanner = () => (
  <section style={{ padding: "72px 0" }}>
    <div className="container">
      <div style={{
        borderRadius: 28,
        padding: "clamp(48px, 7vw, 96px)",
        background: "#f8ecf4",
        color: "var(--ink)",
        textAlign: "center",
        border: "1px solid #e8d9e4",
        position: "relative",
        overflow: "hidden",
      }}>
        <div aria-hidden style={{
          position: "absolute", inset: 0,
          background: "radial-gradient(60% 60% at 50% 0%, rgba(193, 92, 196, 0.25), transparent 60%)",
        }} />
        <div style={{ position: "relative" }}>
          <h2 className="h2" style={{ color: "var(--ink)", maxWidth: 640, margin: "0 auto 14px" }}>{t("cta.title")}</h2>
          <p style={{ color: "var(--ink-3)", maxWidth: 520, margin: "0 auto 26px", fontSize: 16 }}>{t("cta.body")}</p>
          <a href={window.ctaUrl()} target="_blank" rel="noreferrer" className="btn btn-accent btn-lg">
            {t("cta.cta")} <ArrowRight />
          </a>
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => {
  const f = t("footer");
  return (
    <footer style={{
      background: "#f8ecf4", color: "var(--ink-2)",
      padding: "72px 0 32px",
    }}>
      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr 1fr",
          gap: 32,
          marginBottom: 48,
        }} className="foot-grid">
          <div>
            <Logo />
            <p style={{ fontSize: 14, color: "var(--ink-3)", marginTop: 14, maxWidth: 300 }}>
              <a href="mailto:hello@ai-intervue.com" style={{ color: "var(--ink-2)" }}>hello@ai-intervue.com</a>
            </p>
          </div>
          <div>
            <div style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 14 }}>{f.productTitle}</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {f.productLinks.map((l, i) => (
                <li key={i}><a href={l.href} style={{ fontSize: 14, color: "var(--ink-2)" }}>{l.label}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <div style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 14 }}>{f.socialTitle}</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {f.socialLinks.map((l, i) => (
                <li key={i}><a href={l.href} style={{ fontSize: 14, color: "var(--ink-2)" }}>{l.label}</a></li>
              ))}
            </ul>
          </div>
        </div>
        <div style={{
          borderTop: "1px solid #e8d9e4",
          paddingTop: 20,
          display: "flex", justifyContent: "space-between", gap: 16, flexWrap: "wrap",
          fontSize: 12, color: "var(--ink-3)",
        }}>
          <span>{f.copyright}</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#6ee7a5" }} />
            {f.status}
          </span>
          <span style={{ display: "inline-flex", gap: 16 }}>
            <a href="Terms and Conditions.html" style={{ color: "var(--ink-3)" }}>{f.terms}</a>
            <a href="Privacy Policy.html" style={{ color: "var(--ink-3)" }}>{f.privacy}</a>
          </span>
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </footer>
  );
};

window.Contact = Contact;
window.FAQ = FAQ;
window.CTABanner = CTABanner;
window.SiteFooter = Footer;