/* New sections aligned to brand doc:
   - TrustBar       (chips bajo hero)
   - RealProblem    (3 cards — el problema)
   - ValueProp      (3 statements de valor)
   - WhoWeHelp      (4 audiencias)
*/

/* =========== HOLISTIC APPROACH =========== */

function HolisticApproach() {
  return (
    <section
      id="holistic-approach"
      data-screen-label="01 Holistic Approach"
      className="section-fit relative bg-off-white py-24 md:py-28 overflow-hidden"
    >
      <div className="max-w-[1280px] mx-auto px-6 md:px-10 lg:px-16">

        {/* Title */}
        <div className="section-fit-header mb-10 md:mb-12 max-w-[760px]">
          <span className="zaj-rule-grow copper-rule" style={{ animation: 'none' }} />
          <h2 className="section-fit-title zaj-words mt-6 font-heading font-bold text-charcoal text-3xl md:text-4xl lg:text-[44px] tracking-[-0.01em] leading-[1.1]">
            Fire Engineering Holistic Approach
          </h2>
        </div>

        {/* Frosted-glass card with a warm copper glow illuminating from behind
           the video. Video shown at its native aspect ratio (not cropped). */}
        <div className="zaj-fade-scale relative">
          {/* Copper glow — sits behind the card and bleeds out around it */}
          <div className="pointer-events-none absolute -inset-8 md:-inset-14 z-0" aria-hidden="true">
            <div className="absolute left-1/2 top-1/2 h-[78%] w-[86%] -translate-x-1/2 -translate-y-1/2 rounded-[40%] bg-[radial-gradient(60%_60%_at_50%_45%,rgba(178,124,77,0.5),rgba(178,124,77,0.16)_46%,transparent_72%)] blur-3xl" />
          </div>

          {/* White frosted-glass card */}
          <div className="relative z-10 rounded-[28px] md:rounded-[40px] border border-white/60 bg-white/55 p-3 md:p-5 shadow-[0_44px_100px_-44px_rgba(15,27,42,0.4)] backdrop-blur-xl">
            <video
              className="block w-full aspect-[16/9] object-cover rounded-[20px] md:rounded-[30px]"
              src="assets/holistic.mp4"
              autoPlay
              muted
              loop
              playsInline
              preload="metadata"
            />
          </div>
        </div>

      </div>
    </section>
  );
}

/* =========== SERVICES SECTION =========== */

