/* global React */

// ── Campaign-team card grid ───────────────────────────────────────────────────
const _ctCss = document.createElement('style');
_ctCss.textContent = `
  @keyframes ct-pulse {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1;   }
  }
  .ct-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  .ct-card {
    position: relative; text-align: left; cursor: pointer;
    padding: 20px 14px 14px; background: var(--paper);
    border: 1px solid var(--vellum);
    transition: transform 200ms ease, box-shadow 200ms ease,
                border-color 200ms ease, background 220ms ease;
    outline: none; width: 100%;
  }
  .ct-card:hover:not(.ct-active) {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(46,61,74,0.09);
    border-color: var(--khadi);
  }
  .ct-card:focus-visible { outline: 2px solid var(--peacock); outline-offset: 2px; }
  .ct-stripe {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    transition: opacity 200ms ease;
  }
  .ct-card.ct-active .ct-stripe { opacity: 0; }
  .ct-panel-body {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 400ms cubic-bezier(.4,0,.2,1);
  }
  .ct-panel-body.ct-open { grid-template-rows: 1fr; }
  .ct-panel-inner { overflow: hidden; min-height: 0; }
  @media (max-width: 900px) { .ct-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 600px) { .ct-grid { grid-template-columns: repeat(2, 1fr); } }
`;
document.head.appendChild(_ctCss);

// ── Team data ─────────────────────────────────────────────────────────────────
const CT_ROLES = [
  { no:"01", role:"Photographer",            accent:"#0B6E68", duties:["Coverage of daily activities, public meetings and events","Campaign visuals and on-ground photography","Building a strong visual record of the candidate's journey"] },
  { no:"02", role:"Videographer",            accent:"#C9A84C", duties:["Recording campaign events, speeches and public interactions","Producing reels and short-form video content","Full promotional video coverage across the campaign"] },
  { no:"03", role:"Graphic Designer",        accent:"#0B6E68", duties:["Creation of campaign graphics, banners and posters","Social media posts and all digital creatives","Consistent visual identity across all campaign materials"] },
  { no:"04", role:"Video Editor",            accent:"#C9A84C", duties:["Editing footage from events, speeches and interactions","Producing reels, promotional videos and public cuts","Post-production delivery at campaign pace"] },
  { no:"05", role:"Social Media Handler",    accent:"#0B6E68", duties:["Managing daily posts, analytics and platform engagement","DMs, comments and public interaction across all channels","Maintaining a consistent and responsive online presence"] },
  { no:"06", role:"Social Media Strategist", accent:"#C9A84C", duties:["Planning content strategy and campaign narratives","Posting schedules, audience targeting and A/B testing","Performance optimisation and weekly reporting"] },
  { no:"07", role:"Content Writer",          accent:"#0B6E68", duties:["Scriptwriting, captions and speech drafts","Press notes, manifesto content and message drafts","Copy tailored for every platform and audience"] },
  { no:"08", role:"Campaign Manager",        accent:"#C9A84C", duties:["Overall coordination of all campaign activities","Team management, strategy execution and escalation","Ground coordination, daily briefings and reporting"] },
  { no:"09", role:"Ads & Boosting Exec",     accent:"#0B6E68", duties:["Running paid advertisements and boosting targeted posts","Audience segmentation, budget management and bid strategy","Performance tracking, optimisation and ROI reporting"] },
  { no:"10", role:"Campaign Associate",      accent:"#C9A84C", duties:["Supporting day-to-day campaign operations on ground","Coordinating with field teams, booth workers and local units","Execution support, feedback collection and status reports"] },
];

