// =============================================================
// Design Brains — Contact Page
// =============================================================

function ContactPage() {
  const [data, setData] = useState({ name: "", email: "", subject: "", message: "" });
  const [sent, setSent] = useState(false);
  const [errors, setErrors] = useState({});

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!data.name) errs.name = "Required";
    if (!data.email || !/.+@.+\..+/.test(data.email)) errs.email = "Valid email required";
    if (!data.message) errs.message = "Required";
    setErrors(errs);
    if (Object.keys(errs).length === 0) setSent(true);
  };

  return (
    <div className="page-enter">
      <PageHero
        eyebrow="Contact · Say hello"
        title={<>Let's start with a <span style={{ color: "var(--brand)" }}>conversation</span>.</>}
        subtitle="Use the form, drop us an email, or hop on WhatsApp — whichever's easiest. We answer within one business day, usually much faster."
      />

      <section style={{ paddingTop: 40 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64 }} className="contact-layout">
            {/* Left — info */}
            <div>
              <ContactInfoBlock />
            </div>

            {/* Right — form */}
            <div className="card" style={{ padding: "clamp(28px, 4vw, 48px)" }}>
              {sent ? (
                <div style={{ textAlign: "center", padding: "40px 20px" }}>
                  <div style={{
                    width: 64, height: 64, borderRadius: "50%",
                    background: "var(--brand)", boxShadow: "0 0 40px var(--brand-glow)",
                    display: "grid", placeItems: "center", margin: "0 auto 24px",
                  }}>
                    <svg width="24" height="24" viewBox="0 0 24 24"><path d="M6 12L10 16L18 8" stroke="#0A0C09" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
                  </div>
                  <h3 className="font-display" style={{ fontSize: 28, marginBottom: 12 }}>Message sent.</h3>
                  <p style={{ color: "var(--fg-2)", marginBottom: 24 }}>We'll get back to you within one business day.</p>
                  <Button variant="ghost" onClick={() => { setSent(false); setData({ name: "", email: "", subject: "", message: "" }); }}>Send another</Button>
                </div>
              ) : (
                <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                  <h3 className="font-display" style={{ fontSize: 24, marginBottom: 4 }}>Drop us a line</h3>
                  <p style={{ color: "var(--muted)", fontSize: 14, marginTop: 0, marginBottom: 12 }}>For project inquiries, partnerships, press, or just hello.</p>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="form-grid">
                    <div className="field">
                      <label>Name *</label>
                      <input value={data.name} onChange={(e) => setData({...data, name: e.target.value})} placeholder="Your name" />
                      {errors.name && <div style={{ color: "var(--danger)", fontSize: 12 }}>{errors.name}</div>}
                    </div>
                    <div className="field">
                      <label>Email *</label>
                      <input type="email" value={data.email} onChange={(e) => setData({...data, email: e.target.value})} placeholder="you@company.com" />
                      {errors.email && <div style={{ color: "var(--danger)", fontSize: 12 }}>{errors.email}</div>}
                    </div>
                  </div>
                  <div className="field">
                    <label>Subject</label>
                    <input value={data.subject} onChange={(e) => setData({...data, subject: e.target.value})} placeholder="What's this about?" />
                  </div>
                  <div className="field">
                    <label>Message *</label>
                    <textarea value={data.message} onChange={(e) => setData({...data, message: e.target.value})} placeholder="Tell us what's on your mind..." style={{ minHeight: 140 }} />
                    {errors.message && <div style={{ color: "var(--danger)", fontSize: 12 }}>{errors.message}</div>}
                  </div>
                  <button type="submit" className="btn btn-primary" style={{ alignSelf: "flex-start", marginTop: 8 }}>
                    Send message <span className="arrow">→</span>
                  </button>
                </form>
              )}
              <style>{`@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr !important; } }`}</style>
            </div>
          </div>
          <style>{`@media (max-width: 880px) { .contact-layout { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
        </div>
      </section>

      <MapSection />
    </div>
  );
}

function ContactInfoBlock() {
  const items = [
    { label: "Email", value: "hello@designbrains.co", href: "mailto:hello@designbrains.co", icon: "@" },
    { label: "Phone", value: "+880 1704 649 409", href: "tel:+8801704649409", icon: "☏" },
    { label: "WhatsApp", value: "Chat with us", href: "#", icon: "✦" },
    { label: "Studio", value: "Bogra, Bangladesh", href: "#", icon: "◎" },
  ];
  return (
    <div>
      <h2 className="font-display" style={{ fontSize: 32, marginBottom: 12, letterSpacing: "-0.025em" }}>Find us<span style={{ color: "var(--brand)" }}>.</span></h2>
      <p style={{ color: "var(--fg-2)", marginBottom: 32 }}>Whichever channel suits you. We're awake (or close to it) most of the time.</p>
      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        {items.map((it) => (
          <a key={it.label} href={it.href} style={{
            display: "flex",
            alignItems: "center",
            gap: 16,
            padding: "20px 0",
            borderTop: "1px solid var(--border)",
            transition: "all 0.2s var(--ease)",
          }}
          onMouseEnter={(e) => e.currentTarget.style.paddingLeft = "8px"}
          onMouseLeave={(e) => e.currentTarget.style.paddingLeft = "0"}
          >
            <div style={{
              width: 44, height: 44, borderRadius: 12, flexShrink: 0,
              background: "var(--brand-faint)", border: "1px solid rgba(108,191,0,0.2)",
              display: "grid", placeItems: "center",
              color: "var(--brand)", fontSize: 18,
            }}>{it.icon}</div>
            <div style={{ flex: 1 }}>
              <div className="font-mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 2 }}>{it.label}</div>
              <div style={{ fontSize: 16, fontWeight: 500 }}>{it.value}</div>
            </div>
            <span style={{ color: "var(--brand)", fontSize: 18 }}>→</span>
          </a>
        ))}
        <div style={{ borderTop: "1px solid var(--border)" }}/>
      </div>

      <div style={{ marginTop: 32, padding: 24, borderRadius: 16, background: "var(--brand-faint)", border: "1px solid rgba(108,191,0,0.18)" }}>
        <div className="font-mono" style={{ fontSize: 11, color: "var(--brand)", letterSpacing: "0.16em", marginBottom: 8 }}>OFFICE HOURS</div>
        <div style={{ fontSize: 15, marginBottom: 4 }}><strong>Sun – Thu</strong> · 10:00 – 19:00</div>
        <div style={{ fontSize: 15, color: "var(--fg-2)" }}><strong>Fri – Sat</strong> · Async only</div>
      </div>

      <div style={{ marginTop: 24, display: "flex", gap: 8 }}>
        {[["IG", "Instagram"], ["X", "Twitter"], ["IN", "LinkedIn"], ["DR", "Dribbble"], ["GH", "GitHub"]].map(([s, label]) => (
          <a key={s} href="#" title={label} style={{
            width: 44, height: 44, borderRadius: 12,
            background: "var(--card)", border: "1px solid var(--border)",
            display: "grid", placeItems: "center",
            fontSize: 11, fontFamily: "JetBrains Mono, monospace", color: "var(--fg-2)",
          }}>{s}</a>
        ))}
      </div>
    </div>
  );
}

function MapSection() {
  return (
    <section style={{ paddingTop: 80 }}>
      <div className="container">
        <SectionHeader eyebrow="The studio" title="Bogra." subtitle="If you're in town, the kettle is on." />
        <div style={{
          aspectRatio: "16 / 8",
          borderRadius: "var(--radius-xl)",
          background: "var(--card)",
          border: "1px solid var(--border)",
          overflow: "hidden",
          position: "relative",
        }}>
          {/* Stylised map placeholder — abstract grid + pin */}
          <svg width="100%" height="100%" viewBox="0 0 800 400" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0 }}>
            <defs>
              <pattern id="map-grid" width="40" height="40" patternUnits="userSpaceOnUse">
                <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="1"/>
              </pattern>
              <radialGradient id="map-glow" cx="50%" cy="50%" r="40%">
                <stop offset="0" stopColor="rgba(108,191,0,0.18)"/>
                <stop offset="1" stopColor="rgba(108,191,0,0)"/>
              </radialGradient>
            </defs>
            <rect width="800" height="400" fill="url(#map-grid)"/>
            {/* Roads */}
            <path d="M0 200 Q 200 180 400 220 T 800 200" stroke="rgba(255,255,255,0.06)" strokeWidth="2" fill="none"/>
            <path d="M0 240 Q 200 280 400 240 T 800 260" stroke="rgba(255,255,255,0.05)" strokeWidth="2" fill="none"/>
            <path d="M380 0 L 420 400" stroke="rgba(255,255,255,0.06)" strokeWidth="2"/>
            <path d="M580 0 L 540 400" stroke="rgba(255,255,255,0.05)" strokeWidth="2"/>
            <path d="M180 0 L 220 400" stroke="rgba(255,255,255,0.04)" strokeWidth="2"/>
            <rect x="200" y="100" width="80" height="60" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.05)"/>
            <rect x="500" y="120" width="100" height="80" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.05)"/>
            <rect x="320" y="240" width="60" height="50" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.05)"/>
            <rect x="600" y="260" width="90" height="60" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.05)"/>
            {/* Pin glow */}
            <circle cx="400" cy="200" r="120" fill="url(#map-glow)"/>
            {/* Pin */}
            <circle cx="400" cy="200" r="12" fill="var(--brand)"/>
            <circle cx="400" cy="200" r="20" fill="none" stroke="var(--brand)" strokeWidth="2" opacity="0.5">
              <animate attributeName="r" from="12" to="40" dur="2s" repeatCount="indefinite"/>
              <animate attributeName="opacity" from="0.6" to="0" dur="2s" repeatCount="indefinite"/>
            </circle>
          </svg>
          <div style={{ position: "absolute", bottom: 24, left: 24, padding: "16px 20px", background: "rgba(10, 12, 9, 0.85)", backdropFilter: "blur(12px)", border: "1px solid var(--border)", borderRadius: 14 }}>
            <div className="font-mono" style={{ fontSize: 11, color: "var(--brand)", letterSpacing: "0.12em", marginBottom: 4 }}>DESIGN BRAINS HQ</div>
            <div style={{ fontSize: 15, fontWeight: 600 }}>Sherpur Road, Bogra Sadar</div>
            <div style={{ fontSize: 13, color: "var(--muted)" }}>Bogra 5800, Bangladesh</div>
          </div>
        </div>

        {/* WhatsApp CTA */}
        <a href="#" style={{
          position: "fixed",
          bottom: 24, right: 24,
          width: 56, height: 56, borderRadius: "50%",
          background: "var(--brand)",
          display: "grid", placeItems: "center",
          boxShadow: "0 0 40px var(--brand-glow), 0 12px 30px -8px rgba(0,0,0,0.4)",
          zIndex: 50,
          color: "#0A0C09",
          fontSize: 24,
          transition: "transform 0.2s var(--ease)",
        }} onMouseEnter={(e) => e.currentTarget.style.transform = "scale(1.08)"} onMouseLeave={(e) => e.currentTarget.style.transform = "scale(1)"} aria-label="WhatsApp">
          <svg width="26" height="26" viewBox="0 0 26 26" fill="none">
            <path d="M21 13C21 8.58172 17.4183 5 13 5C8.58172 5 5 8.58172 5 13C5 14.5 5.5 16 6.5 17L5 21L9 19.5C10 20.5 11.5 21 13 21C17.4183 21 21 17.4183 21 13Z" stroke="#0A0C09" strokeWidth="2" strokeLinejoin="round" fill="none"/>
            <path d="M10 11C10 11 10.5 14 13 15.5C13 15.5 14.5 16 15 14.5L13.5 13.5L12.5 14C11 13 11 11.5 11 11.5L11.5 10.5L10.5 9.5C9 10 10 11 10 11Z" fill="#0A0C09"/>
          </svg>
        </a>
      </div>
    </section>
  );
}

window.ContactPage = ContactPage;