/* Footer, 4 columns + newsletter + address + sign-off */

const footerHeadingStyle = {
  fontSize: 11, fontWeight: 600, letterSpacing: "0.16em",
  textTransform: "uppercase", color: "var(--scd-cream-50)", marginBottom: 16,
};
const footerLinkStyle = { color: "var(--scd-cream-200)", textDecoration: "none", fontSize: 14 };

function FooterCol({ title, links }) {
  return (
    <div>
      <div style={footerHeadingStyle}>{title}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10 }}>
        {links.map(l => (
          <li key={l.label}>
            <a href={l.href} style={footerLinkStyle}
              onMouseOver={e => e.currentTarget.style.color = "var(--scd-blush-300)"}
              onMouseOut={e => e.currentTarget.style.color = "var(--scd-cream-200)"}>{l.label}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

function SocialIcon({ label, d }) {
  return (
    <a href="#" aria-label={label} style={{
      width: 36, height: 36, borderRadius: 2,
      border: "1px solid var(--scd-navy-600)",
      display: "flex", alignItems: "center", justifyContent: "center",
      color: "var(--scd-cream-200)", textDecoration: "none",
      transition: "background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out)",
    }}
    onMouseOver={e => { e.currentTarget.style.borderColor = "var(--scd-blush-300)"; e.currentTarget.style.color = "var(--scd-blush-300)"; }}
    onMouseOut={e => { e.currentTarget.style.borderColor = "var(--scd-navy-600)"; e.currentTarget.style.color = "var(--scd-cream-200)"; }}>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d={d}/>
      </svg>
    </a>
  );
}

function Footer() {
  return (
    <footer style={{ background: "var(--scd-navy-900)", color: "var(--scd-cream-200)", paddingTop: 88, paddingBottom: 36 }}>
      <div className="wrap">
        <div style={{
          display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1.4fr",
          gap: 48, paddingBottom: 56,
        }} className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <Seal size={56} tone="cream"/>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 24, color: "var(--scd-cream-50)", letterSpacing: "-0.02em", lineHeight: 1 }}>South Coast</div>
                <ScriptWord size={26} color="var(--scd-blush-300)" underline={false}>Designs</ScriptWord>
              </div>
            </div>
            <p style={{ marginTop: 24, fontSize: 13.5, lineHeight: 1.65, color: "var(--scd-cream-200)", opacity: 0.85, maxWidth: 280 }}>
              Precision print supply, shipped nationwide from Orange County since 1980.
            </p>
            <address style={{
              marginTop: 20, fontStyle: "normal",
              fontSize: 13, lineHeight: 1.6, color: "var(--scd-cream-200)", opacity: 0.75,
            }}>
              1418 Harbor Blvd, Suite B<br/>
              Costa Mesa, CA 92626<br/>
              <a href="tel:+17145550180" style={{ ...footerLinkStyle, fontSize: 13 }}>(714) 555-0180</a>
            </address>
            <div style={{ display: "flex", gap: 8, marginTop: 20 }}>
              <SocialIcon label="Instagram" d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm5 6a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm5.5-1.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
              <SocialIcon label="LinkedIn" d="M4 4h4v4H4zM4 10h4v10H4zM10 10h4v2a4 4 0 0 1 7 3v5h-4v-5a1 1 0 0 0-2 0v5h-5z"/>
              <SocialIcon label="YouTube" d="M22 7a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3zM10 9l6 3-6 3z"/>
            </div>
          </div>
          <FooterCol title="Shop" links={[
            { label: "Rotary trimmers", href: "collection-rotary-trimmers-v1.html" },
            { label: "Pro 24 (best seller)", href: "product-pro-24-v1.html" },
          ]}/>
          <FooterCol title="B2B" links={[
            { label: "Wholesale program", href: "b2b-wholesale-v1.html" },
            { label: "Request a quote",   href: "b2b-wholesale-v1.html#quote-form" },
            { label: "How a quote works", href: "b2b-wholesale-v1.html" },
          ]}/>
          <FooterCol title="Company" links={[
            { label: "Our story", href: "about-v1.html" },
            { label: "Contact",   href: "contact-v1.html" },
            { label: "FAQ",       href: "faq-v1.html" },
          ]}/>
          <div>
            <div style={footerHeadingStyle}>Get the dispatch</div>
            <p style={{ fontSize: 13, color: "var(--scd-cream-200)", opacity: 0.8, marginBottom: 16, lineHeight: 1.55 }}>
              Quarterly notes from the warehouse, new arrivals, archive photos, shop tips.
            </p>
            <form onSubmit={e => e.preventDefault()} style={{ display: "flex", gap: 8 }}>
              <input type="email" placeholder="you@shop.com" aria-label="Email address" style={{
                flex: 1, padding: "10px 12px", borderRadius: 2,
                border: "1px solid var(--scd-navy-600)", background: "var(--scd-navy-800)",
                color: "var(--scd-cream-50)", fontSize: 13, fontFamily: "var(--font-body)",
              }}/>
              <button type="submit" className="btn btn--on-dark btn--sm">Subscribe</button>
            </form>
            <div style={{ fontSize: 11, color: "var(--scd-cream-200)", opacity: 0.55, marginTop: 10, letterSpacing: "0.02em" }}>
              Four emails a year. Unsubscribe any time.
            </div>
          </div>
        </div>
        <div style={{ height: 1, background: "var(--scd-navy-700)", margin: "0 0 24px" }}/>
        <div style={{
          display: "flex", alignItems: "center", gap: 20,
          justifyContent: "space-between", flexWrap: "wrap",
          fontSize: 12, color: "var(--scd-cream-200)", opacity: 0.7,
        }}>
          <div>&copy; 1980&ndash;2026 South Coast Designs, LLC &middot; Family owned &amp; operated &middot; Orange County, California.</div>
          <div style={{ display: "flex", gap: 18, flexWrap: "wrap" }}>
            <a style={footerLinkStyle} href="b2b-wholesale-v1.html">Wholesale</a>
            <a style={footerLinkStyle} href="contact-v1.html">Contact</a>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 1080px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr !important; } }
        @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }
      `}</style>
    </footer>
  );
}

window.Footer = Footer;