const SERVICES = [
  {
    id: "fire-engineering-report", num: "01", title: "Fire Engineering Report",
    imagePath: "assets/1.png",
    description: "A comprehensive performance-based fire engineering report that documents the design basis, compliance pathway and supporting evidence for regulatory approval.",
    subitems: [
      { name: "Performance-Based Design Brief", iconPath: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" },
      { name: "NCC / BCA Compliance Assessment", iconPath: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" },
      { name: "Alternative Solution Justification", iconPath: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" }
    ]
  },
  {
    id: "performance-solutions", num: "02", title: "Fire Engineering Performance Solutions",
    imagePath: "assets/2.png",
    description: "Targeted performance-based solutions that resolve the moments where prescriptive compliance reshapes the architecture, cost or program of a project.",
    subitems: [
      { name: "Glazed Fire Separation Strategy", iconPath: "M4 4h16v16H4z M4 9h16M9 9v11" },
      { name: "Travel Distance Extension", iconPath: "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" },
      { name: "FRL Reduction Justification", iconPath: "M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" }
    ]
  },
  {
    id: "computational-fire-modelling", num: "03", title: "Computational Fire Modelling",
    imagePath: "assets/3.png",
    description: "Advanced CFD simulation of fire, heat and smoke movement to verify tenability and demonstrate the performance of smoke management and fire safety systems.",
    subitems: [
      { name: "CFD Smoke & Heat Analysis (FDS)", iconPath: "M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z M21 12a9 9 0 11-18 0 9 9 0 0118 0z" },
      { name: "Tenability & Visibility Assessment", iconPath: "M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" },
      { name: "Smoke Management Verification", iconPath: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" }
    ]
  },
  {
    id: "evacuation-egress-analysis", num: "04", title: "Computational Evacuation & Egress Analysis",
    imagePath: "assets/4.png",
    description: "Agent-based evacuation modelling that quantifies occupant movement and demonstrates a safe margin between available and required safe egress time.",
    subitems: [
      { name: "Agent-Based Evacuation Modelling", iconPath: "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" },
      { name: "ASET / RSET Margin Analysis", iconPath: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" },
      { name: "Occupant Egress Optimisation", iconPath: "M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" }
    ]
  },
  {
    id: "fire-risk-assessment", num: "05", title: "Fire Engineering Risk Assessment",
    imagePath: "assets/5.png",
    description: "Structured identification and evaluation of fire hazards, supporting defensible, risk-informed design decisions for complex and high-consequence buildings.",
    subitems: [
      { name: "Qualitative Design Review (QDR)", iconPath: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" },
      { name: "Fire Hazard Identification", iconPath: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" },
      { name: "Risk Mitigation Strategy", iconPath: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" }
    ]
  },
  {
    id: "peer-review", num: "06", title: "Peer Review of Fire Engineering",
    imagePath: "assets/6.png",
    description: "Independent third-party review of fire engineering designs, verifying methodology, assumptions and compliance to give stakeholders and authorities confidence.",
    subitems: [
      { name: "Independent Design Verification", iconPath: "M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" },
      { name: "Regulatory Compliance Audit", iconPath: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" },
      { name: "Methodology & Assumptions Review", iconPath: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }
    ]
  },
  {
    id: "carpark-ev-fire-safety", num: "07", title: "Carpark EV Fire Safety",
    imagePath: "assets/7.png",
    description: "Specialist fire safety strategies for carparks accommodating electric vehicles, addressing battery fire behaviour, suppression and smoke control requirements.",
    subitems: [
      { name: "EV Battery Fire Risk Assessment", iconPath: "M13 10V3L4 14h7v7l9-11h-7z" },
      { name: "Sprinkler & Suppression Strategy", iconPath: "M12 2.25c-4 5-6 8-6 11a6 6 0 0012 0c0-3-2-6-6-11z" },
      { name: "Smoke Exhaust & Ventilation Design", iconPath: "M3 8h11a3 3 0 100-6M3 16h15a3 3 0 110 6M3 12h18" }
    ]
  }
];

function ServiceCard({ service }) {
  const [isActive, setIsActive] = React.useState(false);

  const handleKeyDown = (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      setIsActive(!isActive);
    }
  };

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      onKeyDown={handleKeyDown}
      role="button"
      tabIndex={0}
      aria-expanded={isActive}
      className={`
        zaj-fade-up zaj-lift zaj-icon-morph-group
        group relative h-[240px] w-[172px] shrink-0 snap-start md:h-[272px] md:w-[200px] rounded-[16px] border overflow-hidden focus-within:[&_.service-card-details]:opacity-100 focus-within:[&_.service-card-details]:translate-y-0 focus-within:[&_.service-card-summary]:opacity-0 focus-within:[&_.service-card-summary]:scale-95
        transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-copper focus-visible:ring-offset-2
        bg-white/85 backdrop-blur-md cursor-pointer
        ${isActive
          ? 'border-copper/60 shadow-[0_16px_40px_rgba(178,124,77,0.15),0_2px_6px_rgba(178,124,77,0.08)]'
          : 'border-charcoal/10 shadow-[0_8px_24px_rgba(15,27,42,0.06),0_1px_2px_rgba(15,27,42,0.08)] hover:border-copper/60 hover:shadow-[0_16px_40px_rgba(178,124,77,0.15),0_2px_6px_rgba(178,124,77,0.08)]'}
      `}
    >
      {/* Default State (Unhovered / Unclicked) */}
      <div 
        className={`
          service-card-summary
          absolute inset-0 p-4 md:p-5 flex flex-col
          transition-all duration-500 ease-[cubic-bezier(0.2,0,0,1)]
          ${isActive ? 'opacity-0 scale-95 pointer-events-none' : 'opacity-100 scale-100 group-hover:opacity-0 group-hover:scale-95'}
        `}
      >
        <div className="font-heading text-copper font-bold text-[13px] tracking-[0.12em] mb-auto">
          {service.num}
        </div>
        
        <div className="flex flex-col items-center justify-center flex-1 pb-2">
          <div className="w-14 h-14 md:w-[72px] md:h-[72px] mb-4 zaj-icon-morph">
            <img src={service.imagePath} alt="" className="w-full h-full object-contain" loading="lazy" decoding="async" />
          </div>
          
          <h3 className="font-heading font-bold text-midnight text-[15px] md:text-[17px] text-center leading-tight px-1">
            {service.title}
          </h3>
        </div>
      </div>

      {/* Active State (Hovered / Clicked) */}
      <div 
        className={`
          service-card-details
          absolute inset-0 p-4 md:p-5 flex flex-col bg-white
          transition-all duration-500 ease-[cubic-bezier(0.2,0,0,1)]
          ${isActive ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto'}
        `}
      >
        <div className="flex justify-between items-start mb-2.5">
          <div className="flex flex-col gap-1">
            <span className="font-heading text-copper font-bold text-[11px] tracking-[0.12em]">
              {service.num}
            </span>
            <h3 className="font-heading font-bold text-midnight text-[13px] md:text-[14px] leading-tight pr-2">
              {service.title}
            </h3>
          </div>
          <div className="w-6 h-6 shrink-0 opacity-80">
            <img src={service.imagePath} alt="" className="w-full h-full object-contain" loading="lazy" decoding="async" />
          </div>
        </div>
        
        <div className="flex flex-col flex-1 justify-end">
          <div className="space-y-3 pt-4 border-t border-charcoal/10">
            {service.subitems.map((sub, idx) => (
              <div key={idx} className="flex items-start gap-2">
                <div className="text-copper/80 w-3 h-3 shrink-0 mt-0.5">
                  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                    <path strokeLinecap="round" strokeLinejoin="round" d={sub.iconPath} />
                  </svg>
                </div>
                <span className="font-heading text-[9.8px] md:text-[10.5px] tracking-wide font-semibold text-charcoal/90 leading-snug">
                  {sub.name}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
      
    </div>
  );
}

function ServicesSection() {
  const carouselRef = React.useRef(null);

  const scrollServices = (direction) => {
    const carousel = carouselRef.current;
    if (!carousel) return;

    const card = carousel.querySelector('[data-service-card]');
    const amount = card ? card.getBoundingClientRect().width + 20 : 220;
    carousel.scrollBy({ left: direction * amount * 2, behavior: 'smooth' });
  };

  return (
    <section 
      id="services"
      data-screen-label="Services"
      className="section-fit relative bg-off-white py-16 md:py-20 border-y border-charcoal/10 overflow-hidden"
    >
      <div className="max-w-[1280px] mx-auto px-6 md:px-10 lg:px-16 relative z-10">
        
        {/* Header */}
        <div className="section-fit-header max-w-[820px] mb-10">
          <div className="zaj-fade-up font-heading text-[11px] tracking-[0.32em] text-copper">
            SERVICES
          </div>
          <span className="zaj-rule-grow mt-5 mb-7 copper-rule" style={{ animation: 'none' }} />
          <h2 className="section-fit-title zaj-words font-heading font-bold text-charcoal text-3xl md:text-4xl lg:text-[44px] tracking-[-0.01em] leading-[1.1]">
            Our <span className="text-copper-deep">Services.</span>
          </h2>
          <p className="section-fit-copy zaj-fade-up mt-7 max-w-[640px] text-[16px] leading-[1.7] text-charcoal/75">
            We deliver performance-driven engineering services that de-risk complex projects and help bring ambitious ideas to life.
          </p>
        </div>

        {/* Native stories carousel */}
        <div className="zaj-stagger relative -mx-6 md:-mx-10 lg:-mx-16">
          <div
            ref={carouselRef}
            className="flex snap-x snap-mandatory gap-4 overflow-x-auto scroll-smooth px-6 pb-4 md:px-10 lg:px-16 lg:gap-5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
            aria-label="Services carousel"
          >
            {SERVICES.map((service) => (
              <div data-service-card key={service.id} className="shrink-0">
                <ServiceCard service={service} />
              </div>
            ))}
          </div>

          <div className="mt-3 hidden justify-end gap-2 px-6 md:flex md:px-10 lg:px-16">
            <button
              type="button"
              onClick={() => scrollServices(-1)}
              className="zaj-lift inline-flex h-9 w-9 items-center justify-center rounded-full border border-charcoal/12 bg-white/80 text-charcoal shadow-[0_8px_24px_rgba(15,27,42,0.06)] transition-colors hover:border-copper/50 hover:text-copper focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
              aria-label="Previous services"
            >
              <svg aria-hidden="true" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
              </svg>
            </button>
            <button
              type="button"
              onClick={() => scrollServices(1)}
              className="zaj-lift inline-flex h-9 w-9 items-center justify-center rounded-full border border-charcoal/12 bg-white/80 text-charcoal shadow-[0_8px_24px_rgba(15,27,42,0.06)] transition-colors hover:border-copper/50 hover:text-copper focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
              aria-label="Next services"
            >
              <svg aria-hidden="true" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
              </svg>
            </button>
          </div>
        </div>

        {/* Value Strip — fast stagger */}
        <div className="section-fit-secondary zaj-stagger zaj-stagger-fast mt-12 pt-8 border-t border-charcoal/10 flex flex-wrap gap-x-8 gap-y-4 items-center justify-center lg:justify-start">
          {["Faster Approvals", "Defend Your Design", "Maximise Value", "Reduce Risk", "Expert Representation"].map((item, i) => (
            <div key={i} className="zaj-fade-up flex items-center gap-3">
              <span className="w-1.5 h-1.5 rounded-full bg-copper"></span>
              <span className="font-heading text-[11px] tracking-[0.15em] text-charcoal/80 font-semibold uppercase">{item}</span>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

/* =========== REAL PROBLEM =========== */

function RealProblem() {
  const cards = [
    {
      n: "01",
      icon: "clock",
      visual: "approval",
      title: "Approvals slow the project",
      body: "Conservative interpretations, late discoveries and reactive engagement push approval timelines beyond what the program can absorb.",
    },
    {
      n: "02",
      icon: "cube",
      visual: "intent",
      title: "Design intent gets compromised",
      body: "Prescriptive paths quietly trade glass for blank walls, oversize cores and consume usable area in the name of compliance.",
    },
    {
      n: "03",
      icon: "bars",
      visual: "value",
      title: "Commercial value is left behind",
      body: "Without an evidence-based strategy, conservative assumptions reduce the lettable / saleable area the project depends on.",
    },
  ];

  const valueStrip = [
    { label: "Faster Approvals", icon: "shield" },
    { label: "Defend Your Design", icon: "bolt" },
    { label: "Maximise Value", icon: "bars" },
    { label: "Reduce Risk", icon: "check" },
    { label: "Expert Representation", icon: "expert" },
  ];

  const renderIcon = (type) => {
    const common = { fill: "none", viewBox: "0 0 48 48", stroke: "currentColor", strokeWidth: "2.1", strokeLinecap: "round", strokeLinejoin: "round" };
    if (type === "clock") return <svg {...common}><circle cx="24" cy="24" r="16" /><path d="M24 12v13l9 6" /></svg>;
    if (type === "cube") return <svg {...common}><path d="M24 6l15 8.5v18L24 41 9 32.5v-18L24 6z" /><path d="M9 14.5l15 8.5 15-8.5M24 23v18" /></svg>;
    if (type === "bars") return <svg {...common}><path d="M10 38V24h7v14M21 38V14h7v24M32 38V8h7v30" /></svg>;
    if (type === "shield") return <svg {...common}><path d="M24 6l16 6v12c0 10-6.8 16.5-16 19-9.2-2.5-16-9-16-19V12l16-6z" /><path d="M24 15v19M15 24h18" /></svg>;
    if (type === "bolt") return <svg {...common}><path d="M29 4L12 27h13l-6 17 17-24H23l6-16z" /></svg>;
    if (type === "check") return <svg {...common}><circle cx="24" cy="24" r="17" /><path d="M16 24l5.5 5.5L33 17" /></svg>;
    return <svg {...common}><path d="M24 24a8 8 0 100-16 8 8 0 000 16zM10 42a14 14 0 0128 0" /><path d="M34 11l2 4 4 1-4 2-2 4-2-4-4-2 4-1 2-4z" /></svg>;
  };

  const renderVisual = (type) => {
    if (type === "approval") {
      return (
        <svg className="rp-card-visual-svg" viewBox="0 0 520 260" fill="none" aria-hidden="true">
          <path d="M34 184c57-24 122-23 195-4 61 16 120 17 178 1" stroke="#D8D1C8" strokeWidth="2" />
          <g className="rp-paper-stack">
            <path d="M52 94l150-34 107 51-156 42L52 94z" fill="#F4F1ED" stroke="#D8D1C8" />
            <path d="M56 116l150-34 107 51-156 42L56 116z" fill="#EEEAE4" stroke="#D8D1C8" />
            <path d="M60 140l150-34 107 51-156 42L60 140z" fill="#E8E3DC" stroke="#D8D1C8" />
            <path d="M112 105l83-18 57 25-87 22-53-29z" fill="none" stroke="#C35F42" strokeWidth="2" />
            <text x="137" y="118" fill="#C35F42" fontSize="18" fontFamily="Montserrat" fontWeight="700" transform="rotate(-9 137 118)">DEFERRED</text>
          </g>
          <g opacity="0.72">
            <path d="M295 54h158v148H295z" fill="#F8F6F2" stroke="#D8D1C8" />
            <path d="M311 78h125M311 108h125M311 138h125M311 168h125M333 60v134M378 60v134M423 60v134" stroke="#D8D1C8" />
            <path className="rp-copper-path" d="M332 174c20-30 16-61 47-61 32 0 28 40 58 40" stroke="#B27C4D" strokeWidth="4" strokeDasharray="10 8" />
            <path d="M430 80l12 22h-24l12-22zM356 158l12 22h-24l12-22z" fill="#B27C4D" opacity="0.78" />
          </g>
        </svg>
      );
    }

    if (type === "intent") {
      return (
        <svg className="rp-card-visual-svg" viewBox="0 0 520 260" fill="none" aria-hidden="true">
          <g opacity="0.8">
            {Array.from({ length: 7 }).map((_, i) => (
              <path key={`x${i}`} d={`M${70 + i * 42} 184l126-70`} stroke="#DCD5CC" />
            ))}
            {Array.from({ length: 5 }).map((_, i) => (
              <path key={`y${i}`} d={`M74 ${184 - i * 24}l286 0`} stroke="#DCD5CC" />
            ))}
          </g>
          <g transform="translate(92 52)">
            <path d="M0 112l156-72 194 60-161 83L0 112z" fill="#E8E4DE" stroke="#D1C8BD" />
            <path d="M35 102l122-56 142 44-128 65L35 102z" fill="#F4F1EC" stroke="#CFC7BD" />
            <path d="M76 90l56-26 82 26-59 31-79-31z" fill="#D6D0C7" stroke="#BFB5A9" />
            <path className="rp-intent-plane" d="M188 72l83 26v56l-87-31 4-51z" fill="#B27C4D" opacity="0.44" stroke="#B27C4D" />
            <path className="rp-intent-callout" d="M280 76h70M280 112h70M280 148h70" stroke="#B27C4D" opacity="0.75" />
            <g className="rp-intent-dimension">
              <path d="M167 57v92M259 88v92" stroke="#B27C4D" strokeWidth="1.7" strokeDasharray="5 5" />
              <path d="M171 45h84" stroke="#B27C4D" strokeWidth="2" />
              <path d="M171 45l8-5M171 45l8 5M255 45l-8-5M255 45l-8 5" stroke="#B27C4D" strokeWidth="2" />
              <text x="213" y="36" textAnchor="middle" fill="#8E5F38" fontSize="11" fontFamily="Montserrat" fontWeight="700">SETBACK SHIFT</text>
            </g>
            <text x="358" y="80" fill="#514840" fontSize="11" fontFamily="Montserrat">UNNECESSARY</text>
            <text x="358" y="96" fill="#514840" fontSize="11" fontFamily="Montserrat">FIRE SEPARATION</text>
            <text x="358" y="117" fill="#514840" fontSize="11" fontFamily="Montserrat">OVERSIZED</text>
            <text x="358" y="133" fill="#514840" fontSize="11" fontFamily="Montserrat">CORE</text>
            <text x="358" y="154" fill="#514840" fontSize="11" fontFamily="Montserrat">LOST FLOOR AREA</text>
          </g>
        </svg>
      );
    }

    return (
      <svg className="rp-card-visual-svg" viewBox="0 0 520 260" fill="none" aria-hidden="true">
        <g opacity="0.75">
          <path d="M38 190h310M64 162h310M91 134h310M118 106h310" stroke="#DED8D0" />
          <path d="M58 192l142-92M152 192l142-92M246 192l142-92" stroke="#DED8D0" />
        </g>
        <g transform="translate(58 42)">
          <path d="M0 121l211-75 211 72-215 88L0 121z" fill="#E8E4DE" stroke="#D1C8BD" />
          <path d="M45 117l161-56 150 50-166 67-145-61z" fill="#F5F2ED" stroke="#CBC2B8" />
          <path className="rp-copper-fill" d="M210 66l107 36-111 44-104-38 108-42z" fill="#B27C4D" opacity="0.36" stroke="#B27C4D" />
          <g className="rp-value-grid">
            <path d="M78 118h220M78 136h220M78 154h220M78 172h220" stroke="#BEB4A8" />
            <path d="M98 110v68M120 102v76M142 94v84M164 88v90M186 82v96M208 76v102M230 84v94M252 92v78M274 100v62" stroke="#BEB4A8" />
          </g>
          <path className="rp-value-sweep" d="M105 116l104-41 108 36-111 45-101-40z" stroke="#F4E1C7" strokeWidth="3" opacity="0" />
        </g>
        <g className="rp-loss-badge" transform="translate(380 106)">
          <rect width="98" height="76" rx="6" fill="#FBF8F4" stroke="#B27C4D" />
          <text x="49" y="25" textAnchor="middle" fill="#B27C4D" fontSize="14" fontFamily="Montserrat" fontWeight="700">NLA LOST</text>
          <text x="49" y="52" textAnchor="middle" fill="#9B6742" fontSize="28" fontFamily="Montserrat" fontWeight="800">285 m²</text>
          <text x="49" y="68" textAnchor="middle" fill="#9B6742" fontSize="12" fontFamily="Montserrat" fontWeight="700">PER LEVEL</text>
        </g>
      </svg>
    );
  };

  return (
    <section
      data-screen-label="01c The Real Problem"
      className="section-fit real-problem-section relative bg-off-white py-24 md:py-28"
    >
      <div className="max-w-[1280px] mx-auto px-6 md:px-10 lg:px-16">
        <div className="section-fit-header max-w-[820px]">
          <div className="zaj-fade-up font-heading text-[11px] tracking-[0.32em] text-copper">
            THE REAL PROBLEM
          </div>
          <span className="zaj-rule-grow mt-5 mb-7 copper-rule" style={{ animation: 'none' }} />
          <h2 className="section-fit-title zaj-words font-heading font-bold text-charcoal text-3xl md:text-4xl lg:text-[44px] tracking-[-0.01em] leading-[1.1]">
            Fire engineering shouldn't slow your project down<br/>
            <span className="text-copper-deep">— or quietly take value away from it.</span>
          </h2>
          <p className="section-fit-copy zaj-fade-up mt-7 max-w-[640px] text-[16px] leading-[1.7] text-charcoal/75">
            Most projects don't fail compliance — they fail to defend design intent and commercial outcomes
            inside the compliance conversation.
          </p>
        </div>

        <div className="section-fit-body real-problem-grid zaj-stagger mt-14 grid md:grid-cols-3 gap-5 lg:gap-6">
          {cards.map((c, i) => (
            <article
              key={c.n}
              className="real-problem-card zaj-fade-up group"
              style={{ '--rp-i': i }}
            >
              <div className="rp-card-glow" aria-hidden="true" />
              <div className="rp-card-head">
                <span className="rp-card-num">{c.n}</span>
                <span className="rp-card-divider" />
                <span className="rp-card-icon">{renderIcon(c.icon)}</span>
                <h3>{c.title}</h3>
              </div>
              <div className="rp-card-visual">
                {renderVisual(c.visual)}
              </div>
              <span className="rp-card-rule" />
              <p>{c.body}</p>
            </article>
          ))}
        </div>

        <div className="real-problem-strip section-fit-secondary">
          {valueStrip.map((item) => (
            <div key={item.label} className="real-problem-strip-item">
              <span>{renderIcon(item.icon)}</span>
              <strong>{item.label}</strong>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========== PERFORMANCE SOLUTIONS — Interactive cutaway w/ tabs =========== */
/* Data-driven: each tab carries its own master image + cases (hotspot,
   copy, image). Commercial uses the existing tower cutaways (1–4); Houses &
   Dwellings use the residential cutaways (21–24). */
const PERFORMANCE_TABS = [
  {
    id: 'commercial',
    label: 'Commercial Buildings',
    masterImage: 'assets/beigman/1.png',
    masterAlt: 'Architectural cutaway of a Melbourne tower showing fire engineering analysis zones.',
    cases: [
      {
        id: 'glazed', num: '01',
        hotspot: { x: '24%', y: '36%' }, side: 'right',
        img: 'assets/beigman/2.png',
        alt: 'Cutaway building view highlighting a glazed fire separation strategy with copper technical overlays.',
        title: 'Glazed fire separation',
        short: 'Protect transparency where prescriptive compliance would force solid construction.',
        body: 'Performance-based strategies can help retain glazed architectural intent while demonstrating an equivalent fire safety outcome through targeted protection, separation logic and technical justification.',
        cta: 'Explore glazed strategies',
      },
      {
        id: 'travel', num: '02',
        hotspot: { x: '50%', y: '60%' }, side: 'right',
        img: 'assets/beigman/3.png',
        alt: 'Cutaway building view showing internal travel paths and egress strategy highlighted in copper.',
        title: 'Extended travel distance',
        short: 'Make complex layouts work without compromising safety or spatial quality.',
        body: 'Beigman evaluates occupant movement, exit availability and tenability conditions to support practical egress strategies where standard travel distance limits restrict the design.',
        cta: 'Review egress constraints',
      },
      {
        id: 'frl', num: '03',
        hotspot: { x: '32%', y: '48%' }, side: 'left',
        img: 'assets/beigman/4.png',
        alt: 'Cutaway building view highlighting structural fire resistance strategy and selected building elements.',
        title: 'FRL reduction',
        short: 'Avoid unnecessary fire-rating burden while maintaining a defensible safety strategy.',
        body: 'Beigman assesses fire exposure, structural risk and performance requirements to support efficient fire resistance strategies where a conservative approach would add unnecessary construction burden.',
        cta: 'Assess fire-rating strategy',
      },
    ],
  },
  {
    id: 'housing',
    label: 'Houses & Dwellings',
    intro: 'This tab focuses on BCA Volume 2 houses, townhouses and dual occupancy projects.',
    masterImage: 'assets/beigman/21.png',
    masterAlt: 'Residential architectural cutaway showing a townhouse with fire engineering analysis zones.',
    cases: [
      {
        id: 'boundary', num: '01',
        hotspot: { x: '30%', y: '54%' }, side: 'right',
        img: 'assets/beigman/22.png',
        alt: 'Residential cutaway highlighting windows close to the property boundary with copper technical overlays.',
        title: 'Boundary openings',
        short: 'Keep natural light where boundary rules restrict openings.',
        body: 'Performance-based assessment for windows and glazed openings close to property boundaries, helping retain design intent while addressing fire exposure and separation requirements.',
        cta: 'Review boundary openings',
      },
      {
        id: 'eaves', num: '02',
        hotspot: { x: '48%', y: '22%' }, side: 'left',
        img: 'assets/beigman/23.png',
        alt: 'Residential cutaway highlighting eaves, roof cavity and external wall junctions with copper technical overlays.',
        title: 'Eaves / roof cavity',
        short: 'Resolve roof-edge details before they become approval issues.',
        body: 'Fire engineering strategies for eaves, roof cavities and external wall junctions where residential construction details interact with boundary setbacks and fire separation requirements.',
        cta: 'Assess roof-edge conditions',
      },
      {
        id: 'party', num: '03',
        hotspot: { x: '52%', y: '46%' }, side: 'left',
        img: 'assets/beigman/24.png',
        alt: 'Residential cutaway highlighting party wall and fire separation strategy between dwellings.',
        title: 'Party wall separation',
        short: 'Clarify fire separation between dwellings.',
        body: 'Performance-based support for party walls, roof cavity interfaces and separation details in townhouses, duplexes and dual occupancy projects.',
        cta: 'Review dwelling separation',
      },
    ],
  },
];

/* Thin schematic tab icons — same line-icon language as Selected Projects. */
function PerfTabIcon({ id, className = '' }) {
  const common = {
    width: 15, height: 15, viewBox: '0 0 24 24',
    fill: 'none', stroke: 'currentColor', strokeWidth: 1.3,
    strokeLinecap: 'round', strokeLinejoin: 'round',
    className, 'aria-hidden': true,
  };
  if (id === 'commercial') {  // skyscraper trio
    return (
      <svg {...common}>
        <path d="M3.5 20.5h17" />
        <path d="M6 20.5V9l4-2v13.5" />
        <path d="M14 20.5V4l4 2v14.5" />
        <path d="M8 12h0 M8 15h0 M16 9h0 M16 13h0 M16 17h0" />
      </svg>
    );
  }
  if (id === 'housing') {     // house with pitched roof
    return (
      <svg {...common}>
        <path d="M3.5 11 12 4l8.5 7" />
        <path d="M5.5 10v10h13V10" />
        <path d="M10 20v-5h4v5" />
      </svg>
    );
  }
  return null;
}

/* Reusable interactive cutaway section. Kept exported as ValueProp so the
   existing app.jsx wiring is untouched. */
function InteractiveCutawaySection({
  eyebrow = 'PERFORMANCE SOLUTIONS',
  headline = 'Performance Solutions in action',
  subheadline = 'Explore how performance-based fire engineering can unlock design constraints across commercial buildings and residential projects.',
  tabs = PERFORMANCE_TABS,
}) {
  // activeTabId drives the tab UI (immediate); displayTabId drives the content,
  // swapped mid-transition so the outgoing image can blur/fade out first.
  const [activeTabId, setActiveTabId]   = React.useState(tabs[0].id);
  const [displayTabId, setDisplayTabId] = React.useState(tabs[0].id);
  const [tabTrans, setTabTrans] = React.useState('in');   // 'out' | 'in'
  const [active, setActive] = React.useState(null);       // active case id
  const [mobileOpen, setMobileOpen] = React.useState(null);

  // Sliding "pill" indicator that wraps the active tab label (same as Selected Projects).
  const tablistRef = React.useRef(null);
  const tabLabelRefs = React.useRef({});
  const [pill, setPill] = React.useState(null);

  React.useLayoutEffect(() => {
    const bar = tablistRef.current;
    const lab = tabLabelRefs.current[activeTabId];
    if (!bar || !lab) return;
    const padX = 14, padY = 9;
    const measure = () => {
      const b = bar.getBoundingClientRect();
      const l = lab.getBoundingClientRect();
      setPill({
        left:   l.left - b.left + bar.scrollLeft - padX,
        top:    l.top  - b.top  - padY,
        width:  l.width  + padX * 2,
        height: l.height + padY * 2,
      });
    };
    measure();
    const raf = requestAnimationFrame(measure);
    if (document.fonts && document.fonts.ready) document.fonts.ready.then(measure);
    window.addEventListener('resize', measure);
    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', measure); };
  }, [activeTabId]);

  const tab       = tabs.find(t => t.id === displayTabId) || tabs[0];
  const cases     = tab.cases;
  const activeCase = cases.find(c => c.id === active) || null;

  const toggle = (id) => setActive(prev => (prev === id ? null : id));
  const close  = () => setActive(null);

  // Switching tabs resets the active case + mobile accordion.
  const onTab = (id) => {
    if (id === activeTabId) return;
    setActiveTabId(id);
    setActive(null);
    setMobileOpen(null);
  };

  // Tab change → blur/fade the current content out, swap, then focus-in
  // (same rack-focus transition used between categories in Selected Projects).
  React.useEffect(() => {
    if (activeTabId === displayTabId) return;
    setTabTrans('out');
    const t = setTimeout(() => {
      setDisplayTabId(activeTabId);
      setTabTrans('in');
    }, 420);
    return () => clearTimeout(t);
  }, [activeTabId, displayTabId]);

  // Arrow-key navigation between tabs (roving focus).
  const onTabKey = (e) => {
    if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
    e.preventDefault();
    const idx  = tabs.findIndex(t => t.id === activeTabId);
    const dir  = e.key === 'ArrowRight' ? 1 : -1;
    const next = tabs[(idx + dir + tabs.length) % tabs.length];
    onTab(next.id);
    requestAnimationFrame(() => document.getElementById(`pstab-${next.id}`)?.focus());
  };

  // Escape closes the active panel.
  React.useEffect(() => {
    if (!active) return;
    const fn = (e) => { if (e.key === 'Escape') close(); };
    window.addEventListener('keydown', fn);
    return () => window.removeEventListener('keydown', fn);
  }, [active]);

  return (
    <section
      id="performance"
      data-screen-label="Performance Story"
      className="section-fit relative bg-off-white py-24 md:py-28"
    >
      <div className="max-w-[1280px] mx-auto px-6 md:px-10 lg:px-16">

        {/* Header */}
        <div className="section-fit-header mb-8 md:mb-10 max-w-[760px]">
          <div className="zaj-fade-up font-heading text-[11px] tracking-[0.32em] text-copper">
            {eyebrow}
          </div>
          <span className="zaj-rule-grow mt-5 mb-7 copper-rule" style={{ animation: 'none' }} />
          <h2 className="section-fit-title zaj-words font-heading font-bold text-charcoal text-3xl md:text-4xl lg:text-[46px] tracking-[-0.01em] leading-[1.05]">
            {headline}
          </h2>
          <p className="section-fit-copy zaj-fade-up mt-5 text-[15px] md:text-[16px] leading-[1.7] text-charcoal/70 max-w-[620px]">
            {subheadline}
          </p>
        </div>

        {/* Tabs */}
        <div
          ref={tablistRef}
          role="tablist"
          aria-label="Performance solution categories"
          className="zaj-fade-up relative flex items-center gap-1 sm:gap-3 mb-6 md:mb-8 pb-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
        >
          <span
            className="pj-pill"
            aria-hidden="true"
            style={pill
              ? { opacity: 1, left: pill.left, top: pill.top, width: pill.width, height: pill.height }
              : { opacity: 0 }}
          />
          {tabs.map((t) => {
            const isSel = t.id === activeTabId;
            return (
              <button
                key={t.id}
                id={`pstab-${t.id}`}
                role="tab"
                type="button"
                aria-selected={isSel}
                aria-controls="ps-tabpanel"
                tabIndex={isSel ? 0 : -1}
                onClick={() => onTab(t.id)}
                onKeyDown={onTabKey}
                className={`relative z-10 shrink-0 px-3 py-3 font-heading text-[11px] md:text-[12px] tracking-[0.2em] uppercase whitespace-nowrap transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-copper ${isSel ? 'text-copper-deep' : 'text-charcoal/45 hover:text-charcoal/70'}`}
              >
                <span
                  ref={(el) => { tabLabelRefs.current[t.id] = el; }}
                  className="inline-flex items-center gap-2"
                >
                  <PerfTabIcon id={t.id} className={`shrink-0 transition-colors ${isSel ? 'text-copper' : 'text-charcoal/40'}`} />
                  {t.label}
                </span>
              </button>
            );
          })}
        </div>

        <div role="tabpanel" id="ps-tabpanel" aria-labelledby={`pstab-${activeTabId}`}>

          {/* Optional tab intro */}
          {tab.intro && (
            <p className="zaj-fade-up mb-6 text-[14px] md:text-[15px] leading-[1.6] text-charcoal/55 max-w-[560px]">
              {tab.intro}
            </p>
          )}

          {/* ── DESKTOP — large unified image with overlaid index panel ── */}
          <div className="section-fit-main hidden md:block zaj-fade-scale zaj-mouse-stage" data-mouse-strength="0.012">
            <div key={displayTabId} className={`ps-focus-grid ${tabTrans === 'out' ? 'is-blurring' : ''}`}>
            <div
              className={`ps-scene relative aspect-[16/9] ${active ? 'has-active' : ''}`}
              role="region"
              aria-label={`${tab.label} — cutaway`}
            >
              {/* Master image */}
              <div className={`ps-img zaj-mouse-px ${!active ? 'is-active' : ''}`} aria-hidden={!!active} data-mouse-depth="0.5">
                <img src={tab.masterImage} alt={tab.masterAlt} loading="eager" decoding="async" />
              </div>

              {/* Case images (crossfade) */}
              {cases.map(c => (
                <div key={c.id} className={`ps-img ${active === c.id ? 'is-active' : ''}`} aria-hidden={active !== c.id}>
                  <img src={c.img} alt={c.alt} loading="lazy" decoding="async" />
                </div>
              ))}

              {/* Numbered markers — anchored by % so they never drift on resize */}
              {cases.map(c => {
                const isOn = active === c.id;
                return (
                  <button
                    key={c.id}
                    type="button"
                    style={{ left: c.hotspot.x, top: c.hotspot.y }}
                    onClick={() => toggle(c.id)}
                    aria-pressed={isOn}
                    aria-label={`${c.num} — ${c.title}`}
                    className={`absolute z-20 grid h-7 w-7 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full font-heading text-[10px] tabular-nums transition-all duration-300 ease-[cubic-bezier(0.05,0.7,0.1,1)] focus:outline-none focus-visible:ring-2 focus-visible:ring-copper ${
                      isOn
                        ? 'bg-copper text-off-white scale-110 shadow-[0_0_0_5px_rgba(178,124,77,0.18)]'
                        : active
                          ? 'bg-off-white/85 text-charcoal/70 border border-copper/40 opacity-50 hover:opacity-100 hover:scale-110'
                          : 'bg-off-white/90 text-charcoal border border-copper/60 hover:scale-110 hover:border-copper hover:text-copper-deep'
                    }`}
                  >
                    {c.num}
                  </button>
                );
              })}

              {/* Index panel — overlaid on the image's blank area (right). Glass
                 surface so it feels unified; sits clear of the building. */}
              <div className="absolute right-[3.5%] top-1/2 z-30 w-[38%] max-w-[330px] max-h-[86%] -translate-y-1/2 overflow-y-auto rounded-[14px] border border-charcoal/10 bg-off-white/80 p-5 shadow-[0_24px_60px_-22px_rgba(15,27,42,0.4)] backdrop-blur-md [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
                <div className="font-heading text-[10px] tracking-[0.3em] text-charcoal/45 mb-3">
                  {active ? `CASE ${activeCase.num} · ${tab.label.toUpperCase()}` : 'SELECT A SOLUTION'}
                </div>

                <div className="border-t border-charcoal/12">
                  {cases.map(c => {
                    const isOn = active === c.id;
                    return (
                      <div key={c.id} className="border-b border-charcoal/12">
                        <button
                          type="button"
                          onClick={() => toggle(c.id)}
                          aria-expanded={isOn}
                          className="group w-full text-left py-3 flex items-start gap-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
                        >
                          <span className={`font-heading text-[11px] tabular-nums tracking-[0.18em] mt-0.5 transition-colors ${isOn ? 'text-copper' : 'text-charcoal/40 group-hover:text-charcoal/70'}`}>
                            {c.num}
                          </span>
                          <span className="flex-1 min-w-0">
                            <span className={`block font-heading font-semibold text-[14px] leading-tight tracking-tight transition-colors ${isOn ? 'text-charcoal' : 'text-charcoal/70 group-hover:text-charcoal'}`}>
                              {c.title}
                            </span>
                            <span className="block mt-1 text-[12px] leading-[1.5] text-charcoal/55">
                              {c.short}
                            </span>
                          </span>
                        </button>
                        {/* Expanding detail (outside the button so the CTA is a real link) */}
                        <div
                          className="grid transition-all duration-500 ease-[cubic-bezier(0.05,0.7,0.1,1)]"
                          style={{ gridTemplateRows: isOn ? '1fr' : '0fr', opacity: isOn ? 1 : 0 }}
                          aria-hidden={!isOn}
                        >
                          <div className="overflow-hidden">
                            <div className="pl-[1.6rem] pb-4">
                              <p className="text-[12.5px] leading-[1.6] text-charcoal/70">{c.body}</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
            </div>

            {/* CTA below the image */}
            <div className="mt-6 flex justify-end">
              <a href="#contact" className="morph-btn inline-flex items-center gap-3 text-charcoal/70 hover:text-copper font-heading text-[11px] tracking-[0.28em] transition-colors">
                <span className="morph-label">
                  <span>DISCUSS A PERFORMANCE SOLUTION</span>
                  <span>DISCUSS A PERFORMANCE SOLUTION</span>
                </span>
                <span className="w-8 h-px bg-current" />
              </a>
            </div>
          </div>

          {/* ── MOBILE accordion ── */}
          <div className="md:hidden">
            <img
              src={tab.masterImage}
              alt={tab.masterAlt}
              className="zaj-fade-up w-full rounded-[var(--r-lg)] mb-8 object-contain bg-[#F0EDE9]"
              loading="lazy"
              decoding="async"
              style={{ aspectRatio: '16/9' }}
            />
            <div className="ps-accordion border-t border-charcoal/10">
              {cases.map(c => {
                const isOpen = mobileOpen === c.id;
                return (
                  <div key={c.id} className={`ps-accordion-item ${isOpen ? 'is-open' : ''}`}>
                    <button
                      type="button"
                      className="ps-accordion-btn"
                      onClick={() => setMobileOpen(prev => (prev === c.id ? null : c.id))}
                      aria-expanded={isOpen}
                    >
                      <div>
                        <span className="font-heading text-[10px] tracking-[0.28em] text-copper block mb-1">
                          {c.num} · {tab.label.toUpperCase()}
                        </span>
                        <span className="font-heading font-semibold text-[17px] tracking-tight text-charcoal">
                          {c.title}
                        </span>
                      </div>
                      <svg className="ps-accordion-chevron ml-4 shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <path d="M5 7.5 L10 12.5 L15 7.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    </button>
                    <div className="ps-accordion-body">
                      <div className="ps-accordion-inner pb-5">
                        <img src={c.img} alt={c.alt} className="ps-accordion-img" loading="lazy" decoding="async" />
                        <p className="text-[14px] leading-[1.65] text-charcoal/80 mb-3 italic">{c.short}</p>
                        <p className="text-[13.5px] leading-[1.65] text-charcoal/65">{c.body}</p>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
            <div className="mt-10">
              <a href="#contact" className="morph-btn m3-fill-btn inline-flex items-center gap-4 px-6 py-4 border border-copper-deep/70 text-copper-deep font-heading font-semibold text-[11px] tracking-[0.28em]">
                <span className="morph-label relative z-10">
                  <span>DISCUSS A PERFORMANCE SOLUTION</span>
                  <span>DISCUSS A PERFORMANCE SOLUTION</span>
                </span>
                <svg width="18" height="8" viewBox="0 0 18 8" fill="none" className="morph-arrow relative z-10">
                  <path d="M0 4 H16 M12 1 L16 4 L12 7" stroke="currentColor" strokeWidth="1.3"/>
                </svg>
              </a>
            </div>
          </div>

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

/* Kept as ValueProp for existing wiring (app.jsx). */
function ValueProp() {
  return <InteractiveCutawaySection />;
}

/* =========== WHO WE HELP =========== */
function WhoWeHelp() {
  const audiences = [
    {
      h: "Architects",
      b: "Protect the design language and detailing that define the project — even on schemes that depart from prescriptive code.",
    },
    {
      h: "Developers",
      b: "Recover usable / lettable area, reduce approval risk and keep delivery programs on track.",
    },
    {
      h: "Project teams",
      b: "Have a fire engineer who briefs surveyors and stakeholders directly, and stays engaged through documentation and CA.",
    },
    {
      h: "Building Surveyors",
      b: "Receive clear, well-documented performance-based submissions backed by transparent modelling and reasoning.",
    },
  ];
  return (
    <section
      id="who"
      data-screen-label="05 Who We Help"
      className="section-fit relative bg-off-white py-24 md:py-32"
    >
      <div className="max-w-[1280px] mx-auto px-6 md:px-10 lg:px-16">
        <div className="section-fit-header flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-16">
          <div>
            <div className="zaj-fade-up font-heading text-[11px] tracking-[0.32em] text-copper">
              WHO WE HELP
            </div>
            <span className="zaj-rule-grow mt-5 mb-7 copper-rule" style={{ animation: 'none' }} />
            <h2 className="section-fit-title zaj-words font-heading font-bold text-charcoal text-3xl md:text-4xl lg:text-[44px] tracking-[-0.01em] leading-[1.1] max-w-[680px]">
              Engineering support for the people<br/>
              <span className="text-copper-deep">delivering the project.</span>
            </h2>
          </div>
          <p className="section-fit-copy zaj-fade-up text-charcoal/70 max-w-[340px] text-[15px] leading-relaxed">
            We work alongside the disciplines responsible for design, approval and delivery — not around them.
          </p>
        </div>

        <div className="section-fit-card-grid zaj-stagger grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-charcoal/12 border border-charcoal/12 r-lg overflow-hidden">
          {audiences.map((a, i) => (
            <article
              key={a.h}
              className="zaj-fade-up group bg-off-white p-8 md:p-9 hover:bg-white transition-colors"
            >
              <div className="font-heading text-[10px] tracking-[0.28em] text-copper tabular-nums">
                0{i + 1} / 04
              </div>
              <h3 className="mt-6 font-heading font-bold text-charcoal text-xl md:text-2xl tracking-tight leading-tight group-hover:text-copper-deep transition-colors">
                {a.h}
              </h3>
              <p className="mt-4 text-[14px] leading-[1.7] text-charcoal/75">
                {a.b}
              </p>
              <div className="mt-8 flex items-center gap-3 text-charcoal/45 group-hover:text-copper transition-all duration-500">
                <span className="w-8 h-px bg-current group-hover:w-14 transition-all duration-500" />
                <span className="font-heading text-[10px] tracking-[0.28em]">HOW WE HELP</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========== ABOUT ME — Reza Abbassi split-screen =========== */
function AboutMe() {
  const sectionRef = React.useRef(null);
  const imageRef   = React.useRef(null);
  // Focus (serious) photo is optional — fall back to the base photo if missing
  // so the section never breaks while the asset is still being produced.
  const [focusOk, setFocusOk] = React.useState(true);

  // Subtle vertical parallax on the image as the section moves through view.
  React.useEffect(() => {
    let raf = 0;
    const update = () => {
      const node = sectionRef.current;
      const img  = imageRef.current;
      if (!node || !img) { raf = 0; return; }
      const rect = node.getBoundingClientRect();
      const vh   = window.innerHeight;
      // -0.5 (section below view) → 0.5 (section above view)
      const p = (rect.top + rect.height / 2 - vh / 2) / (vh + rect.height);
      img.style.transform = `translate3d(0, ${(p * 56).toFixed(2)}px, 0)`;
      raf = 0;
    };
    const schedule = () => { if (!raf) raf = requestAnimationFrame(update); };
    update();
    window.addEventListener('scroll', schedule, { passive: true });
    window.addEventListener('resize', schedule);
    return () => {
      window.removeEventListener('scroll', schedule);
      window.removeEventListener('resize', schedule);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <section
      id="about"
      ref={sectionRef}
      data-screen-label="About Me"
      className="section-fit relative bg-[#0F1B2A] overflow-hidden py-20 md:py-28"
    >
      <div className="max-w-[1280px] mx-auto px-6 md:px-10 lg:px-16">
        <div className="grid md:grid-cols-2 items-center gap-10 md:gap-0">

          {/* ── Left: imagery with parallax + hover crossfade ── */}
          <div className="zaj-fade-up group relative md:pr-6">
            <div className="relative aspect-[4/5] sm:aspect-[3/4] md:aspect-[4/5] overflow-hidden rounded-[16px] shadow-2xl ring-1 ring-white/10">
              {/* Parallax layer (slightly oversized to hide the drift edges) */}
              <div
                ref={imageRef}
                className="absolute inset-0 -top-[8%] h-[116%] will-change-transform"
              >
                {/* Base photo — smiling */}
                <img
                  src="assets/Photo_Reza_Abbassi.jpg"
                  alt="Reza Abbassi, Director & Chartered Fire Safety Engineer"
                  className="absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-[cubic-bezier(0.2,0,0,1)] group-hover:opacity-0"
                  loading="lazy"
                  decoding="async"
                  draggable="false"
                />
                {/* Focus photo — serious. Hidden gracefully if not yet available. */}
                {focusOk && (
                  <img
                    src="assets/Reza_Abbassi 2.png"
                    alt=""
                    aria-hidden="true"
                    className="absolute inset-0 h-full w-full object-cover opacity-0 transition-opacity duration-700 ease-[cubic-bezier(0.2,0,0,1)] group-hover:opacity-100"
                    loading="lazy"
                    decoding="async"
                    draggable="false"
                    onError={() => setFocusOk(false)}
                  />
                )}
              </div>
              {/* Tonal scrim for depth + legibility against the dark bg */}
              <div className="pointer-events-none absolute inset-0 bg-gradient-to-tr from-[#0F1B2A]/55 via-transparent to-transparent" />
            </div>
          </div>

          {/* ── Right: glassmorphic bio card (overlaps image on desktop) ── */}
          <div className="zaj-fade-up relative z-10 md:-ml-16 lg:-ml-28">
            <div className="bg-midnight/30 backdrop-blur-md border border-white/10 p-8 md:p-12 rounded-[16px] shadow-2xl">
              <div className="font-heading text-copper text-[11px] tracking-[0.32em] uppercase mb-3">
                Reza Abbassi, PhD, CPEng, NER
              </div>
              <h2 className="font-heading font-bold text-white text-3xl md:text-4xl leading-tight mb-6">
                Director &amp; Chartered Fire Safety Engineer
              </h2>
              <p className="text-white/75 text-[16px] leading-[1.7] mb-4">
                With a strong technical background and a deep understanding of the building code,
                I develop unique and cost-effective fire engineering solutions that satisfy both
                the client's vision and regulatory authorities.
              </p>
              <p className="text-white/75 text-[16px] leading-[1.7] mb-8">
                My approach to solving complex problems was forged during my PhD in aerodynamic
                fluid mechanics, allowing me to bring an analytical and innovative perspective to
                the industry's most stringent fire safety challenges.
              </p>

              <a href="#contact" className="glass-btn glass-btn-copper zaj-lift">
                <span className="glass-btn-label" data-label="DISCUSS YOUR PROJECT WITH REZA">
                  <span>DISCUSS YOUR PROJECT WITH REZA</span>
                </span>
                <svg className="glass-btn-arrow" width="18" height="8" viewBox="0 0 18 8" fill="none" aria-hidden="true">
                  <path d="M0 4 H16 M12 1 L16 4 L12 7" stroke="currentColor" strokeWidth="1.4"
                        strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </a>
            </div>
          </div>

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

Object.assign(window, { HolisticApproach, ServicesSection, RealProblem, ValueProp, InteractiveCutawaySection, WhoWeHelp, AboutMe });