/* global React, Arrow, WhatsAppIcon, Logo */

// Shared footer: Contact + Footer. Used on every page — edit here only.

// ============================================================
// Contact + Footer
// ============================================================

const Contact = () => {
  const [form, setForm] = React.useState({ name: "", email: "", company: "", phone: "", topic: "IT Consulting", message: "" });
  const [sent, setSent] = React.useState(false);
  return (
    <section id="contact">
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 44 }}>
        <div className="reveal" style={{ display: "flex", flexDirection: "column", gap: 28 }}>
          <span className="eyebrow">CONTACT — DIRECT LINES, NO GATEKEEPERS</span>
          <h2 className="h2" style={{ margin: 0 }}>
            Tell us what&apos;s on the agenda.
          </h2>
          <p className="lead" style={{ margin: 0 }}>
            One of three partners will reply personally. We&apos;ll either book a 30-minute scoping call, or tell you honestly if it&apos;s not our wheelhouse.
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 18, marginTop: 12 }}>
            <ContactRow label="Speak to an advisor" value="+91 99118 55111" href="tel:+919911855111" />
            <ContactRow label="WhatsApp" value="Get Expert Advice" href="https://wa.me/919911855111" icon={<WhatsAppIcon size={14} />} />
            <ContactRow label="Email" value="contact@bigexpertlab.com" href="mailto:contact@bigexpertlab.com" />
            <ContactRow label="Office" value="94/9 Kishangarh, Vasant Kunj, New Delhi — 110070" />
            <ContactRow label="Marketplace" value="bigservermart.com" href="https://bigservermart.com" />
          </div>

          <div style={{
            marginTop: 20, padding: 18,
            background: "var(--bel-orange-soft)",
            border: "1px solid color-mix(in oklab, var(--bel-orange) 25%, transparent)",
            borderRadius: 16,
            display: "flex", gap: 14, alignItems: "flex-start",
          }}>
            <span style={{
              width: 38, height: 38, borderRadius: 10, background: "var(--bel-orange)", color: "white",
              display: "grid", placeItems: "center", flexShrink: 0,
            }}>
              <WhatsAppIcon size={18} />
            </span>
            <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
              <span style={{ fontWeight: 600, fontSize: 15 }}>Need an answer this week?</span>
              <span style={{ fontSize: 13.5, color: "var(--ink-soft)" }}>WhatsApp us. A partner replies within 4 working hours.</span>
            </div>
          </div>
        </div>

        <form className="reveal" onSubmit={e => { e.preventDefault(); setSent(true); }}
          style={{
            background: "var(--paper)",
            border: "1px solid var(--line)",
            borderRadius: 24,
            padding: 32,
            display: "flex", flexDirection: "column", gap: 18,
            boxShadow: "0 24px 50px -28px rgba(120, 69, 233,0.18)",
          }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <Field label="Full name" placeholder="Anisha Mishra" value={form.name} onChange={v => setForm({ ...form, name: v })} required />
            <Field label="Work email" placeholder="anisha@yourco.com" value={form.email} onChange={v => setForm({ ...form, email: v })} required />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <Field label="Company" placeholder="Genes2Me Diagnostics" value={form.company} onChange={v => setForm({ ...form, company: v })} />
            <Field label="Phone" placeholder="+91 98XXX XXXXX" value={form.phone} onChange={v => setForm({ ...form, phone: v })} />
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <label style={{ fontSize: 13, color: "var(--ink-soft)", fontWeight: 500 }}>What's it about?</label>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {["IT Consulting", "Business Empowerment", "Corporate Legal", "Not sure yet"].map(t => (
                <button type="button" key={t} onClick={() => setForm({ ...form, topic: t })}
                  style={{
                    padding: "8px 14px",
                    borderRadius: 999,
                    fontSize: 13.5, fontWeight: 500,
                    border: form.topic === t ? "1px solid var(--ink)" : "1px solid var(--line)",
                    background: form.topic === t ? "var(--ink)" : "var(--paper)",
                    color: form.topic === t ? "var(--cream)" : "var(--ink-2)",
                  }}>{t}</button>
              ))}
            </div>
          </div>
          <Field label="What problem can we help with?" textarea placeholder="Quick context — we’ll come back with a 30-min agenda." value={form.message} onChange={v => setForm({ ...form, message: v })} required />
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, marginTop: 6 }}>
            <span style={{ fontSize: 12.5, color: "var(--ink-mute)" }}>We reply within 4 working hours. Not added to a drip list.</span>
            <button type="submit" className="btn btn--accent" style={{ height: 50 }}>
              {sent ? "Sent — we'll be in touch" : "Send brief"}
              <span className="arrow"><Arrow size={11} /></span>
            </button>
          </div>
        </form>
      </div>
    </section>
  );
};

