const { useState } = React;

const PILLARS = [
  {
    roman: "I",
    name: "Capital & Growth",
    summary:
      "Long-horizon capital stewardship across private and public markets — anchored in conviction, compounded over decades.",
    subs: [
      {
        k: "investment",
        t: "Investment & Financial Management",
        d: "Direct, fund-of-one and co-investment mandates tailored to principal balance sheets and family offices.",
      },
      {
        k: "portfolio",
        t: "Portfolio Management",
        d: "Multi-asset portfolio construction blending liquid strategies with private positions and hedged overlays.",
      },
      {
        k: "realestate",
        t: "Real Estate Consultancy",
        d: "Origination, structuring and asset management of core, value-add and development real estate across gateway cities.",
      },
      {
        k: "compounding",
        t: "Compounding Growth",
        d: "A framework of patient reinvestment, succession planning and intergenerational continuity.",
      },
    ],
  },
  {
    roman: "II",
    name: "Elite & Global Services",
    summary:
      "High-touch services for principals who require the same standard of discretion and excellence in every domain of life.",
    subs: [
      {
        k: "concierge",
        t: "Elite Concierge",
        d: "Worldwide private aviation, residence, medical, security and lifestyle coordination — one number, one standard.",
      },
      {
        k: "education",
        t: "Higher Education",
        d: "Advisory and placement across the world's leading institutions, with scholarship and endowed-chair partnerships.",
      },
      {
        k: "staffing",
        t: "High-Skilled Professional Staffing",
        d: "Executive and technical talent placement across finance, operations, legal, engineering and research.",
      },
      {
        k: "culture",
        t: "Cultural Patronage",
        d: "Curatorial advisory and placement across museums, foundations and philanthropic boards — alignment with institutions of enduring reputation.",
      },
    ],
  },
  {
    roman: "III",
    name: "Sustainability & Impact",
    summary:
      "Capital deployed with intent — engineering measurable outcomes for climate, community, and long-term resilience.",
    subs: [
      {
        k: "eco",
        t: "Eco-Friendly Initiatives",
        d: "Climate-aligned infrastructure, circular supply chains and recycling solutions at industrial scale.",
      },
      {
        k: "social",
        t: "Social Impact",
        d: "Education, nutrition and livelihood programmes in partnership with local institutions across emerging markets.",
      },
    ],
  },
];

