/* global React, Icon */

function QuoteForm() {
  return (
    <section id="quote" style={qfStyles.wrap}>
      <div style={qfStyles.inner}>
        <div style={qfStyles.copy}>
          <div className="ds-eyebrow" style={{ color: 'var(--mint-300)', marginBottom: 14 }}>FREE ESTIMATE</div>
          <h2 style={qfStyles.h2}>Ready to Restore Your Wood?</h2>
          <p style={qfStyles.lead}>
            Enter your address and we'll match you with the fastest way to get a free quote — on-site visit or remote photo-based estimate.
          </p>
          <div style={qfStyles.trustRow}>
            {['Free, no-obligation estimate', 'On-site or remote — your choice', 'Same-day response'].map((t) => (
              <div key={t} style={qfStyles.trustBadge}>
                <Icon name="check" size={13} color="var(--mint-300)" stroke={2.5} />
                {t}
              </div>
            ))}
          </div>
        </div>

        <div style={qfStyles.card}>
          <div style={qfStyles.cardOptions}>
            <a href="get-quote.html" style={qfStyles.primaryOption}>
              <div style={qfStyles.optionIcon}>
                <Icon name="arrowRight" size={20} color="var(--forest-900)" stroke={2.5} />
              </div>
              <div>
                <div style={qfStyles.optionTitle}>Get Your Free Quote</div>
                <div style={qfStyles.optionDesc}>Enter your address — takes 2 minutes</div>
              </div>
            </a>

            <div style={qfStyles.divider}>
              <span style={qfStyles.dividerText}>or</span>
            </div>

            <a href="tel:+12892733314" style={qfStyles.secondaryOption}>
              <Icon name="phone" size={18} color="var(--forest-700)" />
              <div>
                <div style={qfStyles.optionTitleDark}>Call us directly</div>
                <div style={qfStyles.optionDescDark}>(289) 273-3314</div>
              </div>
            </a>
          </div>

          <p style={qfStyles.note}>
            Serving St. Catharines, Niagara Falls, Welland, Burlington, Hamilton, and surrounding areas.
          </p>
        </div>
      </div>
    </section>
  );
}

const qfStyles = {
  wrap: { background: 'var(--forest-900)', padding: '96px 0' },
  inner: {
    maxWidth: 'var(--container)', margin: '0 auto', padding: '0 32px',
    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center',
  },
  copy: { color: '#fff' },
  h2: {
    fontFamily: 'var(--font-display)', fontWeight: 700,
    fontSize: 'clamp(2rem, 3.6vw, 3rem)', lineHeight: 1.05,
    letterSpacing: '-0.02em', color: '#fff', margin: '0 0 16px',
  },
  lead: {
    fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55,
    color: 'rgba(255,255,255,0.78)', margin: '0 0 28px',
  },
  trustRow: { display: 'flex', flexDirection: 'column', gap: 10 },
  trustBadge: {
    display: 'flex', alignItems: 'center', gap: 10,
    fontFamily: 'var(--font-body)', fontSize: 14.5, fontWeight: 500,
    color: 'rgba(255,255,255,0.85)',
  },
  card: {
    background: 'var(--paper)', borderRadius: 22, padding: 32,
    boxShadow: 'var(--shadow-xl)',
  },
  cardOptions: { display: 'flex', flexDirection: 'column', gap: 12 },
  primaryOption: {
    display: 'flex', alignItems: 'center', gap: 16,
    background: 'var(--mint-500)', borderRadius: 14, padding: '18px 22px',
    textDecoration: 'none', transition: 'all var(--transition-base)',
    boxShadow: '0 8px 24px -6px rgba(80,200,120,0.4)',
  },
  optionIcon: {
    width: 44, height: 44, borderRadius: 12, flexShrink: 0,
    background: 'rgba(0,66,37,0.12)', display: 'flex',
    alignItems: 'center', justifyContent: 'center',
  },
  optionTitle: {
    fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16,
    color: 'var(--forest-900)', lineHeight: 1.2,
  },
  optionDesc: {
    fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--forest-800)',
    marginTop: 2, opacity: 0.8,
  },
  divider: {
    display: 'flex', alignItems: 'center', gap: 12,
  },
  dividerText: {
    fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 600,
    color: 'var(--ink-400)', textTransform: 'uppercase', letterSpacing: '0.1em',
    padding: '0 4px',
  },
  secondaryOption: {
    display: 'flex', alignItems: 'center', gap: 16,
    border: '1.5px solid var(--border-strong)', borderRadius: 14, padding: '16px 22px',
    textDecoration: 'none', transition: 'all var(--transition-base)',
    background: 'var(--paper)',
  },
  optionTitleDark: {
    fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15,
    color: 'var(--ink-900)', lineHeight: 1.2,
  },
  optionDescDark: {
    fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--ink-600)',
    marginTop: 2,
  },
  note: {
    fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--ink-500)',
    textAlign: 'center', margin: '20px 0 0', lineHeight: 1.5,
  },
};

