"use client";

import { useState } from "react";
import { useRecaptcha } from "@/components/Recaptcha";

export default function Page() {
  const { getToken } = useRecaptcha();
  const [open, setOpen] = useState(false);
  const [productId, setProductId] = useState("");
  const [msg, setMsg] = useState("");
  const [submitting, setSubmitting] = useState(false);

  const openFormtext = (id: number) => {
    setProductId(String(id));
    setMsg("");
    setOpen(true);
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setSubmitting(true);
    try {
      const token = await getToken();
      const form = e.currentTarget;
      const data = new FormData(form);
      data.set("productid", productId);
      if (token) data.set("token", token);
      const res = await fetch("/api/contact", { method: "POST", body: data });
      const text = await res.text();
      if (text === "1") {
        setMsg("PDF Download Successfully");
        const a = document.createElement("a");
        a.href = `/assets/images/services/${productId}.pdf`;
        a.download = `${productId}.pdf`;
        document.body.appendChild(a);
        a.click();
        a.remove();
        setOpen(false);
        form.reset();
      }
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div>
      {/* Start breadcrumb area*/}
      <section className="breadcrumb-area style2" style={{ backgroundImage: "url(https://www.paramvirpower.com/assets/images/resources/banner-cricuit-img.jpg)" }}>
        <div className="container">
          <div className="row">
            <div className="col-xl-12">
              <div className="inner-content-box clearfix">
                <div className="title-s2 text-center">
                </div>
                <div className="breadcrumb-menu float-left">
                  <ul className="clearfix">
                    <li><a href="https://www.paramvirpower.com/">Home</a></li>
                    <li className="active">IGBT Mosfet Driver Board</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="single-service-area-service">
        <div className="container">
          <div className="text-center" id="result">
            {msg && <div className="alert alert-success">{msg}</div>}
          </div>
          <div className="row pt-3">
            <div className="col-md-4 text-center">
              <div className="card">
                <div className="text-center pb-3">
                  <img src="/assets/images/services/220221001.JPG" alt="220221001" className="card-img-top" />
                </div>
                <div className="card-body text-center">
                  <h5 className="card-title">PPSL-MICRO-FRC (Electrical)</h5>
                  <div className="pt-md-4"></div>
                  <p className="card-text text-center">1W, 8A, 100 KHz <br /> (For 600/1200V Class IGBT/ SiC)</p>
                  <a href="#" className="btn-one btnOpenForm" style={{ lineHeight: "48px", padding: "0px 14px 0" }} onClick={(e) => { e.preventDefault(); openFormtext(220221001); }}>OC: 220221001 </a>
                </div>
              </div>
            </div>
            <div className="col-md-4">
              <div className="card ">
                <div className="text-center pb-4 mb-2">
                  <img src="/assets/images/services/220221002.jpg" alt="220221002" className="card-img-top" />
                </div>
                <div className="card-body text-center">
                  <h5 className="card-title">MICRO-NPC2 / TNPC (Electrical)</h5>
                  <p className="card-text text-center m-0"><small>Master & Slave Configuration</small></p>
                  <p className="card-text text-center">1W, 6A, 20 KHz <br /> (For 1200V Class 3-L IGBT)</p>
                  <a href="#" className="btn-one btnOpenForm" style={{ lineHeight: "48px", padding: "0px 14px 0" }} onClick={(e) => { e.preventDefault(); openFormtext(220221002); }}>OC: 220221002</a>
                </div>
              </div>
            </div>
            <div className="col-md-4">
              <div className="card ">
                <div className="text-center pb-3">
                  <img src="/assets/images/services/220221005.JPG" alt="220221005" className="card-img-top" />
                </div>
                <div className="card-body text-center">
                  <h5 className="card-title">MEGA PRIME PACK (Electrical)</h5>
                  <div className="pt-md-4"></div>
                  <p className="card-text text-center">Excellent Plug & Play solution!!  <br />Drive up to 1700V IGBT Module</p>
                  <a href="#" className="btn-one btnOpenForm" style={{ lineHeight: "48px", padding: "0px 14px 0" }} onClick={(e) => { e.preventDefault(); openFormtext(220221005); }}>OC: 220221005</a>
                </div>
              </div>
            </div>

          </div>
          <div className="row pt-3">
            <div className="col-md-4">
              <div className="card ">
                <div className="text-center pb-3">
                  <img src="/assets/images/services/220221006.jpg" alt="220221006" className="card-img-top" />
                </div>
                <div className="card-body text-center">
                  <h5 className="card-title">MICRO-FO (Fiber Optical)</h5>
                  <div className="pt-md-4"></div>
                  <p className="card-text text-center">1W, 6A, 50 KHz <br /> (For 600/1200V Class IGBT)</p>
                  <a href="#" className="btn-one btnOpenForm" style={{ lineHeight: "48px", padding: "0px 14px 0" }} onClick={(e) => { e.preventDefault(); openFormtext(220221006); }}>OC: 220221006</a>
                </div>
              </div>
            </div>

            <div className="col-md-4">
              <div className="card ">
                <div className="text-center pb-3">
                  <img src="/assets/images/services/220221007.JPG" alt="220221007" className="card-img-top" />
                </div>
                <div className="card-body text-center">
                  <h5 className="card-title">MICRO-FRC / MOLEX (Electrical)</h5>
                  <div className="pt-md-4"></div>
                  <p className="card-text text-center">Excellent Plug & Play solution!! <br />Drive up to 1700V IGBT Module</p>
                  <a href="#" className="btn-one btnOpenForm" style={{ lineHeight: "48px", padding: "0px 14px 0" }} onClick={(e) => { e.preventDefault(); openFormtext(220221007); }}>OC: 220221007</a>
                </div>
              </div>
            </div>

            <div className="col-md-4">
              <div className="card ">
                <div className="text-center pb-3">
                  <img src="/assets/images/services/220221008F.JPG" alt="220221008" className="card-img-top" />
                </div>
                <div className="card-body text-center">
                  <h5 className="card-title">MICRO MASTER (Electrical)</h5>
                  <div className="pt-md-4"></div>
                  <p className="card-text text-center">Excellent Plug & Play solution!! <br />Drive up to 1700V IGBT Module</p>
                  <a href="#" className="btn-one btnOpenForm" style={{ lineHeight: "48px", padding: "0px 14px 0" }} onClick={(e) => { e.preventDefault(); openFormtext(220221008); }}>OC: 220221008</a>
                </div>
              </div>
            </div>
          </div>

          <div className="row pt-3">
            <div className="col-md-4">
              <div className="card ">
                <div className="text-center pb-3">
                  <img src="/assets/images/services/220221009L.jpg" alt="220221009" className="card-img-top" />
                </div>
                <div className="card-body text-center">
                  <h5 className="card-title">MICRO-FRC (Electrical)</h5>
                  <div className="pt-md-4"></div>
                  <p className="card-text text-center">1W, 6A, 50 KHz <br /> (For 600/1200V Class IGBT)</p>
                  <a href="#" className="btn-one btnOpenForm" style={{ lineHeight: "48px", padding: "0px 14px 0" }} onClick={(e) => { e.preventDefault(); openFormtext(220221009); }}>OC: 220221009</a>
                </div>
              </div>
            </div>

            <div className="col-md-4">
              <div className="card ">
                <div className="text-center pb-3 p-2">
                  <img src="/assets/images/services/220221010.JPG" alt="220221009" className="card-img-top" />
                </div>
                <div className="card-body text-center">
                  <h5 className="card-title">MICRO-MSTB (Electrical)</h5>
                  <div className="pt-md-4"></div>
                  <p className="card-text text-center">1W, 6A, 50 KHz <br />
                    (For 600/1200V Class IGBT)</p>
                  <a href="#" className="btn-one btnOpenForm" style={{ lineHeight: "48px", padding: "0px 14px 0" }} onClick={(e) => { e.preventDefault(); openFormtext(220221010); }}>OC: 220221010</a>
                </div>
              </div>
            </div>

            <div className="col-md-4">
              <div className="card ">
                <div className="text-center pb-3 p-2">
                  <img style={{ width: "300px" }} src="/assets/images/services/220221013.JPG" alt="220221009" className="card-img-top" />
                </div>
                <div className="card-body text-center">
                  <h5 className="card-title">MEGA-PARALLEL (Electrical)</h5>
                  <div className="pt-md-4"></div>
                  <p className="card-text text-center">4W, 35A, 100 KHz <br />
                    (For 1200/1700V Class IGBT)</p>
                  <a href="#" className="btn-one btnOpenForm" style={{ lineHeight: "48px", padding: "0px 14px 0" }} onClick={(e) => { e.preventDefault(); openFormtext(220221013); }}>OC: 220221013</a>
                </div>
              </div>
            </div>
          </div>
          <div className="row pt-3">
            <div className="col-md-4">
              <div className="card ">
                <div className="text-center pb-3 p-2">
                  <img style={{ width: "350px" }} src="/assets/images/services/220221016T.JPG" alt="220221016" className="card-img-top" />
                </div>
                <div className="card-body text-center">
                  <h5 className="card-title">MEGA PRIME PACK (Fiber Optical)</h5>
                  <div className="pt-md-0"></div>
                  <p className="card-text text-center">4W, 35A, 20 KHz with Thermal FB <br />
                    (For 1200/1700V Class Primepack IGBT)</p>
                  <a href="#" className="btn-one btnOpenForm" style={{ lineHeight: "48px", padding: "0px 14px 0" }} onClick={(e) => { e.preventDefault(); openFormtext(220221016); }}>OC: 220221016</a>
                </div>
              </div>
            </div>

            <div className="col-md-4">
              <div className="card ">
                <div className="text-center p-1"> <br />
                  <img src="/assets/images/services/1702117487382.jpg" alt="220221020" className="card-img-top" />
                  <br />
                </div>
                <div className="card-body text-center">
                  <h5 className="card-title pt-2">MINI MASTER 115 (Electrical)</h5>
                  <div className="pt-md-4"></div>
                  <p className="card-text text-center">1.2W, 15A, 50 KHz FRC/MSTB <br />
                    (For 600/1200V Class IGBT)</p>
                  <a href="#" className="btn-one btnOpenForm" style={{ lineHeight: "48px", padding: "0px 14px 0" }} onClick={(e) => { e.preventDefault(); openFormtext(220221020); }}>OC: 220221020</a>
                </div>
              </div>
            </div>
          </div>

        </div>

        <div className="container">
          <div className={`form-popup-bg${open ? " is-visible" : ""}`} onClick={(e) => {
            if ((e.target as HTMLElement).className === "form-popup-bg is-visible" || (e.target as HTMLElement).id === "btnCloseForm") {
              setOpen(false);
            }
          }}>
            <div className="form-container">
              <button id="btnCloseForm" className="close-button" type="button">X</button>
              <h1 className="text-white">Contact Us</h1>
              <p>For more information. Please complete this form.</p>
              <form id="form-submit" method="post" onSubmit={handleSubmit}>
                <div className="form-group">
                  <label>Name</label>
                  <input type="text" name="name" className="form-control" required />
                </div>
                <div className="form-group">
                  <label>Phone Number</label>
                  <input className="form-control" name="phone_no" type="text" />
                </div>
                <div className="form-group">
                  <label>E-Mail Address</label>
                  <input className="form-control" name="email" type="text" required />
                </div>
                <input className="form-control" id="productid" name="productid" type="hidden" value={productId} readOnly />
                <div className="form-group">
                  <label>Designation</label>
                  <input className="form-control" name="comment" type="text" />
                </div>
                <button id="driver-mosfet" type="submit" className="btn btn-primary" disabled={submitting}>
                  {submitting ? "Submitting..." : "Submit"}
                </button>
              </form>
            </div>
          </div>
        </div>

      </section>
      <style>{`
            .form-popup-bg {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                display: flex;
                flex-direction: column;
                align-content: center;
                justify-content: center;
            }

            .form-popup-bg {
                position: fixed;
                left: 0;
                top: 0;
                height: 100%;
                width: 100%;
                background-color: rgba(94, 110, 141, 0.9);
                opacity: 0;
                visibility: hidden;
                -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
                -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
                transition: opacity 0.3s 0s, visibility 0s 0.3s;
                overflow-y: auto;
                z-index: 10000;
            }

            .form-popup-bg.is-visible {
                opacity: 1;
                visibility: visible;
                -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
                -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
                transition: opacity 0.3s 0s, visibility 0s 0s;
            }

            .form-container {
                background-color: #2d3638;
                border-radius: 10px;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
                display: flex;
                flex-direction: column;
                width: 100%;
                max-width: 700px;
                margin-left: auto;
                margin-right: auto;
                position: relative;
                padding: 40px;
                color: #fff;
            }

            .close-button {
                background: none;
                color: #fff;
                width: 40px;
                height: 40px;
                position: absolute;
                top: 0;
                right: 0;
                border: solid 1px #fff;
            }

            .form-popup-bg:before {
                content: '';
                background-color: #fff;
                opacity: .25;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
        `}</style>
    </div>
  );
}