/* global React */

const Directors = () => (
  <section id="leadership" className="section-pad" style={{
    background: "var(--parchment)",
    padding: "clamp(64px, 8vw, 112px) 32px",
    borderTop: "1px solid var(--hairline)"
  }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>

      {/* Header */}
      <div style={{
        display: "flex", alignItems: "center", gap: 24,
        paddingBottom: 18, marginBottom: 48,
        borderBottom: "2px solid var(--slate)"
      }}>
        <Eyebrow accent>Leadership</Eyebrow>
        <div style={{ flex: 1, height: 1, background: "var(--vellum)" }}/>
      </div>

      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: "clamp(32px, 5vw, 64px)",
        alignItems: "start"
      }} className="grid-story">

        {/* ── Left col: text cards ── */}
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>

          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 600,
            fontSize: "clamp(28px, 3vw, 42px)", lineHeight: 1.06,
            letterSpacing: "-0.03em", color: "var(--slate)",
            margin: "0 0 8px"
          }}>
            The people behind<br/>Pravah Solution.
          </h2>

          {/* Minister — featured card */}
          <div style={{
            background: "var(--ink)",
            borderLeft: "4px solid var(--gold)",
            padding: "28px 28px 24px"
          }}>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 9, fontWeight: 700,
              letterSpacing: "0.2em", textTransform: "uppercase",
              color: "var(--gold)", marginBottom: 14
            }}>Special Advisor</div>

            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 600,
              fontSize: "clamp(22px, 2.8vw, 32px)", lineHeight: 1.1,
              letterSpacing: "-0.025em", color: "var(--parchment)",
              marginBottom: 12
            }}>
              Shripad Yasso Naik
            </div>

            <div style={{
              width: 32, height: 2,
              background: "var(--gold)", marginBottom: 14
            }}/>

            <div style={{
              fontSize: 13, lineHeight: 1.65,
              color: "rgba(240,233,216,0.65)",
              fontFamily: "var(--font-body)"
            }}>
              Hon'ble Minister of State for New and Renewable Energy,<br/>
              Government of India
            </div>
          </div>

          {/* Founders row */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
            {[
              { name: "Arvind T. Sharma",  title: "Founder & Director", accent: "var(--peacock)" },
              { name: "Harsh S. Utekar",   title: "Co-founder",         accent: "var(--navy)" },
            ].map(p => (
              <div key={p.name} style={{
                background: "var(--parchment-deep)",
                borderLeft: `3px solid ${p.accent}`,
                border: `1px solid var(--vellum)`,
                borderLeft: `3px solid ${p.accent}`,
                padding: "18px 16px"
              }}>
                <div style={{
                  fontFamily: "var(--font-display)", fontWeight: 600,
                  fontSize: "clamp(15px, 1.5vw, 18px)", lineHeight: 1.2,
                  letterSpacing: "-0.01em", color: "var(--slate)",
                  marginBottom: 6
                }}>
                  {p.name}
                </div>
                <div style={{
                  fontFamily: "var(--font-condensed)", fontSize: 11,
                  fontWeight: 700, letterSpacing: "0.1em",
                  textTransform: "uppercase", color: p.accent
                }}>
                  {p.title}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* ── Right col: photo ── */}
        <div>
          <div style={{
            position: "relative",
            background: "var(--ink)",
            overflow: "hidden"
          }}>
            {/* Top accent strip */}
            <div style={{
              height: 3,
              background: "linear-gradient(90deg, var(--peacock) 0%, var(--gold) 100%)"
            }}/>

            <img
              src="./assets/Leadership.jpeg"
              alt="Pravah Solution leadership with Hon'ble Minister Shripad Yasso Naik"
              style={{
                width: "100%",
                display: "block",
                objectFit: "cover",
                objectPosition: "center top",
                maxHeight: 480
              }}
            />

            {/* Scrim at bottom for legibility */}
            <div style={{
              position: "absolute",
              bottom: 0, left: 0, right: 0,
              height: "45%",
              background: "linear-gradient(to top, rgba(8,15,24,0.82) 0%, transparent 100%)",
              pointerEvents: "none"
            }}/>

            {/* Name overlay strip */}
            <div style={{
              position: "absolute",
              bottom: 0, left: 0, right: 0,
              padding: "16px 20px",
              display: "grid",
              gridTemplateColumns: "1fr 1fr 1fr"
            }}>
              {[
                { name: "Arvind T. Sharma",  sub: "Founder & Director", align: "left"   },
                { name: "Shripad Yasso Naik", sub: "Minister of State",  align: "center" },
                { name: "Harsh S. Utekar",   sub: "Co-founder",         align: "right"  },
              ].map(p => (
                <div key={p.name} style={{ textAlign: p.align }}>
                  <div style={{
                    fontFamily: "var(--font-condensed)", fontWeight: 700,
                    fontSize: "clamp(11px, 1.1vw, 14px)", lineHeight: 1.2,
                    color: "var(--parchment)", letterSpacing: "0.02em"
                  }}>{p.name}</div>
                  <div style={{
                    fontFamily: "var(--font-mono)", fontSize: 9,
                    color: "var(--gold)", letterSpacing: "0.1em",
                    textTransform: "uppercase", marginTop: 2
                  }}>{p.sub}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Caption line below image */}
          <div style={{
            marginTop: 10,
            fontFamily: "var(--font-mono)", fontSize: 10,
            color: "var(--slate-soft)", letterSpacing: "0.1em",
            textTransform: "uppercase"
          }}>
            L – R · Arvind T. Sharma · Shripad Yasso Naik · Harsh S. Utekar
          </div>
        </div>

      </div>
    </div>
  </section>
);

window.Directors = Directors;