const ContactRow = ({ label, value, href, icon }) => {
  const inner = (
    <div className="contact-row" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingBlock: 12, borderTop: "1px solid var(--line)" }}>
      <span className="contact-row__label" style={{ fontSize: 13, color: "var(--ink-soft)", fontFamily: "var(--font-mono)", letterSpacing: "0.05em", textTransform: "uppercase" }}>{label}</span>
      <span className="contact-row__value" style={{ fontWeight: 600, fontSize: 15, display: "inline-flex", alignItems: "center", gap: 8 }}>
        {icon} {value}
      </span>
      <style>{`
        @media (max-width: 640px) {
          .contact-row {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 4px;
            padding-block: 14px !important;
          }
          .contact-row__label { font-size: 11.5px !important; }
          .contact-row__value { font-size: 14px !important; line-height: 1.4; }
        }
      `}</style>
    </div>
  );
  return href ? <a href={href}>{inner}</a> : <div>{inner}</div>;
};

const Field = ({ label, placeholder, value, onChange, textarea, required }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
    <label style={{ fontSize: 13, color: "var(--ink-soft)", fontWeight: 500 }}>
      {label}{required && <span style={{ color: "var(--bel-orange)" }}>*</span>}
    </label>
    {textarea ? (
      <textarea required={required} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder}
        rows={4}
        style={{
          padding: "14px 16px", border: "1px solid var(--line)", borderRadius: 12,
          background: "var(--cream)", fontSize: 15, fontFamily: "inherit", color: "var(--ink)",
          resize: "vertical", outline: "none",
        }}
      />
    ) : (
      <input required={required} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder}
        style={{
          padding: "13px 16px", border: "1px solid var(--line)", borderRadius: 12,
          background: "var(--cream)", fontSize: 15, fontFamily: "inherit", color: "var(--ink)",
          outline: "none",
        }}
      />
    )}
  </div>
);

