// site/case-studies.jsx — Case Studies page
const { useState: useStateCS } = React;

const CASE_STUDIES = [
  {
    img: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=1100&q=80&auto=format&fit=crop",
    alt: "Wealth planning",
    title: "Wealth Planning",
    summary: "Balancing full lifetime access to inherited capital with a tax-efficient legacy for the next generation.",
    challenge: "A client inherited substantial capital and faced a complex dilemma — she needed full flexible access to her wealth during her lifetime whilst ensuring a tax-efficient legacy was in place for her adult children.",
    solution: "We built a tailored financial roadmap that preserved her capital access, minimised her exposure to Income Tax, CGT and IHT, and secured a bulletproof generational wealth structure for her family.",
  },
  {
    img: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=1100&q=80&auto=format&fit=crop",
    alt: "A perfect home",
    title: "Finding Your Perfect Home",
    summary: "Securing a prestigious Belgravia property through a complex £3.7 million cross-charged facility.",
    challenge: "A client sought to acquire a high-value property in one of London's most prestigious postcodes — Belgravia. The transaction was complex, requiring a £3.7 million loan secured across two properties and expert coordination across multiple specialist teams.",
    solution: "We secured a £3.7 million facility against two properties on attractive terms, navigating the complexity with precision. The client successfully acquired their dream Belgravia property at a highly competitive price.",
  },
  {
    img: "https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=1100&q=80&auto=format&fit=crop",
    alt: "Business meeting",
    title: "Business Finance",
    summary: "A £420,000 working capital facility against a non-standard security structure, delivered on a two-week deadline.",
    challenge: "A growth-stage energy business required a £420,000 working capital facility against a complex, non-standard security structure — with an urgent two-week deadline to close.",
    solution: "We delivered a tailored facility within the client's timeline, applying a commercial and structured approach that secured the capital needed to drive the next phase of their business growth.",
  },
  {
    img: "https://images.unsplash.com/photo-1606787366850-de6330128bfc?w=1100&q=80&auto=format&fit=crop",
    alt: "Family planning",
    title: "Insurance — IHT Planning",
    summary: "Mitigating a significant Inheritance Tax liability across the seven-year look-back period.",
    challenge: "A client in his late 70s wished to gift the majority of his assets to his son but needed to mitigate a significant Inheritance Tax liability across the seven-year look-back period.",
    solution: "We structured a bespoke reducing term life insurance strategy across five staggered policies, aligned to the taper relief schedule — fully covering the IHT liability at the lowest possible cost.",
  },
  {
    img: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1100&q=80&auto=format&fit=crop",
    alt: "Investment analytics",
    title: "Investments Tailored",
    summary: "A tax-efficient portfolio across multiple asset classes delivering consistent double-digit returns over three years.",
    challenge: "A client held accounts across several private banks that focused purely on investment performance, overlooking critical tax wrappers and structures that could significantly reduce their tax liabilities.",
    solution: "We built a tailored, tax-efficient portfolio spanning cash, fixed income, diversified equities and commodities, delivering consistent double-digit returns over three years while minimising tax impact.",
  },
  {
    img: "https://images.unsplash.com/photo-1582407947304-fd86f028f716?w=1100&q=80&auto=format&fit=crop",
    alt: "Keys to a new home",
    title: "Mortgages — Solutions For All",
    summary: "A £3,000,000 refinance at 65% LTV that demanded specialist coordination to close.",
    challenge: "A high-value refinance at 65% LTV appeared straightforward on the surface, but presented several layers of complexity that required careful navigation and specialist expertise to resolve.",
    solution: "We successfully delivered a £3,000,000 refinance for our client, coordinating a specialist team across legal, valuation and finance to close a deal that others would have walked away from.",
  },
];

function CaseStudyCard({ cs }) {
  const [open, setOpen] = useStateCS(false);
  const pending = !cs.challenge && !cs.solution;
  return (
    <article className="svc-card cs-card">
      <EditorialPhoto src={cs.img} alt={cs.alt} ratio="16 / 10" />
      <div className="svc-body">
        <h3>{cs.title}</h3>
        <span className="svc-rule" aria-hidden="true"></span>
        <p>
          {cs.summary
            ? cs.summary
            : "Details of this engagement will be added here shortly."}
        </p>
        <div className="cs-actions">
          <button
            className="btn-gold-outline"
            onClick={() => setOpen((o) => !o)}
            aria-expanded={open}
          >
            {open ? "Show Less" : "Learn More"}
          </button>
        </div>
        {open && (
          <div className="cs-expand">
            <div>
              <h4>The Challenge</h4>
              {pending ? (
                <p className="cs-placeholder">[ Placeholder — content to be added ]</p>
              ) : (
                <p>{cs.challenge}</p>
              )}
            </div>
            <div>
              <h4>The Solution</h4>
              {pending ? (
                <p className="cs-placeholder">[ Placeholder — content to be added ]</p>
              ) : (
                <p>{cs.solution}</p>
              )}
            </div>
          </div>
        )}
      </div>
    </article>
  );
}

function CaseStudiesPage() {
  const gridRef = useReveal();
  return (
    <div data-screen-label="04 Case Studies">
      <PageHeading
        eyebrow="In practice"
        title="Case Studies"
        sub="Selected engagements across the practice."
      />

      <section className="section-navy" data-comment-anchor="case-studies-grid">
        <div className="container">
          <div ref={gridRef} className="svc-grid stagger-grid">
            {CASE_STUDIES.map((cs) => (
              <CaseStudyCard key={cs.title} cs={cs} />
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

window.CaseStudiesPage = CaseStudiesPage;