/* global React, Wordmark, StripeCorner */

function Footer({ onCTA }) {
  return (
    <footer className="footer-root" style={{ position: "relative", overflow: "hidden" }}>
      <StripeCorner position="tr" size={280} color="#c3a8ff" opacity={0.12}/>
      <StripeCorner position="bl" size={200} color="#758766" opacity={0.12}/>
      <div className="container" style={{ position: "relative" }}>
        <div className="footer-links">
          <FooterCol title="Services"  links={["Administrative support", "Social media scheduling", "Operations and growth", "Add-on services"]}/>
          <FooterCol title="Company"   links={["About Ciara", "Service area", "Client stories"]}/>
          <FooterCol title="Resources" links={["Blog", "Free admin audit", "FAQ"]}/>
          <FooterCol title="Contact"   links={["novasolutionsatx@gmail.com", "(512) 650-5062", "Austin and Liberty Hill, TX"]}/>
          <div className="footer-mark">
            <Wordmark size="lg" on="dark"/>
          </div>
        </div>

        <div className="footer-bottom">
          <div>© 2026 Nova Admin Solutions, LLC. All rights reserved.</div>
          <div className="footer-legal-links">
            <a className="footer-legal-link">Privacy</a>
            <a className="footer-legal-link">Terms</a>
            <a className="footer-legal-link">Site map</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div className="footer-col-title">{title}</div>
      <ul className="footer-col-list">
        {links.map((l) => (
          <li key={l}><a className="footer-col-link">{l}</a></li>
        ))}
      </ul>
    </div>
  );
}

function Modal({ open, onClose }) {
  if (!open) return null;
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal-box" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <div>
            <div className="eyebrow">Free 30-min consultation</div>
            <h3 className="modal-headline">Tell us where the work is piling up.</h3>
          </div>
          <button className="modal-close" onClick={onClose} aria-label="Close">&#215;</button>
        </div>
        <p className="modal-sub">We will get back within one business day with a few times to talk.</p>
        <div className="modal-form">
          <input className="input" placeholder="First name"/>
          <input className="input" placeholder="Last name"/>
          <input className="input modal-full" placeholder="Business email" type="email"/>
          <input className="input modal-full" placeholder="Business name"/>
          <textarea className="input modal-full" style={{ minHeight: 80, fontFamily: "inherit", resize: "vertical" }} placeholder="What is eating your week?"/>
        </div>
        <button onClick={onClose} className="btn btn-primary lg modal-submit">Send and schedule</button>
        <p className="modal-disclaimer">No pressure. No spam. We do not share your info.</p>
      </div>
    </div>
  );
}

Object.assign(window, { Footer, Modal });