// ============================================================
// Footer
// ============================================================
const Footer = () => (
  <>
    <footer style={{ background: "var(--ink)", color: "var(--cream)", paddingTop: 64, paddingBottom: 32 }}>
    <div className="wrap" style={{ display: "flex", flexDirection: "column", gap: 48 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr 1.4fr", gap: 36 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <Logo height={26} inverse />
          <p style={{ margin: 0, color: "#A1A1A8", fontSize: 14.5, maxWidth: 320 }}>
            India's No-1 consulting company. IT advisory, business empowerment, and corporate legal — built by senior partners since 2012.
          </p>
          <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
            {["LI", "X", "YT", "IG"].map((s, i) => (
              <a key={i} href="#" style={{
                width: 36, height: 36, borderRadius: 10,
                border: "1px solid #2A2A2F", display: "grid", placeItems: "center",
                color: "#C7C7CE", fontSize: 12, fontWeight: 600,
              }}>{s}</a>
            ))}
          </div>
        </div>

        <FootCol title="Services" links={["IT Consulting", "Business Empowerment", "Corporate Legal", "AI Readiness", "Cloud Strategy"]} />
        <FootCol title="Company" links={["About", "Leadership", "Careers", "Insights", "Press"]} />
        <FootCol title="Resources" links={["Marketplace", "Blog", "Case studies", "FY25 Outcomes Report", "Privacy"]} />

        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: "0.12em", color: "#A1A1A8", textTransform: "uppercase" }}>Subscribe — monthly</div>
          <p style={{ margin: 0, color: "#C7C7CE", fontSize: 14 }}>
            One email a month. Three things worth your time, no padding.
          </p>
          <form onSubmit={e => e.preventDefault()} style={{ display: "flex", gap: 0, marginTop: 6, border: "1px solid #2A2A2F", borderRadius: 999, padding: 4, background: "#0F0F11" }}>
            <input placeholder="anisha@yourco.com" style={{
              flex: 1, padding: "12px 16px", background: "transparent", border: 0, color: "var(--cream)",
              fontSize: 14, fontFamily: "inherit", outline: "none",
            }} />
            <button type="submit" style={{
              padding: "0 20px", borderRadius: 999, background: "var(--bel-orange)", color: "white",
              fontWeight: 600, fontSize: 13.5,
            }}>Subscribe</button>
          </form>
          <span style={{ fontSize: 12, color: "#A1A1A8" }}>2,400 readers. Unsubscribe in one click.</span>
        </div>
      </div>

      <div style={{ height: 1, background: "#2A2A2F" }} />

      {/* Offices */}
      <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", flexWrap: "wrap", gap: 16 }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: "0.14em", color: "var(--bel-orange)", textTransform: "uppercase" }}>Offices</span>
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 22, letterSpacing: "-0.02em", color: "var(--cream)" }}>
              Three locations.{" "}
              <span style={{ color: "#A1A1A8", fontWeight: 400 }}>One team.</span>
            </span>
          </div>
          <a href="#contact" style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            fontSize: 13.5, color: "var(--cream)",
            borderBottom: "1px solid #3A3A40", paddingBottom: 2,
          }}>
            Visit us → schedule a meeting
          </a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
          {[
            {
              city: "Delhi",
              tag: "Headquarters",
              addr: "94/9 1st Floor, Kishangarh, Vasant Kunj, South Delhi — 110070",
              phone: "+91 99118 55111",
            },
            {
              city: "Gurugram",
              tag: "Enterprise Hub",
              addr: "IRIS Tech Park, 1st Floor, Tower-A, 808, Badshahpur Sohna Road, Sector 48, Gurugram, Haryana — 122018",
              phone: "+91 99118 55111",
            },
            {
              city: "Lucknow",
              tag: "Regional Office",
              addr: "1005, 10th Floor, Royal Plaza, Sushant Golf City, Lucknow — 226030",
              phone: "+91 99118 55111",
            },
          ].map((o, i) => (
            <div key={i} style={{
              position: "relative",
              padding: 20,
              border: "1px solid #2A2A2F",
              borderRadius: 16,
              background: "#0F0F11",
              display: "flex", flexDirection: "column", gap: 10,
              transition: "border-color .25s, background .25s",
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--bel-orange)"; e.currentTarget.style.background = "#16100C"; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = "#2A2A2F"; e.currentTarget.style.background = "#0F0F11"; }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{
                    width: 32, height: 32, borderRadius: 9,
                    background: "var(--bel-orange)",
                    color: "white",
                    display: "grid", placeItems: "center",
                  }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M12 22s8-7 8-13a8 8 0 1 0-16 0c0 6 8 13 8 13z"/>
                      <circle cx="12" cy="9" r="2.5"/>
                    </svg>
                  </span>
                  <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.15 }}>
                    <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, color: "var(--cream)", letterSpacing: "-0.015em" }}>{o.city}</span>
                    <span style={{ fontSize: 11.5, color: "var(--bel-orange)", fontFamily: "var(--font-mono)", letterSpacing: "0.08em", textTransform: "uppercase" }}>{o.tag}</span>
                  </div>
                </div>
                {i === 0 && (
                  <span style={{
                    padding: "3px 8px", borderRadius: 999,
                    background: "rgba(34,197,94,0.15)", color: "#4ADE80",
                    fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 700, letterSpacing: "0.08em",
                  }}>● HQ</span>
                )}
              </div>
              <p style={{ margin: 0, fontSize: 13.5, color: "#C7C7CE", lineHeight: 1.5 }}>{o.addr}</p>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 10, borderTop: "1px dashed #2A2A2F", marginTop: 4 }}>
                <a href={`tel:${o.phone.replace(/\s/g, "")}`} style={{ fontSize: 13, color: "#E5E5EA", display: "inline-flex", alignItems: "center", gap: 6 }}>
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                  </svg>
                  {o.phone}
                </a>
                <a href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(o.city + " " + o.addr)}`} target="_blank" rel="noreferrer"
                   style={{ fontSize: 12.5, color: "var(--bel-orange)", display: "inline-flex", alignItems: "center", gap: 6 }}>
                  Open in Maps
                  <svg width="11" height="11" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M3 11L11 3M11 3H5M11 3V9"/>
                  </svg>
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ height: 1, background: "#2A2A2F" }} />

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16, fontSize: 13, color: "#A1A1A8" }}>
        <span>© 2026 Big Expert Lab. All rights reserved.</span>
        <div style={{ display: "flex", gap: 22 }}>
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">DPDP statement</a>
          <a href="#">Sitemap</a>
        </div>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>Made in New Delhi · ISO 27001 in progress</span>
      </div>
    </div>
  </footer>

    {/* Mobile-only sticky CTA bar — Call + WhatsApp */}
    <MobileCTA />
  </>
);

const MobileCTA = () => (
  <div className="mobile-cta" aria-label="Quick contact">
    <a href="tel:+919911855111" className="mobile-cta__btn mobile-cta__btn--call">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M21 16.42v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.11 1.6h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.09 9.51a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 21 16.42z"/>
      </svg>
      <span>Call</span>
    </a>
    <a href="https://wa.me/919911855111" className="mobile-cta__btn mobile-cta__btn--wa" target="_blank" rel="noopener">
      <WhatsAppIcon size={20} />
      <span>WhatsApp</span>
    </a>

    <style>{`
      .mobile-cta { display: none; }

      @media (max-width: 720px) {
        .mobile-cta {
          display: grid;
          grid-template-columns: 1fr 1fr;
          position: fixed;
          left: 0; right: 0; bottom: 0;
          z-index: 70;
          background: var(--paper);
          border-top: 1px solid var(--line);
          box-shadow: 0 -8px 24px -8px rgba(24,24,27,0.12);
          padding: 6px;
          gap: 6px;
          padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
        }
        .mobile-cta__btn {
          display: flex; align-items: center; justify-content: center; gap: 8px;
          padding: 12px;
          border-radius: 12px;
          font-family: var(--font-display);
          font-weight: 700; font-size: 14.5px;
          letter-spacing: -0.005em;
        }
        .mobile-cta__btn--call {
          background: rgba(11,91,211,0.08);
          color: #0B5BD3;
        }
        .mobile-cta__btn--wa {
          background: rgba(34,197,94,0.10);
          color: #16A34A;
        }
        .mobile-cta__btn:active { transform: scale(0.97); }

        body { padding-bottom: 78px; }
      }
    `}</style>
  </div>
);

const FootCol = ({ title, links }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
    <div style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: "0.12em", color: "#A1A1A8", textTransform: "uppercase" }}>{title}</div>
    <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
      {links.map((l, i) => (
        <li key={i}><a href="#" style={{ fontSize: 14.5, color: "#E5E5EA" }}>{l}</a></li>
      ))}
    </ul>
  </div>
);

Object.assign(window, { Contact, Footer });