// Footer — Layer 1, v7: edge-to-edge 5-column band.
//
// Brief from the client:
// · Use BOTH ends (no centred narrow island)
// · Minimum possible height
// · Tighter line-height
// · Map sits NEXT TO Visit (separate column), not stacked under it
// · Cleanly collapses on small screens
//
// How v7 delivers that:
// · 5 columns: LOGO · VISIT · MAP · CONTACT · STUDIO. The grid
// reaches a wider container (1480 px) and the outer padding
// uses the full viewport edges, so the row sits ear-to-ear
// instead of clustering in the middle.
// · `align-items: center` on the grid — every column is
// vertically centred against the tallest item (the map). Means
// the footer's overall height is just the map height plus
// padding; nothing pads it out unnecessarily.
// · Line-heights pulled down (lists 1.45, address 1.5), gaps
// between list items reduced from 10 → 4 px.
// · Heading-to-body gap reduced from 14 → 8 px.
// · Responsive collapse — clearly defined breakpoints:
// ≥ 1024 px → 5 cols (logo | visit | map | contact | studio)
// 720–1023 → 2 rows: logo+visit+map on top, contact+studio
// below — map sits next to address as before
// 560–719 → 2 cols (visit | map) (contact | studio),
// logo spans full width above
// < 560 → single column, map full-width
const { useState } = React;
// ─── Company facts ─────────────────────────────────────────────────
const COMPANY = {
trading: 'Venoraa Ceramics',
registered: 'The Tiles Company Ltd',
addrLine1: '64 Weir Road',
addrLine2: 'Wimbledon, London',
postcode: 'SW19 8UG',
phoneLondon: '020 3441 4711',
phoneMobile: '07830 385 556',
email: 'info@thetilescompany.com',
instagram: 'https://www.instagram.com/thetilescompany?igsh=YXFibG1vcThkb3Fl',
};
// Map locked to the specific Venoraa Ceramics / The Tiles Company
// business listing on Google Maps. The previous address-only query
// was picking up a different shop at the same street block and
// pulling its (wrong) photos into the embed preview.
//
// MAP_COORDS pins the embed to the exact lat/lng from the studio's
// Google Maps listing — guaranteed correct location, immune to any
// future re-geocoding mistakes.
// MAP_LINK is the studio's own Google Maps share URL, so the
// "Directions" overlay opens THIS business's page (with photos,
// reviews, hours) rather than a generic address search.
const MAP_COORDS = '51.4378929,-0.1900138';
const MAP_SRC = `https://maps.google.com/maps?q=${MAP_COORDS}&z=17&output=embed`;
const MAP_LINK = 'https://maps.app.goo.gl/v74ntM6wDccQe8pv7';
// Single source for the map's pixel height. Drives the iframe
// over-render math too — every other column ends up vertically
// centred against this dimension, so changing it rebalances the
// whole row.
const MAP_H = 112;
function Footer({ navigate }) {
return (
);
}
// ─── Column primitive ──────────────────────────────────────────────
// Tight header → body rhythm (8 px gap, was 14).
function FooterColumn({ title, children }) {
return (
{title}
{children}
);
}
function Sep() {
return ·;
}
// ─── Shared styles ─────────────────────────────────────────────────
const headingText = {
fontFamily: 'var(--sans)', fontSize: '10.5px', fontWeight: 500,
letterSpacing: '0.18em', textTransform: 'uppercase',
color: 'var(--terracotta)',
lineHeight: 1,
margin: 0,
};
const bodyText = {
fontFamily: 'var(--sans)', fontSize: '13px', fontWeight: 400,
lineHeight: 1.5, // was 1.7 — tighter, fewer empty pixels
color: 'var(--dark)',
margin: 0,
};
const listReset = {
listStyle: 'none', margin: 0, padding: 0,
};
// List items carry NO marginBottom — line rhythm is created
// entirely by lineHeight on the link itself, so each list item
// stacks on the same vertical step as the address lines in the
// Visit column (where bodyText sets lineHeight: 1.5).
const listItem = { margin: 0 };
const footerLink = {
background: 'none', border: 'none', cursor: 'pointer', padding: 0,
fontFamily: 'var(--sans)', fontSize: '13px', fontWeight: 400,
color: 'var(--dark)',
textDecoration: 'none',
letterSpacing: '0.01em',
textAlign: 'left',
// Matches bodyText.lineHeight (Visit address) so Studio /
// Contact / Visit all step at exactly the same vertical rhythm.
lineHeight: 1.5,
transition: 'color 0.2s ease, opacity 0.2s ease',
display: 'inline-block', // lineHeight only applies cleanly when block-ish
};
Object.assign(window, { Footer });