// Contact / CTA

function Contact(){
  const ref = React.useRef(null);
  const [copied, setCopied] = React.useState(false);
  const [hovered, setHovered] = React.useState(null);
  React.useEffect(()=>{ window.registerReveal && window.registerReveal(ref.current); },[]);

  const copyEmail = () => {
    navigator.clipboard.writeText("ahirayashkumar@gmail.com");
    setCopied(true);
    setTimeout(()=>setCopied(false), 2000);
  };

  const links = [
    { k: "email",    label: "ahirayashkumar@gmail.com", href: "mailto:ahirayashkumar@gmail.com", action: copyEmail },
    { k: "github",   label: "github.com/ahireee",        href: "https://github.com/ahireee" },
    { k: "linkedin", label: "linkedin.com/in/justznx",   href: "https://www.linkedin.com/in/justznx/" },
  ];

  return (
    <section id="contact" ref={ref} className="reveal" data-screen-label="08 Contact">
      <style>{`
        .ct-wrap{position:relative;border:1px solid var(--line);border-radius:14px;padding:clamp(40px,6vw,88px);overflow:hidden;background:linear-gradient(180deg,rgba(217,119,6,.04),transparent 50%)}
        .ct-wrap::before{content:"";position:absolute;top:0;right:0;width:60%;height:100%;pointer-events:none;opacity:.5;background:radial-gradient(circle at 80% 20%,var(--accent-glow),transparent 60%);filter:blur(40px)}
        .ct-eyebrow{position:relative}
        .ct-h{position:relative;font-size:clamp(48px,9vw,128px);font-weight:700;letter-spacing:-.045em;line-height:.92;margin:28px 0 24px;text-wrap:balance}
        .ct-h .em{color:var(--accent);font-weight:300;font-style:italic}
        .ct-sub{position:relative;color:var(--fg-dim);font-size:clamp(16px,2vw,20px);max-width:600px;line-height:1.55;margin-bottom:48px;text-wrap:pretty}
        .ct-sub .live{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid rgba(74,222,128,.3);border-radius:999px;color:var(--ok);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;margin-right:8px;vertical-align:1px}
        .ct-sub .live i{width:6px;height:6px;background:var(--ok);border-radius:50%;box-shadow:0 0 8px rgba(74,222,128,.7);animation:pulse 1.6s ease-in-out infinite}
        .ct-links{position:relative;display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
        .ct-row{display:grid;grid-template-columns:160px 1fr auto;align-items:center;gap:20px;padding:22px 4px;border-bottom:1px solid var(--line);transition:padding-left .25s}
        .ct-row:hover{padding-left:18px}
        .ct-row .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--fg-mute);text-transform:uppercase}
        .ct-row .v{font-size:clamp(18px,2.2vw,26px);font-weight:400;letter-spacing:-.01em;color:var(--fg);transition:color .2s}
        .ct-row:hover .v{color:var(--accent)}
        .ct-row .go{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--fg-mute);display:flex;align-items:center;gap:10px;transition:color .2s}
        .ct-row:hover .go{color:var(--accent)}
        .ct-row .go .arrow{display:inline-flex;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-2);align-items:center;justify-content:center;transition:all .2s}
        .ct-row:hover .go .arrow{border-color:var(--accent);transform:rotate(-45deg)}
        .ct-copied{display:inline-block;margin-left:10px;color:var(--ok);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;opacity:0;transition:opacity .2s}
        .ct-copied.on{opacity:1}
        @media (max-width:620px){.ct-row{grid-template-columns:100px 1fr;gap:10px}.ct-row .go{grid-column:2/-1;justify-content:flex-end}}
      `}</style>

      <div className="wrap">
        <div className="ct-wrap">
          <div className="ct-eyebrow eyebrow">/ 07 · Contact</div>
          <h2 className="ct-h">Let's build<br/>something <span className="em">that ships.</span></h2>
          <p className="ct-sub">
            <span className="live"><i/>OPEN TO OPPORTUNITIES</span>
            Currently open to roles in quantitative finance, software engineering, and iOS / macOS development. Reply within 24h.
          </p>

          <div className="ct-links">
            {links.map(l => (
              <a
                key={l.k}
                className="ct-row"
                href={l.href}
                target={l.href.startsWith("http")?"_blank":undefined}
                rel={l.href.startsWith("http")?"noopener":undefined}
                onClick={(e)=>{
                  if (l.action) { e.preventDefault(); l.action(); }
                }}
                onMouseEnter={()=>setHovered(l.k)}
                onMouseLeave={()=>setHovered(null)}
              >
                <span className="k">/ {l.k}</span>
                <span className="v">
                  {l.label}
                  {l.k === "email" && <span className={"ct-copied " + (copied?"on":"")}>↳ copied</span>}
                </span>
                <span className="go">
                  {l.k === "email" ? (copied ? "COPIED" : "COPY / SEND") : "OPEN"}
                  <span className="arrow">
                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 8L8 2M4 2h4v4" stroke="currentColor" strokeWidth="1.3"/></svg>
                  </span>
                </span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Contact });