const { useState: useS5 } = React;

function Visit() {
  const hours = [
    ['Mon — Fri', '7:00 — 12:00'],
    ['Saturday', 'closed'],
    ['Sunday', 'closed'],
  ];
  return (
    <section id="visit" className="m-section-pad" style={{ background: '#D8C098', padding: '96px 40px', borderTop: '1px solid #2B2418' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div style={{
            fontFamily: 'Inter', fontSize: 11, fontWeight: 600,
            letterSpacing: '0.32em', textTransform: 'uppercase', color: '#2A1A04',
          }}>Come See Us</div>
          <h2 style={{
            fontFamily: "'Abril Fatface', serif",
            fontSize: 'clamp(52px, 6.5vw, 88px)',
            color: '#000', margin: '12px 0 4px', lineHeight: 0.98,
          }}>Take a seat.</h2>
          <div style={{ fontFamily: "'Yellowtail', cursive", fontSize: 44, color: '#2C4C4C' }}>
            {"\n"}
          </div>
        </div>

        <div className="m-stack" style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32,
          border: '1.5px solid #2B2418',
          background: '#F4E7CC',
        }}>
          {/* Map illustration */}
          <div style={{ position: 'relative', padding: 32, minHeight: 440 }}>
            <MapMark />
            <div style={{
              position: 'absolute', bottom: 24, left: 24, right: 24,
              background: '#000', color: '#fff',
              padding: '20px 24px',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              gap: 16,
            }}>
              <div>
                <div style={{
                  fontFamily: 'Inter', fontSize: 10, fontWeight: 700,
                  letterSpacing: '0.3em', textTransform: 'uppercase', color: '#D9CA8F',
                }}>Find us</div>
                <div style={{ fontFamily: "'Abril Fatface', serif", fontSize: 26, marginTop: 4, lineHeight: 1.1 }}>
                  87 Amarina Ave · Ashgrove QLD 4060
                </div>
              </div>
              <a href="https://maps.google.com/?q=87+Amarina+Ave+Ashgrove+QLD+4060" target="_blank" rel="noopener"
                style={{
                  fontFamily: 'Inter', fontSize: 12, fontWeight: 700,
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  background: '#D8C098', color: '#000',
                  padding: '12px 18px', textDecoration: 'none',
                  whiteSpace: 'nowrap',
                }}>Open in Maps →</a>
            </div>
          </div>

          {/* Details */}
          <div style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 28 }}>
            <div>
              <div style={{
                fontFamily: 'Inter', fontSize: 10, fontWeight: 700,
                letterSpacing: '0.3em', textTransform: 'uppercase', color: '#2A1A04',
              }}>Hours</div>
              <div style={{ fontFamily: "'Yellowtail', cursive", fontSize: 44, color: '#000', margin: '2px 0 10px', lineHeight: 1 }}>
                open early.
              </div>
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <tbody>
                  {hours.map(([d, h]) => (
                    <tr key={d}>
                      <td style={{
                        padding: '10px 0',
                        borderBottom: '1px dotted rgba(0,0,0,0.3)',
                        fontFamily: 'Inter', fontSize: 14, color: '#2B2418',
                      }}>{d}</td>
                      <td style={{
                        padding: '10px 0',
                        borderBottom: '1px dotted rgba(0,0,0,0.3)',
                        fontFamily: "'Abril Fatface', serif", fontSize: 18, color: h === 'closed' ? '#4A3E2A' : '#000',
                        textAlign: 'right',
                      }}>{h}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <div>
              <div style={{
                fontFamily: 'Inter', fontSize: 10, fontWeight: 700,
                letterSpacing: '0.3em', textTransform: 'uppercase', color: '#2A1A04',
              }}>Say Hi</div>
              <div style={{ fontFamily: "'Yellowtail', cursive", fontSize: 36, color: '#000', margin: '2px 0 8px', lineHeight: 1 }}>
                hello@
              </div>
              <div style={{ fontFamily: 'Inter', fontSize: 15, lineHeight: 1.6, color: '#000' }}>
                hello@lapolacafe.au<br/>
                @lapolacafe on the gram
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function MapMark() {
  // stylized illustrated map (cream on paper)
  return (
    <svg viewBox="0 0 600 420" style={{ width: '100%', height: '100%', display: 'block' }}>
      <defs>
        <pattern id="dots" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="2" cy="2" r="0.8" fill="#C6A97E"/>
        </pattern>
      </defs>
      <rect width="600" height="420" fill="#F4E7CC"/>
      <rect width="600" height="420" fill="url(#dots)" opacity="0.5"/>

      {/* roads */}
      <path d="M -20 300 Q 120 260 260 280 T 620 240" stroke="#D8C098" strokeWidth="36" fill="none" strokeLinecap="round"/>
      <path d="M -20 300 Q 120 260 260 280 T 620 240" stroke="#2B2418" strokeWidth="1" strokeDasharray="4 6" fill="none"/>

      <path d="M 100 -20 Q 160 140 220 220 T 340 440" stroke="#D8C098" strokeWidth="28" fill="none" strokeLinecap="round"/>
      <path d="M 100 -20 Q 160 140 220 220 T 340 440" stroke="#2B2418" strokeWidth="1" strokeDasharray="4 6" fill="none"/>

      <path d="M 420 -20 Q 440 140 470 260 T 500 440" stroke="#D8C098" strokeWidth="22" fill="none" strokeLinecap="round"/>

      {/* park */}
      <ellipse cx="480" cy="120" rx="90" ry="50" fill="#80B0B0" opacity="0.5"/>
      <text x="480" y="118" textAnchor="middle" fontFamily="'Yellowtail', cursive" fontSize="22" fill="#2B2418">Ashgrove</text>
      <text x="480" y="140" textAnchor="middle" fontFamily="'Yellowtail', cursive" fontSize="18" fill="#2B2418">park</text>

      {/* road labels */}
      <text x="80" y="250" fontFamily="Inter" fontSize="10" letterSpacing="2" fill="#2A1A04">WALLER ST</text>
      <text x="360" y="258" fontFamily="Inter" fontSize="10" letterSpacing="2" fill="#2A1A04">AMARINA AVE</text>

      {/* Pin */}
      <g transform="translate(260,200)">
        <circle r="34" fill="#000"/>
        <circle r="34" fill="none" stroke="#D9CA8F" strokeWidth="1.5" strokeDasharray="3 3"/>
        <text y="-2" textAnchor="middle" fontFamily="'Yellowtail', cursive" fontSize="22" fill="#fff">la pola</text>
        <text y="14" textAnchor="middle" fontFamily="Inter" fontSize="8" letterSpacing="2" fill="#D9CA8F">87 AMARINA</text>
        <path d="M 0 34 L -8 50 L 8 50 Z" fill="#000"/>
      </g>
      <g transform="translate(260,200)">
        <circle r="44" fill="none" stroke="#000" strokeWidth="1" opacity="0.25">
          <animate attributeName="r" from="34" to="80" dur="3s" repeatCount="indefinite"/>
          <animate attributeName="opacity" from="0.4" to="0" dur="3s" repeatCount="indefinite"/>
        </circle>
      </g>
    </svg>
  );
}

function Newsletter() {
  const [email, setEmail] = useS5('');
  const [sent, setSent] = useS5(false);
  return (
    <section className="m-section-pad" style={{ background: '#000', color: '#fff', padding: '80px 40px', borderTop: '1px solid #2B2418' }}>
      <div className="m-newsletter-pad" style={{
        maxWidth: 980, margin: '0 auto',
        border: '1.5px solid #D9CA8F',
        padding: '56px 48px',
        position: 'relative',
      }}>
        {/* corner brackets */}
        {[[10, 10, 0, 1], [10, 10, 1, 1], [10, 10, 0, 0], [10, 10, 1, 0]].map(([t, l, r, b], i) => {
          const s = {
            position: 'absolute', width: 20, height: 20,
            border: '1.5px solid #D9CA8F',
            [r ? 'right' : 'left']: -10,
            [b ? 'bottom' : 'top']: -10,
          };
          return <span key={i} style={{
            ...s,
            borderTop: b ? '1.5px solid #D9CA8F' : 'none',
            borderBottom: b ? 'none' : '1.5px solid #D9CA8F',
            borderLeft: r ? '1.5px solid #D9CA8F' : 'none',
            borderRight: r ? 'none' : '1.5px solid #D9CA8F',
          }}/>;
        })}

        <div style={{ textAlign: 'center' }}>
          <div style={{
            fontFamily: 'Inter', fontSize: 11, fontWeight: 700,
            letterSpacing: '0.32em', textTransform: 'uppercase', color: '#D9CA8F',
          }}>Letters from Amarina</div>
          <h3 style={{
            fontFamily: "'Abril Fatface', serif",
            fontSize: 'clamp(40px, 5vw, 64px)',
            color: '#fff', margin: '12px 0 8px', lineHeight: 1.02,
          }}>
            New beans, seasonal toasties,<br/>and the occasional love letter.
          </h3>
          <div style={{ fontFamily: "'Yellowtail', cursive", fontSize: 32, color: '#D9CA8F' }}>
            once a month, never more.
          </div>

          <form onSubmit={e => { e.preventDefault(); if (email) setSent(true); }}
            style={{
              marginTop: 28,
              display: 'flex', gap: 8, maxWidth: 520, marginInline: 'auto',
              flexWrap: 'wrap', justifyContent: 'center',
            }}
          >
            {sent ? (
              <div style={{
                fontFamily: "'Abril Fatface', serif", fontSize: 26, color: '#80B0B0',
                padding: '16px 24px',
              }}>thanks — see you at 7.</div>
            ) : (
              <>
                <input type="email" required value={email} onChange={e => setEmail(e.target.value)}
                  placeholder="your email"
                  style={{
                    flex: 1, minWidth: 240,
                    background: '#1a1a1a', color: '#fff',
                    border: '1px solid #33312A',
                    padding: '16px 18px',
                    fontFamily: 'Inter', fontSize: 14, outline: 'none',
                  }}
                />
                <button type="submit" style={{
                  fontFamily: 'Inter', fontSize: 12, fontWeight: 700,
                  letterSpacing: '0.2em', textTransform: 'uppercase',
                  background: '#D9CA8F', color: '#000',
                  border: 'none', padding: '16px 24px', cursor: 'pointer',
                }}>Sign me up →</button>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="m-section-pad" style={{ background: '#000', color: '#D9CA8F', padding: '56px 40px 48px' }}>
      <div className="m-stack m-stack-gap-md" style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40,
        alignItems: 'start',
      }}>
        <div>
          <div style={{ fontFamily: "'Yellowtail', cursive", fontSize: 48, color: '#fff', lineHeight: 1 }}>
            la pola cafe
          </div>
          <div style={{
            fontFamily: 'Inter', fontSize: 10, letterSpacing: '0.32em',
            textTransform: 'uppercase', marginTop: 6, color: '#D9CA8F',
          }}>Ashgrove · Brisbane · Est. 2023</div>
          <p style={{
            fontFamily: 'Inter', fontSize: 13, lineHeight: 1.6, color: '#E8D4B0',
            marginTop: 18, maxWidth: 360,
          }}>
            Colombian beans, Brisbane mornings. Come early, the pastries run out.
          </p>
        </div>
        <FootCol title="Visit" items={['87 Amarina Ave', 'Ashgrove QLD 4060', 'Open 7 Mon–Fri']} />
        <FootCol title="Menu" items={['Hot drinks', 'Cold drinks', 'Pastry & toasties', 'Order ahead']} />
        <FootCol title="Elsewhere" items={['@lapolacafe', 'hello@lapolacafe.au', 'Google Reviews']} />
      </div>
      <div style={{
        maxWidth: 1280, margin: '48px auto 0', paddingTop: 20,
        borderTop: '1px solid #33312A',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        flexWrap: 'wrap', gap: 16,
      }}>
        <div style={{ fontFamily: 'Inter', fontSize: 11, color: '#D9CA8F', opacity: 0.7, letterSpacing: '0.12em' }}>
          © 2026 La Pola Cafe · Made by Sites Systems
        </div>
        <div style={{
          fontFamily: 'Inter', fontSize: 10, fontWeight: 700,
          letterSpacing: '0.32em', textTransform: 'uppercase', color: '#D9CA8F',
        }}>
          #AshgroveCoffee
        </div>
      </div>
    </footer>
  );
}

function FootCol({ title, items }) {
  return (
    <div>
      <div style={{
        fontFamily: 'Inter', fontSize: 10, fontWeight: 700,
        letterSpacing: '0.3em', textTransform: 'uppercase', color: '#fff',
        paddingBottom: 10, borderBottom: '1px solid #33312A', marginBottom: 14,
      }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
        {items.map(i => (
          <li key={i} style={{ fontFamily: 'Inter', fontSize: 13, color: '#E8D4B0' }}>
            {i === 'Order ahead' ? (
              <a href="https://www.doordash.com/store/la-pola-cafe-ashgrove-29850449/38137782/" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none' }}>
                {i}
              </a>
            ) : (
              i
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

window.Visit = Visit;
window.Newsletter = Newsletter;
window.Footer = Footer;