/* Evie's Alterations — shared chrome: brand, sparkle, placeholders, header, footer, booking modal */

const LOGO_HORIZ = "../../assets/logo-horizontal.png";        /* full lockup, purple — header */
const LOGO_HORIZ_LIGHT = "../../assets/logo-horizontal-light.png"; /* full lockup, cream — dark footer */
const LOGO_STACKED = "../../assets/logo-stacked.png";          /* stacked lockup, purple */
const LOGO_MARK = "../../assets/logo-mark.png";               /* icon only, purple */

function Sparkle({ size = 14, className = "", style }) {
  return (
    <svg className={"spark " + className} width={size} height={size} viewBox="0 0 24 24" style={style} aria-hidden="true">
      <path d="M12 0C12.6 7.2 16.8 11.4 24 12 16.8 12.6 12.6 16.8 12 24 11.4 16.8 7.2 12.6 0 12 7.2 11.4 11.4 7.2 12 0Z" fill="currentColor"/>
    </svg>
  );
}

function BrandLockup() {
  return (
    <a href="#top" className="brand-lockup" aria-label="Evie&#8217;s Alterations home">
      <img src={LOGO_HORIZ} alt="Evie&#8217;s Alterations" />
    </a>
  );
}

function Eyebrow({ children, onDark }) {
  return (
    <p className={"eyebrow" + (onDark ? " on-dark" : "")}>
      <Sparkle size={13} />{children}
    </p>
  );
}

function Placeholder({ label, className = "", onDark, style }) {
  return (
    <div className={"ph " + (onDark ? "on-dark " : "") + className} style={style}>
      <span className="ph-label">{label}</span>
    </div>
  );
}

function RuleMark() {
  return (
    <div className="rule-mark"><span className="line"></span><Sparkle size={14} /><span className="line"></span></div>
  );
}

function Header({ onBook }) {
  const links = ["Services", "About", "Gallery", "Reviews"];
  return (
    <header className="site-header" id="top">
      <div className="container header-inner">
        <BrandLockup />
        <nav className="nav">
          {links.map(l => <a key={l} href={"#" + l.toLowerCase()}>{l}</a>)}
        </nav>
        <div className="header-cta">
          <a href="tel:3608184795" className="phone">(360) 818-4795</a>
          <button className="btn btn-primary book-cta" onClick={onBook}>Book a fitting</button>
          <a href="tel:3608184795" className="btn btn-primary call-cta">(360) 818-4795</a>
        </div>
      </div>
    </header>
  );
}

function Footer({ onBook }) {
  return (
    <footer className="site-footer" id="contact">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src={LOGO_HORIZ_LIGHT} alt="Evie's Alterations" />
            <p>Boutique alterations &amp; tailoring in the heart of the Pacific Northwest. Helping your favorite clothes fit perfectly since 1989.</p>
          </div>
          <div className="footer-col">
            <h4>Studio</h4>
            <ul>
              <li><a href="#services">Services</a></li>
              <li><a href="#about">About Evie</a></li>
              <li><a href="#gallery">Gallery</a></li>
              <li><a href="#reviews">Reviews</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Visit</h4>
            <ul>
              <li>712 NE 138th Ave</li>
              <li>Vancouver, WA 98684</li>
              <li>By Appointment Only</li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Get in touch</h4>
            <ul>
              <li><a href="tel:3608184795">(360) 818-4795</a></li>
              <li><a href="mailto:hello@eviesalterations.com">hello@eviesalterations.com</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault();onBook&&onBook();}}>Book a fitting</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>&copy; 2026 Evie&#8217;s Alterations</span>
          <span>Tailored by hand &middot; Vancouver, WA</span>
        </div>
      </div>
    </footer>
  );
}

function BookingModal({ open, onClose }) {
  const [done, setDone] = React.useState(false);
  React.useEffect(() => { if (open) setDone(false); }, [open]);
  return (
    <div className={"modal-overlay" + (open ? " open" : "")} onClick={onClose}>
      <div className="modal" style={{ position: 'relative' }} onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">&times;</button>
        {done ? (
          <div className="modal-success">
            <img src={LOGO_MARK} alt="" />
            <h3>Request received</h3>
            <p className="sub">Thank you &mdash; we&#8217;ll call within one business day to confirm your fitting. We can&#8217;t wait to help.</p>
            <button className="btn btn-primary" onClick={onClose}>Close</button>
          </div>
        ) : (
          <React.Fragment>
            <Eyebrow>By appointment</Eyebrow>
            <h3 style={{ marginTop: 12 }}>Book a fitting</h3>
            <p className="sub">Tell us a little about your garment and we&#8217;ll find a time that works.</p>
            <div className="field-row">
              <div className="field"><label>First name</label><input placeholder="Margaret" /></div>
              <div className="field"><label>Phone</label><input placeholder="(360) 818-4795" /></div>
            </div>
            <div className="field"><label>Garment &amp; service</label>
              <select defaultValue="">
                <option value="" disabled>Select a service&hellip;</option>
                <option>Hemming &amp; length</option>
                <option>Bridal &amp; formalwear</option>
                <option>Tailoring &amp; resizing</option>
                <option>Repairs &amp; restoration</option>
                <option>Not sure yet</option>
              </select>
            </div>
            <div className="field"><label>Anything we should know?</label>
              <textarea rows="3" placeholder="Tell us about the piece and the fit you're hoping for&hellip;"></textarea>
            </div>
            <button className="btn btn-primary" style={{ width: '100%', marginTop: 6 }} onClick={() => setDone(true)}>Request my fitting</button>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Sparkle, BrandLockup, Eyebrow, Placeholder, RuleMark, Header, Footer, BookingModal, LOGO_HORIZ, LOGO_HORIZ_LIGHT, LOGO_STACKED, LOGO_MARK });