// Distinct gold line-icons per sub-point. Same 22×22 viewBox + currentColor as
// the prior PillarIcon so the existing .pillar-sub .icn rules keep working.
function SubIcon({ name }) {
  const sw = 1;
  const wrap = (children) => (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" className="icn">
      {children}
    </svg>
  );
  switch (name) {
    case "investment":
      return wrap(
        <g stroke="currentColor" strokeWidth={sw} fill="none">
          <rect x="3" y="13" width="3" height="6" />
          <rect x="9.5" y="9" width="3" height="10" />
          <rect x="16" y="5" width="3" height="14" />
        </g>,
      );
    case "portfolio":
      return wrap(
        <g stroke="currentColor" strokeWidth={sw} fill="none">
          <circle cx="11" cy="11" r="8" />
          <path d="M11 3 L11 11 L19 11" />
          <path d="M11 11 L4.5 7.5" />
        </g>,
      );
    case "realestate":
      return wrap(
        <g stroke="currentColor" strokeWidth={sw} fill="none">
          <path d="M3 9 L11 4 L19 9" />
          <path d="M5 9 L5 19 L17 19 L17 9" />
          <rect x="7" y="11" width="3" height="3" strokeWidth="0.8" />
          <rect x="12" y="11" width="3" height="3" strokeWidth="0.8" />
          <rect x="9.5" y="15" width="3" height="4" strokeWidth="0.8" />
        </g>,
      );
    case "compounding":
      return wrap(
        <g stroke="currentColor" strokeWidth={sw} fill="none">
          <circle
            cx="11"
            cy="11"
            r="9.5"
            strokeWidth="0.6"
            strokeDasharray="1 2"
          />
          <circle
            cx="11"
            cy="11"
            r="7"
            strokeWidth="0.8"
            strokeDasharray="2 2"
          />
          <circle cx="11" cy="11" r="4.5" strokeWidth="0.8" />
          <circle cx="11" cy="11" r="1.6" fill="currentColor" stroke="none" />
        </g>,
      );
    case "concierge":
      return wrap(
        <g stroke="currentColor" strokeWidth={sw} fill="none">
          <circle cx="6.5" cy="11" r="3" />
          <line x1="9.5" y1="11" x2="19" y2="11" />
          <line x1="15" y1="11" x2="15" y2="14" />
          <line x1="17" y1="11" x2="17" y2="13.5" />
        </g>,
      );
    case "education":
      return wrap(
        <g stroke="currentColor" strokeWidth={sw} fill="none">
          <path d="M11 4 L20 8 L11 12 L2 8 Z" />
          <path d="M6 10 L6 15 C6 15 8 17 11 17 C14 17 16 15 16 15 L16 10" />
          <line x1="20" y1="8" x2="20" y2="14" strokeWidth="0.8" />
          <circle cx="20" cy="15" r="0.9" fill="currentColor" stroke="none" />
        </g>,
      );
    case "staffing":
      return wrap(
        <g stroke="currentColor" strokeWidth={sw} fill="none">
          <circle cx="11" cy="6" r="2" />
          <circle cx="5" cy="15" r="2" />
          <circle cx="17" cy="15" r="2" />
          <line
            x1="10"
            y1="7.5"
            x2="6"
            y2="13.5"
            strokeWidth="0.7"
            strokeDasharray="1.4 1.4"
          />
          <line
            x1="12"
            y1="7.5"
            x2="16"
            y2="13.5"
            strokeWidth="0.7"
            strokeDasharray="1.4 1.4"
          />
          <line
            x1="7"
            y1="15"
            x2="15"
            y2="15"
            strokeWidth="0.7"
            strokeDasharray="1.4 1.4"
          />
        </g>,
      );
    case "culture":
      return wrap(
        <g stroke="currentColor" strokeWidth={sw} fill="none">
          <path d="M3 6 L11 3 L19 6" />
          <line x1="2.5" y1="7" x2="19.5" y2="7" />
          <line x1="6" y1="8" x2="6" y2="16" strokeWidth="0.8" />
          <line x1="11" y1="8" x2="11" y2="16" strokeWidth="0.8" />
          <line x1="16" y1="8" x2="16" y2="16" strokeWidth="0.8" />
          <line x1="2.5" y1="17" x2="19.5" y2="17" />
          <line x1="2" y1="19" x2="20" y2="19" />
        </g>,
      );
    case "eco":
      return wrap(
        <g stroke="currentColor" strokeWidth={sw} fill="none">
          <path d="M5 17 C 5 9 9 5 17 5 C 17 13 13 17 5 17 Z" />
          <path d="M17 5 L 5 17" strokeWidth="0.7" />
        </g>,
      );
    case "social":
      return wrap(
        <g stroke="currentColor" strokeWidth={sw} fill="none">
          <path d="M11 18 C 4 13 4 7 8 6 C 10 6 11 7 11 9 C 11 7 12 6 14 6 C 18 7 18 13 11 18 Z" />
        </g>,
      );
    default:
      return wrap(
        <circle
          cx="11"
          cy="11"
          r="3"
          stroke="currentColor"
          strokeWidth={sw}
          fill="none"
        />,
      );
  }
}

function Pillars() {
  const [open, setOpen] = useState(0); // first open by default
  return (
    <section id="pillars">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>
              Strategic Pillars
            </div>
            <h2 className="section-title">
              Three <em>pillars</em>. One architecture.
            </h2>
          </div>
          <div className="right">
            <p className="body">
              The Network is organised around three disciplines — capital,
              service, and impact — each operating with independent rigour and
              interconnected reach.
            </p>
          </div>
        </Reveal>

        <div className="pillars-wrap">
          {PILLARS.map((p, i) => (
            <Reveal key={p.roman} delay={i * 80}>
              <div
                className={`pillar-row ${open === i ? "open" : ""}`}
                onClick={() => setOpen(open === i ? -1 : i)}
              >
                <div className="roman">{p.roman}.</div>
                <div>
                  <h3>{p.name}</h3>
                </div>
                <div className="summary">{p.summary}</div>
                <div className="expand">
                  <span>{open === i ? "Hide" : "View"}</span>
                  <span className="plus" />
                </div>
                <div className="pillar-detail">
                  <div />
                  <div className="pillar-sub-grid">
                    {p.subs.map((s, j) => (
                      <div key={j} className="pillar-sub">
                        <SubIcon name={s.k} />
                        <h4>{s.t}</h4>
                        <p>{s.d}</p>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pillars });