function Footer() {
  return (
    <footer style={fStyles.wrap}>
      <div style={fStyles.inner}>
        <div style={fStyles.top}>
          <div style={fStyles.brand}>
            <img src="assets/logo-white.png" alt="Deck Restore+" style={{ height: 42, width: "164px" }} />
            <p style={fStyles.tagline}>
              Revitalize Your Deck,<br />
              Enjoy the Outdoors in Style.
            </p>
            <div style={fStyles.contact}>
              <a href="tel:+12892733314" style={fStyles.contactLink}>
                <Icon name="phone" size={15} /> (289) 273-3314
              </a>
              <a href="mailto:Ben@deckrestoreplus.ca" style={fStyles.contactLink}>
                Ben@deckrestoreplus.ca
              </a>
            </div>
            <div style={fStyles.social}>
              <a href="https://www.facebook.com/DeckRestorePlus/" style={fStyles.socialBtn} aria-label="Facebook">
                <Icon name="facebook" size={18} />
              </a>
              <a href="https://www.instagram.com/deckrestoreplus/" style={fStyles.socialBtn} aria-label="Instagram">
                <Icon name="instagram" size={18} />
              </a>
              <a href="https://www.tiktok.com/@deckrestoreplus" style={fStyles.socialBtn} aria-label="TikTok">
                <Icon name="tiktok" size={18} />
              </a>
            </div>
          </div>
          <div style={fStyles.cols}>
            {[
            { h: 'Services', items: [
              { label: 'Deck Staining',            href: 'deck-staining.html' },
              { label: 'Fence Staining',           href: 'fence-staining.html' },
              { label: 'Deck Cleaning',            href: 'deck-cleaning.html' },
              { label: 'Hardwood Floor Refinishing', href: 'hardwood-floor-refinishing.html' },
            ]},
            { h: 'Company', items: [
              { label: 'About',         href: 'about.html' },
              { label: 'Gallery',       href: 'gallery.html' },
              { label: 'Our Process',   href: 'process.html' },
              { label: 'Testimonials',  href: 'testimonials.html' },
              { label: 'Contact',       href: 'contact.html' },
            ]},
            { h: 'Serving', items: [
              { label: 'St. Catharines',       href: 'st-catharines.html' },
              { label: 'Niagara Falls',        href: 'niagara-falls.html' },
              { label: 'Welland',              href: 'welland.html' },
              { label: 'Niagara-on-the-Lake',  href: 'niagara-on-the-lake.html' },
            ]},
            ].map((col) =>
            <div key={col.h}>
                <div style={fStyles.colH}>{col.h}</div>
                <ul style={fStyles.list}>
                  {col.items.map((it) =>
                <li key={it.label} style={fStyles.li}>
                  <a href={it.href} style={fStyles.footLink}>{it.label}</a>
                </li>
                )}
                </ul>
              </div>
            )}
          </div>
        </div>
        <div style={fStyles.bottom}>
          <span>© 2026 Deck Restore+</span>
          <span style={{ fontFamily: 'var(--font-accent)', fontSize: 22, color: 'var(--mint-300)' }}>
            We Restore Wood.
          </span>
          <span>Privacy · Terms</span>
        </div>
      </div>
    </footer>);

}

const fStyles = {
  wrap: { background: 'var(--forest-900)', color: '#fff' },
  inner: { maxWidth: 'var(--container)', margin: '0 auto', padding: '72px 32px 28px' },
  top: { display: 'grid', gridTemplateColumns: '1.2fr 2fr', gap: 64 },
  brand: { display: 'flex', flexDirection: 'column', gap: 16 },
  tagline: {
    fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6,
    color: 'rgba(255,255,255,0.65)', margin: 0, maxWidth: 280
  },
  contact: { display: 'flex', flexDirection: 'column', gap: 8, marginTop: 4 },
  contactLink: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 500,
    color: 'rgba(255,255,255,0.9)', textDecoration: 'none',
  },
  social: { display: 'flex', gap: 8, marginTop: 4 },
  socialBtn: {
    width: 36, height: 36, borderRadius: 10,
    background: 'rgba(255,255,255,0.08)', display: 'flex',
    alignItems: 'center', justifyContent: 'center',
    color: '#fff', textDecoration: 'none',
    border: '1px solid rgba(255,255,255,0.1)',
    transition: 'all var(--transition-base)'
  },
  cols: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 },
  colH: {
    fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 600,
    letterSpacing: '0.18em', textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.55)', marginBottom: 14
  },
  list: { listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 },
  li: { fontFamily: 'var(--font-body)', fontSize: 14, color: 'rgba(255,255,255,0.85)' },
  footLink: {
    fontFamily: 'var(--font-body)', fontSize: 14, color: 'rgba(255,255,255,0.85)',
    textDecoration: 'none', transition: 'color var(--transition-fast)',
  },
  bottom: {
    marginTop: 56, paddingTop: 22,
    borderTop: '1px solid rgba(255,255,255,0.1)',
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'rgba(255,255,255,0.5)',
    flexWrap: 'wrap', gap: 12
  }
};

window.QuoteForm = QuoteForm;
window.Footer = Footer;