const RoleNetwork = () => {
  const [active, setActive] = React.useState(null);
  const ar = active !== null ? CT_ROLES[active] : null;

  return (
    <div style={{ marginTop: 56, paddingTop: 48, borderTop: "1px solid var(--vellum)" }}>

      {/* Header */}
      <div style={{
        display: "flex", alignItems: "flex-start", justifyContent: "space-between",
        gap: 24, flexWrap: "wrap", marginBottom: 28
      }}>
        <div>
          <Eyebrow accent>Campaign Team</Eyebrow>
          <h3 style={{
            fontFamily: "var(--font-display)", fontWeight: 600,
            fontSize: "clamp(20px, 2.4vw, 28px)", lineHeight: 1.1,
            letterSpacing: "-0.025em", color: "var(--slate)", margin: "8px 0 0"
          }}>
            A 10-member team deployed for every candidate.
          </h3>
        </div>
        <p style={{
          fontSize: 13, color: "var(--slate-soft)", lineHeight: 1.65,
          maxWidth: "40ch", margin: 0, paddingTop: 4
        }}>
          A dedicated cross-functional team assigned to every campaign. Select a role to see its responsibilities.
        </p>
      </div>

      {/* 5 × 2 card grid */}
      <div className="ct-grid">
        {CT_ROLES.map((role, idx) => {
          const isActive = active === idx;
          return (
            <button
              key={idx}
              className={`ct-card${isActive ? " ct-active" : ""}`}
              onClick={() => setActive(isActive ? null : idx)}
              aria-pressed={isActive}
              aria-label={role.role}
              style={{ background: isActive ? role.accent : "var(--paper)" }}
            >
              {/* Pulsing accent stripe at top */}
              <div className="ct-stripe" style={{
                background: isActive ? "transparent" : role.accent,
                animation: `ct-pulse ${2.6 + idx * 0.2}s ease-in-out ${idx * 0.25}s infinite`
              }}/>

              {/* Number */}
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 700,
                letterSpacing: "0.12em", marginBottom: 10,
                color: isActive ? "rgba(255,255,255,0.6)" : role.accent,
                transition: "color 220ms"
              }}>{role.no}</div>

              {/* Role name */}
              <div style={{
                fontFamily: "var(--font-condensed)", fontWeight: 800,
                fontSize: "clamp(11px, 1vw, 13px)", letterSpacing: "0.07em",
                textTransform: "uppercase", lineHeight: 1.25,
                color: isActive ? "var(--paper)" : "var(--slate)",
                transition: "color 220ms"
              }}>{role.role}</div>

              {/* Indicator */}
              <div style={{
                marginTop: 10,
                fontFamily: "var(--font-mono)", fontSize: 10,
                color: isActive ? "rgba(255,255,255,0.45)" : "var(--slate-soft)",
                transition: "color 220ms", lineHeight: 1
              }}>{isActive ? "×" : "→"}</div>
            </button>
          );
        })}
      </div>

      {/* Detail panel — unfolds below the grid */}
      <div className={`ct-panel-body${active !== null ? " ct-open" : ""}`}>
        <div className="ct-panel-inner">
          {ar && (
            <div className="ct-panel-detail" style={{
              marginTop: 8,
              background: "var(--ink)",
              borderLeft: `4px solid ${ar.accent}`,
              padding: "28px 32px",
              display: "grid",
              gridTemplateColumns: "200px 1fr",
              gap: 40,
              alignItems: "start"
            }}>
              {/* Left: role identity */}
              <div>
                <div style={{
                  fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 700,
                  color: ar.accent, letterSpacing: "0.14em", marginBottom: 10
                }}>{ar.no} / 10</div>
                <div style={{
                  fontFamily: "var(--font-condensed)", fontWeight: 800,
                  fontSize: "clamp(18px, 2.2vw, 24px)", textTransform: "uppercase",
                  letterSpacing: "-0.01em", lineHeight: 1.1, color: "var(--cream)"
                }}>{ar.role}</div>
                <div style={{
                  width: 24, height: 2, background: ar.accent, marginTop: 16, borderRadius: 1
                }}/>
              </div>

              {/* Right: numbered duties */}
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 12 }}>
                {ar.duties.map((d, i) => (
                  <li key={i} style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                    <span style={{
                      fontFamily: "var(--font-mono)", fontSize: 9, fontWeight: 700,
                      color: ar.accent, letterSpacing: "0.08em", flexShrink: 0, marginTop: 4
                    }}>0{i + 1}</span>
                    <span style={{
                      fontSize: 14, lineHeight: 1.65,
                      color: "rgba(240,233,216,0.7)", fontFamily: "var(--font-body)"
                    }}>{d}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>
      </div>

      {/* Footer tag */}
      <div style={{
        marginTop: 14, fontFamily: "var(--font-mono)", fontSize: 10,
        color: "var(--slate-soft)", letterSpacing: "0.12em", textTransform: "uppercase"
      }}>
        10 specialists · Full campaign coverage · Every candidate
      </div>

    </div>
  );
};

const SLIDES = [
  { src: "./assets/Who are we/1.png", tag: "Partnership",  caption: "Building coalitions across constituencies" },
  { src: "./assets/Who are we/2.png", tag: "Leadership",   caption: "Amplifying voices that move elections" },
  { src: "./assets/Who are we/3.png", tag: "Advocacy",     caption: "Every constituency, every vote" }
];

const StorySlider = () => {
  const [active, setActive] = React.useState(0);
  const [animating, setAnimating] = React.useState(false);

  React.useEffect(() => {
    const t = setInterval(() => {
      setAnimating(true);
      setTimeout(() => {
        setActive(a => (a + 1) % SLIDES.length);
        setAnimating(false);
      }, 300);
    }, 4000);
    return () => clearInterval(t);
  }, []);

  const goTo = (i) => {
    if (i === active) return;
    setAnimating(true);
    setTimeout(() => { setActive(i); setAnimating(false); }, 300);
  };

  const s = SLIDES[active];

  return (
    <div style={{ marginTop: 28, position: "relative" }}>

      {/* Slim progress bar along top edge */}
      <div style={{ height: 2, background: "rgba(240,233,216,0.08)", marginBottom: 0 }}>
        <div style={{
          height: "100%",
          background: "linear-gradient(to right, var(--peacock), var(--gold))",
          width: `${((active + 1) / SLIDES.length) * 100}%`,
          transition: "width 0.5s ease"
        }}/>
      </div>

      {/* Image window */}
      <div style={{
        position: "relative",
        height: 220,
        overflow: "hidden",
        background: "var(--ink)"
      }}>
        <img
          key={active}
          src={s.src}
          alt={s.tag}
          style={{
            position: "absolute", inset: 0,
            width: "100%", height: "100%",
            objectFit: "cover",
            objectPosition: "center top",
            filter: "brightness(0.68) saturate(0.82)",
            opacity: animating ? 0 : 1,
            transform: animating ? "scale(1.03)" : "scale(1)",
            transition: "opacity 0.4s ease, transform 0.4s ease"
          }}
        />

        {/* Cinematic gradient — bleeds into ink card above and below */}
        <div style={{
          position: "absolute", inset: 0,
          background: [
            "linear-gradient(to bottom, rgba(10,14,20,0.55) 0%, transparent 30%, transparent 55%, rgba(10,14,20,0.85) 100%)",
            "linear-gradient(to right, rgba(10,14,20,0.45) 0%, transparent 40%)"
          ].join(", "),
          pointerEvents: "none"
        }}/>

        {/* Peacock left-border echo */}
        <div style={{
          position: "absolute", top: 0, bottom: 0, left: 0,
          width: 3, background: "var(--peacock)", opacity: 0.7
        }}/>

        {/* Bottom caption */}
        <div style={{
          position: "absolute", bottom: 18, left: 20, right: 20,
          opacity: animating ? 0 : 1,
          transform: animating ? "translateY(6px)" : "translateY(0)",
          transition: "opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s"
        }}>
          <div style={{
            display: "inline-block",
            fontFamily: "var(--font-mono)", fontSize: 8, fontWeight: 600,
            letterSpacing: "0.2em", textTransform: "uppercase",
            color: "var(--peacock-bright)",
            borderBottom: "1px solid var(--peacock)",
            paddingBottom: 3, marginBottom: 6
          }}>{s.tag}</div>
          <div style={{
            fontFamily: "var(--font-condensed)", fontWeight: 700,
            fontSize: 15, lineHeight: 1.25,
            color: "rgba(240,233,216,0.88)",
            maxWidth: "32ch"
          }}>{s.caption}</div>
        </div>

        {/* Slide counter top-right */}
        <div style={{
          position: "absolute", top: 14, right: 16,
          fontFamily: "var(--font-mono)", fontSize: 9,
          color: "rgba(240,233,216,0.4)", letterSpacing: "0.1em"
        }}>
          {String(active + 1).padStart(2, "0")} / {String(SLIDES.length).padStart(2, "0")}
        </div>
      </div>

      {/* Dot navigation */}
      <div style={{
        display: "flex", alignItems: "center", gap: 6,
        paddingTop: 14
      }}>
        {SLIDES.map((_, i) => (
          <button
            key={i}
            onClick={() => goTo(i)}
            aria-label={`Slide ${i + 1}`}
            style={{
              height: 4,
              width: i === active ? 28 : 8,
              background: i === active ? "var(--peacock)" : "rgba(240,233,216,0.18)",
              border: "none", cursor: "pointer", padding: 0,
              transition: "width 0.35s ease, background 0.35s ease",
              flexShrink: 0
            }}
          />
        ))}
        <div style={{ flex: 1 }}/>
        {/* Thumbnail strip */}
        {SLIDES.map((sl, i) => (
          <button
            key={i}
            onClick={() => goTo(i)}
            style={{
              width: 36, height: 24,
              overflow: "hidden",
              padding: 0, border: "none", cursor: "pointer",
              outline: i === active ? "2px solid var(--peacock)" : "2px solid transparent",
              outlineOffset: 1,
              opacity: i === active ? 1 : 0.45,
              transition: "opacity 0.3s, outline 0.3s",
              flexShrink: 0
            }}
          >
            <img src={sl.src} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top" }}/>
          </button>
        ))}
      </div>
    </div>
  );
};

const SERVICES = [
  { label: "Voter Intelligence",       detail: "Voter profiling, sentiment mapping, and real-time field intelligence.", color: "#0B6E68", rgb: "11,110,104",  num: "01" },
  { label: "Ground Operations",        detail: "Booth-level mobilization, volunteer networks, and GOTV execution.",     color: "#C9A84C", rgb: "201,168,76",  num: "02" },
  { label: "Digital Campaigns",        detail: "Targeted social, WhatsApp outreach, and online reputation management.", color: "#E86A2A", rgb: "232,106,42",  num: "03" },
  { label: "Strategic Communication",  detail: "Narrative building, media relations, and candidate positioning.",        color: "#7B5EA7", rgb: "123,94,167",  num: "04" },
];

const Story = () => {
  const svcRef = React.useRef(null);
  const [svcIn, setSvcIn] = React.useState(false);
  const [hovered, setHovered] = React.useState(-1);

  React.useEffect(() => {
    const el = svcRef.current;
    if (!el || !window.IntersectionObserver) { setSvcIn(true); return; }
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setSvcIn(true); obs.disconnect(); } },
      { threshold: 0.1 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  return (
    <section id="story" className="section-pad" style={{
      background: "var(--parchment)",
      padding: "clamp(64px, 8vw, 112px) 32px"
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>

        {/* Broadsheet section header */}
        <div style={{
          display: "flex", alignItems: "center", gap: 24,
          paddingBottom: 18, marginBottom: 52,
          borderBottom: "2px solid var(--slate)"
        }}>
          <Eyebrow>Who We Are</Eyebrow>
          <div style={{ flex: 1, height: 1, background: "var(--vellum)" }}/>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 10,
            color: "var(--slate-soft)", letterSpacing: "0.14em", textTransform: "uppercase"
          }}>Pune, Maharashtra · India</div>
        </div>

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

          {/* Left — text */}
          <div>

            {/* Origin tag */}
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 500,
              letterSpacing: "0.18em", textTransform: "uppercase",
              color: "var(--peacock)", marginBottom: 18
            }}>
              Political Consulting · Election Campaign Management
            </div>

            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 600,
              fontSize: "clamp(30px, 3.6vw, 46px)", lineHeight: 1.06,
              letterSpacing: "-0.03em", color: "var(--slate)",
              margin: "0 0 22px", textWrap: "balance"
            }}>
              We build campaigns that move voters and win elections.
            </h2>

            <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--slate-mid)", marginBottom: 28, maxWidth: "52ch" }}>
              Pune-based political consultants. Partners to Cabinet Ministers, MPs, MLAs, and first-time candidates — across parties and every tier of government.
            </p>

            {/* Animated service cards */}
            <div ref={svcRef} style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 36 }}>
              {SERVICES.map(({ label, detail, color, rgb, num }, i) => {
                const on = hovered === i;
                return (
                  <div key={i} style={{
                    opacity: svcIn ? 1 : 0,
                    transform: svcIn ? "translateY(0)" : "translateY(22px)",
                    transition: `opacity 0.5s ease ${i * 0.11 + 0.05}s, transform 0.55s cubic-bezier(0.22,1,0.36,1) ${i * 0.11 + 0.05}s`,
                  }}>
                    <div
                      onMouseEnter={() => setHovered(i)}
                      onMouseLeave={() => setHovered(-1)}
                      style={{
                        background: on ? `rgba(${rgb},0.10)` : `rgba(${rgb},0.05)`,
                        border: `1px solid rgba(${rgb},${on ? 0.4 : 0.18})`,
                        borderLeft: `4px solid ${color}`,
                        padding: "20px 18px",
                        height: "100%", boxSizing: "border-box",
                        position: "relative",
                        transform: on ? "translateY(-5px)" : "translateY(0)",
                        boxShadow: on ? `0 14px 36px rgba(${rgb},0.18)` : "none",
                        transition: "all 220ms ease",
                      }}
                    >
                      <div style={{
                        position: "absolute", top: 10, right: 12,
                        fontFamily: "var(--font-mono)", fontSize: 9,
                        color: color, fontWeight: 700, letterSpacing: "0.06em",
                        opacity: on ? 0.9 : 0.4, transition: "opacity 220ms ease",
                      }}>{num}</div>
                      <div style={{
                        fontSize: 12, fontWeight: 800, letterSpacing: "0.09em",
                        textTransform: "uppercase", color: color,
                        marginBottom: 8, paddingRight: 20, lineHeight: 1.25,
                      }}>{label}</div>
                      <div style={{
                        height: 2, background: color, marginBottom: 10, borderRadius: 2,
                        width: on ? "100%" : 24, transition: "width 300ms ease", opacity: 0.55,
                      }}/>
                      <div style={{ fontSize: 12, lineHeight: 1.55, color: "var(--slate-soft)" }}>{detail}</div>
                    </div>
                  </div>
                );
              })}
            </div>

            {/* Stat cards */}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
              {[
                { n: "100+",  l: "Campaigns run",    color: "var(--peacock)" },
                { n: "175K+", l: "Voters / campaign", color: "var(--gold)" },
              ].map((s, i) => (
                <div key={i} style={{
                  background: "var(--parchment-deep)",
                  border: "1px solid var(--vellum)",
                  padding: "18px 20px"
                }}>
                  <div style={{
                    fontFamily: "var(--font-condensed)", fontWeight: 800,
                    fontSize: 42, lineHeight: 1, letterSpacing: "-0.01em",
                    color: s.color
                  }}>{s.n}</div>
                  <div style={{
                    fontSize: 11, fontWeight: 700, letterSpacing: "0.1em",
                    textTransform: "uppercase", color: "var(--slate-mid)", marginTop: 6
                  }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right — quote card + buttons */}
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <div style={{
              background: "var(--ink)",
              borderLeft: "4px solid var(--peacock)",
              padding: "clamp(22px, 3vw, 32px)",
              position: "relative",
              overflow: "hidden"
            }}>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 500,
                letterSpacing: "0.18em", textTransform: "uppercase",
                color: "var(--peacock-bright)", marginBottom: 20
              }}>
                Approach · Pravah Solution · Pune
              </div>
              <div style={{
                fontFamily: "var(--font-condensed)",
                fontWeight: 800,
                fontSize: "clamp(52px, 6.5vw, 78px)",
                lineHeight: 0.88,
                letterSpacing: "-0.01em",
                textTransform: "uppercase",
                color: "var(--parchment)"
              }}>
                "Every<br/>vote<br/><span style={{ color: "var(--gold)" }}>counts."</span>
              </div>
              <div style={{
                marginTop: 20, paddingTop: 16,
                borderTop: "1px solid rgba(240,233,216,0.12)",
                fontFamily: "var(--font-body)", fontSize: 13,
                color: "rgba(240,233,216,0.5)", lineHeight: 1.55
              }}>
                — Team Pravah Solution
              </div>
              <StorySlider/>
            </div>

            {/* Buttons below the quote card */}
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
              <Button variant="secondary" arrow>Our methodology</Button>
              <Button variant="ghost" arrow={false}>Our values</Button>
            </div>
          </div>
        </div>

        <RoleNetwork/>

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

window.Story = Story;