import React from "react";
import Image from "next/image";

export default function OurTeam() {
  const teamMembers = [
    {
      name: "Ratan Kumar",
      position: "COO & Operational Specialist",
      image: "/images/Investor.webp",
    },
   
    // {
    //   name: "Parthiban",
    //   position: "CGO & Growth Specialist",
    //   image: "/images/Parthi.webp",
    // },
    {
      name: "Aravinth",
      position: "CFO & Finance Specialist",
      image: "/images/Aravinth.webp",
    },
     {
      name: "Fazul Ilahi",
      position: "CTO & Technology Specialist",
      image: "/images/Fazul.webp",
    },
    {
      name: "Suriya Kumar",
      position: "Engineering Head & AI Specialist",
      image: "/images/Suriya.webp",
    },
  ];

  return (
    <>
    <style dangerouslySetInnerHTML={{ __html: `
      /* Box this section to the same inset width the sibling sections use.
         The container's "display: var(--display)" resolves to the invalid
         fallback (inline) here, so max-width was being ignored and the section
         spanned edge-to-edge (heading clipped at the viewport edge). Force the
         flex display back on and pin the inner to the shared 1480px inset. */
      .elementor-86 .elementor-element-c2c601a {
        display: flex;
      }
      .elementor-86 .elementor-element-c2c601a > .e-con-inner {
        display: flex;
        flex-direction: column;
        max-width: 1480px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: clamp(20px, 4vw, 50px) !important;
        padding-right: clamp(20px, 4vw, 50px) !important;
        box-sizing: border-box;
      }

      /* Breathing room above and below the "Meet our the best crew" heading. */
      .elementor-86 .elementor-element-c46350e > .elementor-widget-container {
        margin-top: 40px;
        margin-bottom: 56px;
      }

      /* Team photos: grayscale by default, full colour on hover (matches design) */
      .team-listing-wrapper.team-grid-listing .team-item .post-media img {
        filter: grayscale(100%);
        transition: filter 0.45s ease;
      }
      .team-listing-wrapper.team-grid-listing .team-item:hover .post-media img {
        filter: grayscale(0%);
      }

      /* Grid: four columns that wrap, with tightened row/column gaps. */
      .team-listing-wrapper.team-grid-listing {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -16px -40px;
      }
      .team-listing-wrapper.team-grid-listing .team-item-wrapper {
        width: 25%;
        padding: 0 16px;
        margin-bottom: 40px;
        box-sizing: border-box;
      }
      @media (max-width: 1024px) {
        .team-listing-wrapper.team-grid-listing .team-item-wrapper { width: 50%; }
      }
      @media (max-width: 767px) {
        .elementor-86 .elementor-element-c2c601a > .e-con-inner {
          padding-left: 0 !important;
          padding-right: 0 !important;
          padding-top: 32px !important;
          padding-bottom: 32px !important;
        }
        .elementor-86 .elementor-element-c46350e > .elementor-widget-container {
          margin-top: 24px !important;
          margin-bottom: 24px !important;
        }
        .team-listing-wrapper.team-grid-listing {
          margin: 0 0 -28px;
        }
        .team-listing-wrapper.team-grid-listing .team-item-wrapper {
          width: 100%;
          padding: 0;
          margin-bottom: 28px;
        }
      }
      @media (max-width: 480px) {
        .team-listing-wrapper.team-grid-listing {
          margin: 0 0 -28px;
        }
        .team-listing-wrapper.team-grid-listing .team-item-wrapper {
          width: 100%;
          padding: 0;
          margin-bottom: 28px;
        }
      }
 
      /* Card: photo on top, name/position at the bottom (down to image). */
      .team-listing-wrapper.team-grid-listing .team-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
      }
      /* Compact portrait photo. Extra .team-item in the selector raises the
         specificity so it beats the cached vendor rule (width: 45.65%). */
      .team-listing-wrapper.team-grid-listing .team-item .team-item-media {
        width: 100%;
        margin: 0;
      }
      .team-listing-wrapper.team-grid-listing .team-item .post-media {
        height: 0;
        padding-top: 120%;
        border-radius: 16px;
        overflow: hidden;
      }
      .team-listing-wrapper.team-grid-listing .team-item .post-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .team-listing-wrapper.team-grid-listing .team-item .team-item-content {
        width: 100%;
        margin: 0;
      }
      .team-listing-wrapper.team-grid-listing .team-item .post-title .team-member-name {
        color: inherit;
        text-decoration: none;
      }
    `}} />
    <div className="elementor-element elementor-element-c2c601a e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="c2c601a" data-element_type="container" data-e-type="container">
      <div className="e-con-inner">
        <div className="elementor-element elementor-element-3306a27 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="3306a27" data-element_type="container" data-e-type="container">
          <div className="elementor-element elementor-element-7afb238 elementor-widget elementor-widget-logico_heading" data-id="7afb238" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
            <div className="elementor-widget-container">
              <div className="logico-title">/Team /</div>
            </div>
          </div>
          
          <div style={{ alignSelf: "flex-start", width: "100%" }} className="elementor-element elementor-element-c46350e elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="c46350e" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
            <div className="elementor-widget-container">
              <h3 className="logico-title" style={{ textAlign: "left" }}>Meet  crew</h3>
            </div>
          </div>
          
          <div className="elementor-element elementor-element-ac909e5 elementor-widget elementor-widget-logico_team_listing" data-id="ac909e5" data-element_type="widget" data-e-type="widget" data-widget_type="logico_team_listing.default">
            <div className="elementor-widget-container">
              <div className="logico-team-listing-widget">
                <div className="archive-listing">
                  <div className="archive-listing-wrapper team-listing-wrapper team-grid-listing columns-4">
                    
                    {teamMembers.map((member, i) => (
                      <div key={i} className="team-item-wrapper post-2866 team type-team status-publish has-post-thumbnail hentry">
                        <div className="team-item">
                          <div className="team-item-media">
                            <div className="post-media">
                              <Image
                                src={member.image}
                                alt={member.name}
                                width={300}
                                height={360}
                                style={{ objectFit: "cover", width: "100%", height: "100%" }}
                              />
                            </div>
                          </div>
                          <div className="team-item-content">
                            <div className="post-title"><span className="team-member-name">{member.name}</span></div>
                            <div className="team-item-position" dangerouslySetInnerHTML={{ __html: member.position }}></div>
                            <div className="team-item-socials">
                              <ul className="team-socials wrapper-socials">
                                <li><a href="https://www.linkedin.com/" target="_blank" rel="noreferrer" className="fab fa-linkedin-in"></a></li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                    ))}

                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    </>
  );
}
