/* global React */

const PhoneIcon = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth={1.5} 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.07A19.5 19.5 0 0 1 4.15 11a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.06 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21 16.92z"/>
  </svg>
);

const ROW_STYLE = {
  display: "flex", alignItems: "center", gap: 12,
  fontSize: 14, color: "rgba(244,239,224,0.85)",
  textDecoration: "none", transition: "color 150ms"
};

const ContactRow = ({ icon, label, href }) => {
  const [hovered, setHovered] = React.useState(false);
  const content = (
    <>
      <span style={{ opacity: 0.6, display: "flex", flexShrink: 0 }}>{icon}</span>
      <span style={{ color: hovered && href ? "var(--gold)" : "rgba(244,239,224,0.85)", transition: "color 150ms" }}>
        {label}
      </span>
    </>
  );
  if (href) return (
    <a href={href} target={href.startsWith("http") ? "_blank" : undefined}
      rel="noopener noreferrer" style={ROW_STYLE}
      onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>
      {content}
    </a>
  );
  return <div style={ROW_STYLE}>{content}</div>;
};

const SOCIALS = [
  { name: "instagram", href: "https://www.instagram.com/pravah_solution" },
  { name: "linkedin",  href: "https://www.linkedin.com/in/pravah-solution-55209234a/" },
  { name: "mail",      href: "mailto:pravahsolution@gmail.com" },
];

const ContactCard = ({ open, onClose }) => {
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  if (!open) return null;

  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 100,
        background: "rgba(8,26,36,0.65)", backdropFilter: "blur(6px)",
        display: "flex", alignItems: "center", justifyContent: "center", padding: 24
      }}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{
          background: "var(--teal)", borderRadius: 8,
          width: "min(520px, 100%)",
          boxShadow: "0 24px 64px -12px rgba(8,26,36,0.55)",
          overflow: "hidden", position: "relative"
        }}
      >
        {/* Halftone texture */}
        <div aria-hidden style={{
          position: "absolute", inset: 0, opacity: 0.07, pointerEvents: "none",
          backgroundImage: "radial-gradient(circle, #F4EFE0 1px, transparent 1px)",
          backgroundSize: "10px 10px"
        }}/>

        {/* Gold accent bar */}
        <div style={{ height: 3, background: "var(--gold)" }}/>

        <div style={{ padding: "32px 36px 36px", position: "relative" }}>
          {/* Close */}
          <button
            onClick={onClose}
            aria-label="Close"
            style={{
              position: "absolute", top: 20, right: 20,
              border: "1px solid rgba(244,239,224,0.2)", background: "transparent",
              width: 32, height: 32, borderRadius: 2, cursor: "pointer",
              color: "rgba(244,239,224,0.6)", display: "flex",
              alignItems: "center", justifyContent: "center",
              transition: "border-color 150ms, color 150ms"
            }}
            onMouseEnter={e => {
              e.currentTarget.style.borderColor = "rgba(244,239,224,0.6)";
              e.currentTarget.style.color = "var(--cream)";
            }}
            onMouseLeave={e => {
              e.currentTarget.style.borderColor = "rgba(244,239,224,0.2)";
              e.currentTarget.style.color = "rgba(244,239,224,0.6)";
            }}
          >
            <Icon name="x" size={15}/>
          </button>

          {/* Brand */}
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 6 }}>
            <img
              src="./assets/logo-pravah-mark-transparent.png"
              alt="Pravah Solution"
              style={{ height: 44, width: "auto", display: "block" }}
            />
            <div>
              <div style={{
                fontFamily: "var(--font-display)", fontWeight: 600,
                fontSize: 26, letterSpacing: "-0.03em", color: "var(--cream)",
                lineHeight: 1.1
              }}>
                Pravah Solution
              </div>
              <div style={{
                fontSize: 11, fontWeight: 600, letterSpacing: "0.1em",
                textTransform: "uppercase", color: "var(--gold)", marginTop: 4
              }}>
                Political &amp; Election Consultancy · Digital Marketing
              </div>
            </div>
          </div>

          {/* Divider */}
          <div style={{ borderTop: "1px solid rgba(244,239,224,0.15)", margin: "24px 0" }}/>

          {/* Contact rows */}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <ContactRow
              icon={<Icon name="pin" size={16}/>}
              label="Pune, Maharashtra, India"
            />
            <ContactRow
              icon={<PhoneIcon size={16}/>}
              label="+91 92708 42423"
              href="tel:+919270842423"
            />
            <ContactRow
              icon={<PhoneIcon size={16}/>}
              label="+91 88889 99433"
              href="tel:+918888999433"
            />
            <ContactRow
              icon={<Icon name="mail" size={16}/>}
              label="pravahsolution@gmail.com"
              href="mailto:pravahsolution@gmail.com"
            />
          </div>

          {/* Divider */}
          <div style={{ borderTop: "1px solid rgba(244,239,224,0.15)", margin: "24px 0" }}/>

          {/* Bottom: social + CTA */}
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 16 }}>
            <div style={{ display: "flex", gap: 10 }}>
              {SOCIALS.map(s => (
                <a
                  key={s.name}
                  href={s.href}
                  target={s.href.startsWith("http") ? "_blank" : undefined}
                  rel="noopener noreferrer"
                  style={{
                    width: 34, height: 34, display: "inline-flex",
                    alignItems: "center", justifyContent: "center",
                    border: "1px solid rgba(244,239,224,0.2)", borderRadius: 2,
                    color: "rgba(244,239,224,0.75)", textDecoration: "none",
                    transition: "border-color 150ms, color 150ms"
                  }}
                  onMouseEnter={e => {
                    e.currentTarget.style.borderColor = "var(--gold)";
                    e.currentTarget.style.color = "var(--gold)";
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.borderColor = "rgba(244,239,224,0.2)";
                    e.currentTarget.style.color = "rgba(244,239,224,0.75)";
                  }}
                >
                  <Icon name={s.name} size={16}/>
                </a>
              ))}
            </div>

            <div style={{
              fontSize: 11, fontWeight: 600, letterSpacing: "0.08em",
              textTransform: "uppercase", color: "rgba(244,239,224,0.4)"
            }}>
              pravahsolution.com
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.ContactCard = ContactCard;