// site-closing.jsx — Origin story + Assessment + Contact + Footer

function OriginSection() {
  return (
    <section id="about" className="origin">
      <div className="container">
        <div className="origin__inner">
          <div className="origin__bar" aria-hidden="true"/>
          <div className="origin__text">
            <div className="origin__label">Why we built this</div>
            <blockquote className="origin__quote">
              "<strong>When my sister was kidnapped, help arrived too late.</strong> I built R24 so no other family faces the same trauma — and today our platform ensures the right response reaches people in time, every time."
            </blockquote>
            <div className="origin__byline">— Marlize Holtzhausen, Founder &amp; CEO</div>
            <div className="origin__awards">
              <span><SIcon d={SIcons.award} size={12}/> Google Fest Global Award Winner</span>
              <span><SIcon d={SIcons.award} size={12}/> AWIEF Tech Entrepreneur of the Year</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AssessmentSection() {
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState({});

  const questions = [
    {
      key: "size",
      q: "How many employees does your organisation protect?",
      options: ["Under 500", "500–2,500", "2,500–10,000", "10,000+"],
    },
    {
      key: "travel",
      q: "How many active business travellers per month?",
      options: ["Under 25", "25–100", "100–500", "500+"],
    },
    {
      key: "countries",
      q: "How many countries do your people operate in?",
      options: ["1–3", "4–10", "11–25", "25+"],
    },
    {
      key: "stack",
      q: "Do you currently have a duty-of-care tool deployed?",
      options: ["No, nothing", "Yes — but it's not used", "Yes — fragmented across vendors", "Yes — but lacks audit trail"],
    },
  ];

  const done = step >= questions.length;

  return (
    <section className="assessment" id="assessment">
      <div className="container">
        <div className="section-header">
          <p className="eyebrow">2-minute readiness check</p>
          <h2 className="section-h2">Where are your Duty of Care gaps?</h2>
          <p className="section-sub">Four quick questions. We'll send you a tailored gap analysis — no sales call required.</p>
        </div>

        <div className="assessment__card">
          {!done ? (
            <>
              <div className="assessment__progress">
                <div className="assessment__progress-bar" style={{ width: `${(step / questions.length) * 100}%` }}/>
              </div>
              <div className="assessment__step-count">
                Question {step + 1} of {questions.length}
              </div>
              <h3 className="assessment__q">{questions[step].q}</h3>
              <div className="assessment__opts">
                {questions[step].options.map((opt, i) => (
                  <button
                    key={i}
                    className={`assessment__opt ${answers[questions[step].key] === opt ? "selected" : ""}`}
                    onClick={() => {
                      setAnswers({ ...answers, [questions[step].key]: opt });
                      setTimeout(() => setStep(step + 1), 220);
                    }}
                  >
                    {opt}
                  </button>
                ))}
              </div>
              {step > 0 && (
                <button className="assessment__back" onClick={() => setStep(step - 1)}>← Back</button>
              )}
            </>
          ) : (
            <div className="assessment__done">
              <div className="assessment__done-icon">
                <SIcon d={SIcons.check} size={24} stroke={2.5}/>
              </div>
              <h3>Thanks — that's everything we need.</h3>
              <p>Drop your email and we'll send your tailored gap analysis within the hour.</p>
              <form className="assessment__form" onSubmit={(e) => { e.preventDefault(); }}>
                <input type="email" placeholder="you@company.com" required/>
                <button type="submit" className="btn-red-lg">Send my analysis</button>
              </form>
              <button className="assessment__back" onClick={() => setStep(0)}>Start over</button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function ContactSection() {
  return (
    <section id="contact" className="contact">
      <div className="container">
        <div className="contact__grid">
          <div className="contact__info">
            <p className="eyebrow">Talk to us</p>
            <h2 className="section-h2">Book a demo. See the platform live in 30 minutes.</h2>
            <p className="contact__sub">
              A solutions engineer walks you through the modules that match your stack. No deck, no sales pitch — just the platform.
            </p>
            <div className="offices">
              <div className="office">
                <span className="office__flag">ZA</span>
                <div>
                  <div className="office__name">Johannesburg <span className="office__tag">HQ</span></div>
                  <div className="office__detail">8th floor, Katherine &amp; West, Sandton</div>
                </div>
              </div>
              <div className="office">
                <span className="office__flag">UK</span>
                <div>
                  <div className="office__name">London</div>
                  <div className="office__detail">EMEA Operations</div>
                </div>
              </div>
            </div>
          </div>

          <div className="contact__form-card">
            <h3>Book a demo</h3>
            <p className="contact__form-sub">We'll respond within 4 hours during business hours.</p>
            <form onSubmit={(e) => e.preventDefault()}>
              <div className="form-row">
                <div className="fg"><label>Name</label><input type="text" placeholder="Your name" required/></div>
                <div className="fg"><label>Company</label><input type="text" placeholder="Company" required/></div>
              </div>
              <div className="fg"><label>Work email</label><input type="email" placeholder="you@company.com" required/></div>
              <div className="form-row">
                <div className="fg"><label>Role</label><select><option>Head of Security</option><option>Chief People Officer</option><option>Risk &amp; Compliance</option><option>Operations</option><option>Executive</option><option>Other</option></select></div>
                <div className="fg"><label>Team size</label><select><option>Under 500</option><option>500–2,500</option><option>2,500–10,000</option><option>10,000+</option></select></div>
              </div>
              <div className="fg"><label>What problem are you trying to solve?</label><textarea placeholder="e.g. We need a single Duty of Care view across 14 countries..."></textarea></div>
              <button type="submit" className="form-submit">Request a demo</button>
              <p className="form-note">By submitting, you agree to our Privacy Policy. We never share your data.</p>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

function CtaBanner() {
  return (
    <section className="cta-banner">
      <div className="container">
        <div className="cta-banner__card">
          <div>
            <h2>Your duty of care is already running.<br/>The question is whether you can prove it.</h2>
            <p>Get a 30-minute platform walkthrough. No deck. No sales pitch. Just the modules that match your stack.</p>
          </div>
          <div className="cta-banner__btns">
            <a href="#contact" className="btn-red-lg"><SIcon d={SIcons.calendar} size={15}/>Book a Demo</a>
            <a href="#assessment" className="btn-ghost-lg">Run the 2-min assessment</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function CertsStrip() {
  return (
    <section className="certs-strip">
      <div className="container">
        <div className="certs">
          <div className="cert">
            <SIcon d={SIcons.shield} size={20} stroke={2}/>
            <div>
              <div className="cert__name">ISO 27001:2022</div>
              <div className="cert__sub">Information Security</div>
            </div>
          </div>
          <div className="cert">
            <SIcon d={SIcons.shield} size={20} stroke={2}/>
            <div>
              <div className="cert__name">ISO 31030</div>
              <div className="cert__sub">Travel Risk Management</div>
            </div>
          </div>
          <div className="cert">
            <SIcon d={SIcons.cpu} size={20} stroke={2}/>
            <div>
              <div className="cert__name">AWS · GCP</div>
              <div className="cert__sub">Enterprise Cloud</div>
            </div>
          </div>
          <div className="cert">
            <SIcon d={"M9 12l2 2 4-4"} size={20} stroke={2}/>
            <div>
              <div className="cert__name">GDPR · POPIA · HIPAA</div>
              <div className="cert__sub">Compliant by architecture</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="r24-footer">
      <div className="container">
        <div className="r24-footer__grid">
          <div>
            <div className="r24-footer__logo">
              <img src={window.__asset('logoWhite','assets/r24i-horizontal-white.png')} alt="Response24 International" style={{ height: 32, width: "auto", display: "block" }}/>
            </div>
            <p className="r24-footer__tagline">
              Unified duty of care + emergency response. Two SaaS platforms. One data layer. 40+ countries.
            </p>
          </div>
          <div className="r24-footer__col">
            <h4>Platforms</h4>
            <ul>
              <li><a href="#pulse">R24 PULSE</a></li>
              <li><a href="#response">R24 Response</a></li>
              <li><a href="#modules">9 Modules</a></li>
              <li><a href="#roi">ROI Calculator</a></li>
            </ul>
          </div>
          <div className="r24-footer__col">
            <h4>Company</h4>
            <ul>
              <li><a href="#about">About</a></li>
              <li><a href="#about">Founder Story</a></li>
              <li><a href="#contact">Offices</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <div className="r24-footer__col">
            <h4>Resources</h4>
            <ul>
              <li><a href="#why-r24">Why R24</a></li>
              <li><a href="#how">How It Works</a></li>
              <li><a href="#consolidation">Consolidation</a></li>
              <li><a href="#assessment">Readiness check</a></li>
            </ul>
          </div>
        </div>
        <div className="r24-footer__bottom">
          <span className="r24-footer__copy">© 2026 Response24 International. All rights reserved.</span>
          <div className="r24-footer__legal">
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Security</a>
            <a href="#">DPA</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function ClosingSections() {
  return (
    <>
      <OriginSection/>
      <AssessmentSection/>
      <ContactSection/>
      <CertsStrip/>
      <Footer/>
    </>
  );
}

window.ClosingSections = ClosingSections;
window.OriginSection = OriginSection;
window.AssessmentSection = AssessmentSection;
window.ContactSection = ContactSection;
window.CtaBanner = CtaBanner;
window.CertsStrip = CertsStrip;
window.Footer = Footer;