/* About page. Re-uses Header, Footer, ImagePlaceholder, BtnPrimary, BtnSecondary,
   TextLinkCTA and useReveal from sections.jsx. Voice rules in 02-brand-voice.md
   are non-negotiable; re-read before editing any line of copy. */

/* ---------------------------------------------------------------------------
   1 — Hero
   --------------------------------------------------------------------------- */
function AboutHero({ bg = '#FFFFFF', accent = '#2563EB' }) {
  return (
    <section className="relative pt-32 lg:pt-40 pb-20 lg:pb-28 overflow-hidden bg-white" aria-labelledby="about-h1">
      <div
        className="absolute inset-0 bg-cover bg-no-repeat bg-[position:right_center]"
        style={{ backgroundImage: "url('assets/aboutUsBG.webp')" }}
        aria-hidden="true"
      />
      <div className="absolute inset-0 bg-white/25" aria-hidden="true" />
      <div className="absolute inset-0 bg-gradient-to-r from-white/95 from-20% via-white/55 to-transparent" aria-hidden="true" />
      <div className="relative max-w-container mx-auto px-5 sm:px-8">
        <div className="max-w-[820px]">
          <p className="eyebrow reveal mb-5" style={{ color: accent }}>About Target Applications</p>
          <h1 id="about-h1" className="h1 reveal" style={{ transitionDelay: '60ms' }}>
            The company behind Colleague Pulse. Working in UK social housing since 2008.
          </h1>
          <p className="mt-7 body-lg font-medium text-slate-900 max-w-[720px] reveal" style={{ transitionDelay: '120ms', textShadow: '0 1px 0 rgba(255,255,255,0.6)' }}>
            We are a British software company with a single focus: employee engagement for UK social
            landlords. Founded in 2008, we build the platform, sell it ourselves, and support every
            customer directly, and we have done it the same way for over fifteen years.
          </p>
          <div className="mt-9 flex flex-col sm:flex-row gap-3 sm:gap-4 reveal" style={{ transitionDelay: '180ms' }}>
            <BtnPrimary href="Book a demo.html" accent>Let's talk</BtnPrimary>
            <BtnSecondary href="index.html" icon={<IconArrowLeft size={16} />}>Back to home</BtnSecondary>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------------------------------------------------
   2 — The story (continuous, five voices stacked)
   ---------------------------------------------------------------------------
   One narrative section. Johnathan opens with the origin; Laura, Dave, Boris
   and Billy continue it. Each colleague gets a circular portrait alongside
   their words, with the photo alternating left and right so the page reads
   like a piece of editorial, not five separate profiles. */
const STORY = [
  {
    name: 'Johnathan Briggs',
    role: 'CEO and founder',
    image: 'assets/Johnathan_profile100.jpg',
    alt: 'Johnathan Briggs, founder and CEO of Target Applications.',
    draftOwner: 'Johnathan Briggs',
    paragraphs: [
      'I founded Target Applications in 2008 because UK social housing deserved better software than the generic SaaS the sector was being sold. CX-Feedback came first, the tenant-engagement platform 110 UK social landlords now use to listen to the people who live in their homes.',
      'Year after year, the same HR Directors and Heads of People kept asking the same question. Can you do this for our staff? They were right to ask. We had spent ten years helping our customers listen to tenants properly. Their staff deserved the same care, and none of the off-the-shelf engagement tools out there were built for our sector.',
      'Colleague Pulse is the answer to that question. Same compliance posture, same Glasgow team, same support inbox. A different audience, and a product designed around them from the first line of code.',
    ],
    pullQuote: 'Ask the people who do the work. Then act on what they tell you.',
  },
  {
    name: 'Laura Chisholm',
    role: 'Data Protection Officer',
    image: 'assets/Laura.jpg',
    alt: 'Laura Chisholm, Data Protection Officer at Target Applications.',
    draftOwner: 'Laura Chisholm',
    paragraphs: [
      'Social housing handles two of the most sensitive data sets in the country: tenants on the outside, staff on the inside. UK GDPR is not paperwork to us; it is the design constraint we started from.',
      'Data protection is engineered directly into the Colleague Pulse platform. Security, confidentiality, and responsible data handling are fundamental design principles that shape how the platform is built, operated, and maintained.',
      'We employ sophisticated technical and organisational controls including granular permissions, encrypted data storage and transmission, comprehensive audit trails, secure infrastructure, controlled retention policies, and strict operational governance to safeguard customer data at all times.',
      'Our approach is designed to ensure that personal information remains secure, confidential, and appropriately controlled throughout its entire lifecycle.',
      'The platform is UK-built and EU-hosted.',
    ],
    pullQuote: 'Your data stays in the EU. The answers come from Glasgow.',
  },
  {
    name: 'Dave Eaves',
    role: 'Head of Development',
    image: 'assets/deaves.jpeg',
    alt: 'Dave Eaves, Head of Development at Target Applications.',
    draftOwner: 'Dave Eaves',
    paragraphs: [
      'Every other employee-engagement platform was built for tech companies and adapted to public-sector customers. Colleague Pulse was built for UK social housing from the first line of code.',
      'The application is being built from the ground up with social housing in mind. We understand the difficulties in getting the opinion of your colleagues when many of them are busy out in your communities delivering value to your tenants. Colleague Pulse has been built to communicate with everyone, whether they are in the office all the time, a hybrid worker, or out in the field.',
    ],
    pullQuote: 'We started from what housing associations really needed.',
  },
  {
    name: 'Boris Campan',
    role: 'Operations Manager',
    image: 'assets/Boris.jpeg',
    alt: 'Boris Campan, Head of Customer Service at Target Applications.',
    draftOwner: 'Boris Campan',
    paragraphs: [
      'The same support team that has kept 110 CX-Feedback customers happy for years now picks up the phone for Colleague Pulse. Unlimited phone support is included in every contract; there is no premium tier above it.',
      'We answer between 9am and 5pm, Monday to Friday, from Glasgow. The reason 98% of our customers renew every year is that they get a person on the phone when something needs to be sorted.',
    ],
    pullQuote: 'We pick up the phone because that is how we have always done it.',
  },
  {
    name: 'Joanne Lee',
    role: 'Head of Training',
    image: 'assets/jolee 1.jpg',
    alt: 'Joanne Lee, Head of Training at Target Applications.',
    draftOwner: 'Joanne Lee',
    paragraphs: [
      'A new platform is only as useful as the team using it. Every Colleague Pulse customer gets onboarding sessions, a walk-through of the question library and refresher training whenever new people join the HR team.',
      'We sit on the call when an HR team designs its first survey, and again when the first results land. Knowing how to click the buttons is the easy bit. Reading what the answers are telling you, and acting on it, is the part we help with.',
    ],
    pullQuote: 'We will fully train you, but after that we are here to help you whenever you need our support.',
  },
  {
    name: 'Billy Gray',
    role: 'Product Manager',
    image: 'assets/Billy2.png',
    alt: 'Billy Gray in a meeting room in the Glasgow office, whiteboard behind him, mid-conversation.',
    draftOwner: 'Billy Gray',
    paragraphs: [
      'Every quarter, our customers tell us what they want next. We listen, we prioritise, we ship. The features in Colleague Pulse exist today because a Head of People at a housing association asked for them, or because a Chief Executive needed them for a board paper.',
      'We do not run beta programmes for the sake of running them. We ship what helps.',
    ],
    pullQuote: 'Every feature on the platform exists because a customer asked for it.',
  },
];

function StoryBlock() {
  return (
    <section className="pt-12 lg:pt-16 pb-24 lg:pb-32 bg-white" aria-label="The story from our team">
      <div className="max-w-container mx-auto px-5 sm:px-8">
        <div className="max-w-[1080px] mx-auto">
          {STORY.map((person, i) => (
            <StoryRow key={person.name} person={person} index={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

function StoryRow({ person, index }) {
  const imageLeft = index % 2 === 0;
  const isLast = index === STORY.length - 1;
  // DRAFT — paragraphs below are drafts to confirm with the named colleague.
  return (
    <article
      className={`reveal grid lg:grid-cols-12 gap-8 lg:gap-14 items-center ${isLast ? '' : 'pb-16 lg:pb-24 mb-16 lg:mb-24 border-b border-slate-200'}`}
    >
      <div className={`lg:col-span-4 flex flex-col items-center text-center ${imageLeft ? 'lg:order-1' : 'lg:order-2'}`}>
        <Portrait person={person} />
        <p className="mt-5 text-[13px] uppercase tracking-[0.12em] font-semibold text-blue-600">
          {person.name}
        </p>
        <p className="mt-1 text-[15px] text-slate-500">{person.role}</p>
      </div>

      <div className={`lg:col-span-8 ${imageLeft ? 'lg:order-2' : 'lg:order-1'}`}>
        {person.paragraphs.map((para, idx) => (
          /* DRAFT — to confirm with the named colleague above */
          <p key={idx} className={`body-lg ${idx === 0 ? '' : 'mt-5'}`}>{para}</p>
        ))}

        <figure className="mt-8 border-l-4 border-blue-600 pl-5">
          {/* DRAFT — to confirm with the named colleague above */}
          <blockquote className="text-[22px] sm:text-[24px] leading-snug font-semibold text-slate-900 tracking-tight">
            {person.pullQuote}
          </blockquote>
        </figure>
      </div>
    </article>
  );
}

function Portrait({ person }) {
  const size = 'h-28 w-28 sm:h-32 sm:w-32 lg:h-32 lg:w-32 xl:h-36 xl:w-36';
  if (person.image) {
    return (
      <figure className={`${size} rounded-full overflow-hidden border-4 border-white shadow-cardlg ring-1 ring-slate-200 bg-slate-100`}>
        <img
          src={person.image}
          alt={person.alt}
          className="w-full h-full object-cover"
          draggable="false"
        />
      </figure>
    );
  }
  // Placeholder: keep the circular silhouette so the row layout still reads
  // as a portrait while the real photo is pending.
  return (
    <figure
      role="img"
      aria-label={person.alt}
      className={`${size} rounded-full border border-slate-200 bg-gradient-to-br from-slate-100 to-slate-200 text-slate-500 flex flex-col items-center justify-center text-center px-5`}
    >
      <span className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/80 shadow-card mb-2">
        <IconCamera size={18} />
      </span>
      <span className="text-[11px] uppercase tracking-wider font-semibold opacity-70">Photograph</span>
      <span className="text-[12px] font-medium leading-snug mt-1 max-w-[80%]">{person.name}</span>
    </figure>
  );
}

/* ---------------------------------------------------------------------------
   5 — The company in plain numbers
   --------------------------------------------------------------------------- */
function CompanyNumbers() {
  const stats = [
    { num: '2008', cap: 'The year we started Target Applications. Two products since, both for UK social housing, both still trading.' },
    { num: '110', cap: 'UK social landlords use our sister platform, CX-Feedback. Around 30% of the market.' },
    { num: '98%', cap: 'Customer retention across our products, multi-year average.' },
  ];
  return (
    <section className="py-24 lg:py-32 bg-blue-50" aria-labelledby="company-h">
      <div className="max-w-container mx-auto px-5 sm:px-8">
        <div className="text-center reveal">
          <p className="eyebrow mb-4">The company</p>
          <h2 id="company-h" className="h2">Target Applications, in plain numbers.</h2>
        </div>
        <div className="mt-14 lg:mt-20 grid md:grid-cols-3 gap-12 lg:gap-10">
          {stats.map((s, i) => (
            <div key={s.num} className="text-center reveal" style={{ transitionDelay: `${i * 100}ms` }}>
              <div className="stat-num">{s.num}</div>
              <p className="mt-5 body-md text-slate-700 max-w-[34ch] mx-auto">{s.cap}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------------------------------------------------------------------
   App
   --------------------------------------------------------------------------- */
const TWEAK_DEFAULTS = window.TWEAK_DEFAULTS;

function App() {
  useReveal();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <>
      <Header />
      <main id="main">
        <AboutHero bg={t.heroBg} accent={t.heroAccent} />
        <StoryBlock />
        <CompanyNumbers />
        <HomeFinalCTA />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakColor
          label="Hero background"
          value={t.heroBg}
          options={['#FFFFFF', '#F8FAFC', '#EFF6FF', '#F1F5F9']}
          onChange={(v) => setTweak('heroBg', v)}
        />
        <TweakColor
          label="Eyebrow accent"
          value={t.heroAccent}
          options={['#2563EB', '#1D4ED8', '#0B3D91', '#0F172A']}
          onChange={(v) => setTweak('heroAccent', v)}
        />
      </TweaksPanel>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
