/* global React, Icon */
const { useEffect: useEffectC4, useState: useStateC4 } = React;

const FinalCta = () => (
  <section id="final-cta" className="final-cta-section">
    <div className="page-grid">
      <div className="final-cta-panel reveal">
        <p className="eyebrow light">Join a Design POD</p>
        <h2>Do not let someone else design your future role.</h2>
        <p>Bring one service you already know how to deliver. Inside a guided Design POD, we map the client room, credentials, agent roles, professional assurance, evidence, indemnity assumptions, and prepaid outcome settlement.</p>
        <div className="button-row">
          <a className="btn btn-light" href="#contact">Request Design POD access <Icon name="arrow" size={16} /></a>
          <a className="btn btn-secondary-dark" href="#blueprints">Preview Service Blueprints</a>
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div className="page-grid footer-grid">
      <div className="footer-brand">
        <a className="brand" href="#top">
          <QiBrand />
          <span className="brand-sub">PODs</span>
        </a>
        <p>Design your role in the agentic economy. Own the client relationship, assurance, and service model.</p>
        <form className="newsletter" onSubmit={(event) => event.preventDefault()}>
          <label htmlFor="newsletter">Partner updates</label>
          <div><input id="newsletter" type="email" placeholder="you@organization.com" /><button type="submit"><Icon name="mail" size={16} /></button></div>
        </form>
      </div>
      <div className="footer-links">
        {[
          ["Product", ["PODs", "Service Blueprints", "Marketplace", "Assurance"]],
          ["Partners", ["Partners", "Qi", "IXO", "Contact"]],
          ["Legal", ["Privacy", "Terms", "Security", "Data processing"]],
          ["Social", ["LinkedIn", "X", "GitHub", "Newsletter"]]
        ].map(([group, links]) => (
          <div key={group}>
            <h3>{group}</h3>
            {links.map((link) => <a href="#" key={link}>{link}</a>)}
          </div>
        ))}
      </div>
    </div>
    <div className="page-grid footer-bottom">
      <span>© 2026 Qi. All rights reserved.</span>
      <span>Professional work, redesigned so clients control their data, agents are credentialed, experts own assurance, and firms can settle outcomes with auditable records.</span>
    </div>
  </footer>
);

const StickyCta = ({ enabled }) => {
  const [visible, setVisible] = useStateC4(false);
  useEffectC4(() => {
    if (!enabled) return;
    const onScroll = () => {
      const bottom = document.documentElement.scrollHeight - window.innerHeight - 500;
      setVisible(window.scrollY > 720 && window.scrollY < bottom);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, [enabled]);
  if (!enabled) return null;
  return (
    <div className={`sticky-cta ${visible ? "is-visible" : ""}`}>
      <span>Bring one real service you deliver. Leave with the first blueprint of your future role.</span>
      <a className="btn btn-primary" href="#contact">Join a Design POD</a>
    </div>
  );
};

Object.assign(window, { FinalCta, Footer, StickyCta });