/* global React, Button, ContactForm, QuoteBreak */
const { useState } = React;

// ---- Hero ----------------------------------------------------------------
function HomeHero({ tweaks }) {
  const headlines = {
    leaving: 'Your customers are leaving. Let’s work out why.',
    keep: 'Fix the experience. Keep the customers.',
    quiet: 'Most of your churn is fixable. You just have to look.',
  };
  return (
    <section className="hero surface-bg motif motif-ripple" aria-labelledby="hero-h">
      <span className="section-num-bg" aria-hidden="true">01</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">CX consulting · Michael Howlett · Australia</div></div>
        <h1 id="hero-h" className="hero-h">{headlines[tweaks.headline] || headlines.leaving}</h1>
        <p className="hero-lede">
          Most businesses spend far more getting customers than keeping them. That is where the money leaks. I help businesses find out what is driving churn, where the experience is breaking down, and what to fix first. Not a 60-slide deck. A diagnosis and a place to start.
        </p>
        <div className="hero-cta">
          <Button href="#contact" variant="primary">Let’s talk</Button>
          <a className="hero-link" href="#what-i-do">See what I do <span aria-hidden="true">→</span></a>
        </div>
      </div>
    </section>
  );
}

// ---- The problem ---------------------------------------------------------
function HomeProblem() {
  return (
    <section className="surface-cream" aria-labelledby="problem-h">
      <span className="section-num-bg" aria-hidden="true">02</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">02 / The problem</div></div>
        <h2 id="problem-h">You probably already know something is wrong.</h2>
        <p>
          Churn is up, or conversion is down, or the NPS score keeps dropping and nobody can agree on what to do about it. You have theories. You might even have data. What you do not have is a clear picture of what is actually happening and where to start fixing it.
        </p>
        <p>
          That is the gap I work in.
        </p>
      </div>
    </section>
  );
}

// ---- Credibility ---------------------------------------------------------
function HomeCredibility() {
  return (
    <section className="surface-bg" aria-labelledby="cred-h">
      <span className="section-num-bg" aria-hidden="true">03</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">03 / Why me</div></div>
        <h2 id="cred-h">I have built this from the inside.</h2>
        <p>
          I have spent years at the operational end of customer experience inside a financial services organisation: building VoC programs, designing closed-loop feedback systems, running exec reporting that actually influenced decisions. The unglamorous stuff that determines whether CX works or just looks like it does.
        </p>
        <p>
          I started Behaving to help other businesses close the same gaps. If customers are leaving and you are not sure why, I can help you find out.
        </p>
        <a className="ghost-link" href="about.html">Read more about me <span aria-hidden="true">→</span></a>
      </div>
    </section>
  );
}

// ---- What I do (brief, 4 bullets) ---------------------------------------
function HomeWhatIDo() {
  const items = [
    { n: '01', title: 'Find out why customers are leaving', body: 'And what to fix first. Not a deck. A diagnosis and a place to start.' },
    { n: '02', title: 'Understand where you are losing people', body: 'Acquisition, onboarding, the awkward middle. I find the leak and tell you where it is.' },
    { n: '03', title: 'Set up a feedback system that gets used', body: 'Not a platform implementation. A simple, working VoC setup with an owner and a process.' },
    { n: '04', title: 'Get your team aligned on the experience', body: 'A shared map of what the customer actually sees, and a prioritised list of what to fix.' },
  ];
  return (
    <section id="what-i-do" className="surface-cream" aria-labelledby="wid-h">
      <span className="section-num-bg" aria-hidden="true">04</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">04 / What working together looks like</div></div>
        <h2 id="wid-h">Depending on what you need, I can help you:</h2>
        <ol className="numbered-list" role="list">
          {items.map((it) => (
            <li key={it.n} className="numbered-item">
              <span className="numbered-num">{it.n}</span>
              <div className="numbered-body">
                <h3 className="numbered-title">{it.title}</h3>
                <p>{it.body}</p>
              </div>
            </li>
          ))}
        </ol>
        <p style={{ marginTop: 'var(--space-6)', maxWidth: '52ch', opacity: 0.85 }}>
          Work is fixed-price and time-bounded. No open-ended retainers. No surprises.
        </p>
        <a className="ghost-link" href="services.html">See the full set of services <span aria-hidden="true">→</span></a>
      </div>
    </section>
  );
}

// ---- Free audit (lead magnet) -------------------------------------------
function HomeAudit({ visible }) {
  if (!visible) return null;
  return (
    <section id="audit" className="surface-bg" aria-labelledby="audit-h">
      <span className="section-num-bg" aria-hidden="true">05</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">05 / Free audit</div></div>
        <h2 id="audit-h">Not sure if this is relevant?</h2>
        <p style={{ maxWidth: '58ch' }}>
          I offer a free, no-obligation quick audit. Tell me a bit about your situation and I will take a 20-minute look and tell you honestly what I see.
        </p>
        <div className="audit-grid">
          <div className="audit-option">
            <h3>Website and UX review</h3>
            <p>I look at your site from a customer’s perspective: where it loses people, where the message is unclear, where friction is costing you conversions.</p>
          </div>
          <div className="audit-option">
            <h3>VoC gut check</h3>
            <p>I look at how you are capturing and using customer feedback: whether your signals are reliable, whether insights are reaching the people who can act on them, and where the biggest gaps are.</p>
          </div>
        </div>
        <p style={{ marginTop: 'var(--space-6)', fontStyle: 'italic', opacity: 0.85 }}>
          No pitch. Just an honest read.
        </p>
        <Button href="#contact" variant="primary">Get a free audit</Button>
      </div>
    </section>
  );
}

// ---- Primary CTA ---------------------------------------------------------
function HomeContact() {
  return (
    <section id="contact" className="surface-bg" aria-labelledby="contact-h">
      <span className="section-num-bg" aria-hidden="true">06</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">06 / Get in touch</div></div>
        <h2 id="contact-h">Ready to talk?</h2>
        <p style={{ maxWidth: '52ch' }}>
          Tell me what you are working on. I will get back to you within 24 hours.
        </p>
        <ContactForm idPrefix="home" />
        <p style={{ marginTop: 'var(--space-6)', fontSize: '14px', color: 'var(--fg-muted)' }}>
          Or if you would rather just book a call, <a href="contact.html">go to the contact page</a>.
        </p>
      </div>
    </section>
  );
}

Object.assign(window, {
  HomeHero, HomeProblem, HomeCredibility, HomeWhatIDo, HomeAudit, HomeContact,
});