/* TireSales.org — homepage mockup (desktop + mobile)
   System: Oswald (display) / IBM Plex Sans (body) / IBM Plex Mono (eyebrow)
   Palette: off-white #F3F0EA · concrete #E3DED4 · graphite #181A1B · amber #E0A11B
*/

const TS = {
  ink:      '#181A1B',
  inkDim:   'rgba(24,26,27,0.62)',
  inkLow:   'rgba(24,26,27,0.34)',
  inkFaint: 'rgba(24,26,27,0.14)',
  bg:       '#F3F0EA',
  panel:    '#E3DED4',
  steel:    '#8B8E8C',
  amber:    '#E0A11B',
  amberDim: 'rgba(224,161,27,0.55)',
};

// Public site config. Claude should update site-config.js for each domain.
const SITE = {
  domain: 'tiresales.org',
  brandName: 'Tire Sales',
  category: 'Commercial Fleet Tire Procurement',
  inquiryApi: 'https://inquiries.brianhaberstroh.com/api/inquiry',
  successMessage: 'Thanks — your inquiry for TireSales.org has been sent.',
  messagePlaceholder: 'Tell us about your fleet, tire program needs, or acquisition interest.',
  ...(window.SITE_CONFIG || {}),
};

/* ---------- shared bits ---------- */

const grainSVG = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")";

const Grain = ({ opacity = 0.18, blend = 'multiply' }) => (
  <div style={{
    position: 'absolute', inset: 0, pointerEvents: 'none',
    backgroundImage: grainSVG,
    opacity, mixBlendMode: blend,
  }} />
);

/* Photo placeholder plate */
const Plate = ({ mood = 'concrete', caption, image, imagePos = 'center', children, style = {}, id }) => {
  const moods = {
    concrete: `
      radial-gradient(ellipse 70% 55% at 50% 18%, rgba(200,190,170,0.35), transparent 62%),
      linear-gradient(180deg, #d8d3c8 0%, #c8c2b4 55%, #b8b0a0 100%)`,
    asphalt: `
      radial-gradient(ellipse 80% 60% at 50% 50%, rgba(80,85,88,0.25), transparent 65%),
      linear-gradient(115deg, #2a2d2f 0%, #3a3d3f 50%, #1e2022 100%)`,
    warehouse: `
      radial-gradient(ellipse 70% 50% at 60% 40%, rgba(180,150,60,0.18), transparent 62%),
      linear-gradient(160deg, #2a2820 0%, #181614 100%)`,
    route: `
      radial-gradient(ellipse 90% 30% at 50% 100%, rgba(224,161,27,0.15), transparent 60%),
      linear-gradient(180deg, #1a1814 0%, #242220 60%, #2e2c28 100%)`,
    bay: `
      radial-gradient(circle 320px at 70% 30%, rgba(224,161,27,0.22), transparent 60%),
      radial-gradient(circle 220px at 20% 80%, rgba(160,120,40,0.12), transparent 65%),
      linear-gradient(180deg, #1e1c18 0%, #0e0d0b 100%)`,
  };
  return (
    <div id={id} style={{
      position: 'relative', overflow: 'hidden',
      background: image
        ? `#1a1814 url("${image}") ${imagePos} / cover no-repeat`
        : (moods[mood] || moods.concrete),
      ...style,
    }}>
      <Grain opacity={image ? 0.15 : 0.22} blend="overlay" />
      {/* vignette */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: image
          ? 'radial-gradient(ellipse 95% 80% at 50% 50%, transparent 60%, rgba(0,0,0,0.38) 100%)'
          : 'radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgba(0,0,0,0.45) 100%)',
      }} />
      {caption && (
        <div style={{
          position: 'absolute', bottom: 14, right: 18,
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 1.4, textTransform: 'uppercase',
          color: 'rgba(235,229,216,0.42)',
        }}>{caption}</div>
      )}
      {children}
    </div>
  );
};

const Eyebrow = ({ children, style = {} }) => (
  <div style={{
    fontFamily: 'IBM Plex Mono, monospace',
    fontSize: 10.5, letterSpacing: 2.2, textTransform: 'uppercase',
    color: TS.amber,
    display: 'inline-flex', alignItems: 'center', gap: 10,
    ...style,
  }}>
    <span style={{ width: 22, height: 1, background: TS.amber, opacity: 0.85 }} />
    <span>{children}</span>
  </div>
);

/* Tire/wheel monogram mark */
const TSMark = ({ size = 56, color = TS.ink, accent = TS.amber }) => (
  <svg viewBox="0 0 64 64" width={size} height={size} style={{ display: 'block' }}>
    {/* outer rim */}
    <circle cx="32" cy="32" r="28" fill="none" stroke={color} strokeOpacity="0.35" strokeWidth="1" />
    {/* inner hub ring */}
    <circle cx="32" cy="32" r="14" fill="none" stroke={color} strokeOpacity="0.25" strokeWidth="1" />
    {/* spokes */}
    <line x1="32" y1="18" x2="32" y2="28" stroke={color} strokeOpacity="0.3" strokeWidth="1.2" />
    <line x1="46" y1="32" x2="36" y2="32" stroke={color} strokeOpacity="0.3" strokeWidth="1.2" />
    <line x1="32" y1="46" x2="32" y2="36" stroke={color} strokeOpacity="0.3" strokeWidth="1.2" />
    <line x1="18" y1="32" x2="28" y2="32" stroke={color} strokeOpacity="0.3" strokeWidth="1.2" />
    {/* T */}
    <path d="M 11 22 L 23 22 M 17 22 L 17 44"
          fill="none" stroke={color} strokeWidth="4" strokeLinecap="square" />
    {/* S */}
    <path d="M 42 22 Q 42 19 36 19 Q 30 19 30 26 Q 30 32 42 32 Q 48 32 48 39 Q 48 46 41 46 Q 34 46 33 42"
          fill="none" stroke={color} strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" />
    {/* amber accent tick */}
    <rect x="30" y="57" width="4" height="3" fill={accent} />
  </svg>
);

/* Wordmark */
const Wordmark = ({ size = 22, color = TS.ink }) => (
  <span style={{
    fontFamily: 'Oswald, "Barlow Condensed", "Antonio", sans-serif',
    fontWeight: 600, fontSize: size, letterSpacing: 1,
    color, lineHeight: 1, textTransform: 'uppercase',
    display: 'inline-flex', alignItems: 'baseline', gap: size * 0.14,
  }}>
    <span>Tire</span><span style={{ fontWeight: 400, opacity: 0.75 }}>Sales</span>
  </span>
);

/* ──────────── Shared form logic ──────────── */

const INQUIRY_API_URL = SITE.inquiryApi;

function useInquiryForm() {
  const [values, setValues] = React.useState({
    name: '', email: '', company: '', offer: '', intendedUse: '', message: '', website: ''
  });
  const [status, setStatus] = React.useState('idle');
  const [errorMsg, setErrorMsg] = React.useState('');

  const set = field => e => setValues(v => ({ ...v, [field]: e.target.value }));

  const handleSubmit = async e => {
    e.preventDefault();
    if (status === 'submitting') return;
    if (!values.name.trim() || !values.message.trim()) {
      setStatus('error'); setErrorMsg('Name and Message are required.'); return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) {
      setStatus('error'); setErrorMsg('Please enter a valid email address.'); return;
    }
    setStatus('submitting');
    try {
      const res = await fetch(INQUIRY_API_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: values.name,
          email: values.email,
          company: values.company,
          offer: values.offer,
          intendedUse: values.intendedUse,
          message: values.message,
          website: values.website,
          budget: values.offer,
          domain: SITE.domain,
          category: SITE.category,
          pageUrl: window.location.href,
          referrer: document.referrer,
          submittedAt: new Date().toISOString(),
        }),
      });
      if (res.ok) {
        setStatus('success');
      } else {
        const d = await res.json().catch(() => ({}));
        setStatus('error');
        setErrorMsg(d.error || d.message || 'Something went wrong. Please try again.');
      }
    } catch {
      setStatus('error');
      setErrorMsg('Something went wrong sending your inquiry. Please try again or contact the owner directly.');
    }
  };

  return { values, status, errorMsg, set, handleSubmit };
}

const MobileContactForm = () => {
  const { values, status, errorMsg, set, handleSubmit } = useInquiryForm();
  const fields = [
    { l: 'Name',    n: 'name',    t: 'text',  r: true, h: 'Required',             p: 'First & last' },
    { l: 'Email',   n: 'email',   t: 'email', r: true, h: 'Required',             p: 'you@company.com' },
    { l: 'Message', n: 'message', t: 'area',  r: true, h: 'Fleet or acquisition', p: SITE.messagePlaceholder },
  ];
  return (
    <form onSubmit={handleSubmit} style={{ marginTop: 36, position: 'relative' }}>
      <div style={{ position: 'absolute', left: '-9999px', height: 0, overflow: 'hidden' }} aria-hidden="true">
        <input type="text" name="website" value={values.website} onChange={set('website')} tabIndex={-1} autoComplete="off" />
      </div>
      {status === 'success' ? (
        <div style={{ padding: '40px 0', fontFamily: 'IBM Plex Mono, monospace',
          fontSize: 10.5, letterSpacing: 2, textTransform: 'uppercase', color: TS.amber, lineHeight: 1.8 }}>
          {SITE.successMessage}
        </div>
      ) : (
        <>
          {status === 'error' && (
            <div style={{ marginBottom: 16, fontFamily: 'IBM Plex Mono, monospace',
              fontSize: 10, letterSpacing: 1.6, textTransform: 'uppercase',
              color: 'rgba(200,90,60,0.9)', lineHeight: 1.6 }}>
              {errorMsg}
            </div>
          )}
          {fields.map(f => (
            <div key={f.l} style={{ marginBottom: 22 }}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
                letterSpacing: 2, textTransform: 'uppercase', color: TS.amber,
                marginBottom: 10, display: 'flex', justifyContent: 'space-between',
              }}>
                <span>{f.l}</span>
                <span style={{ color: TS.inkLow }}>{f.h}</span>
              </div>
              {f.t === 'area' ? (
                <textarea name={f.n} value={values[f.n]} onChange={set(f.n)}
                  placeholder={f.p} required={f.r}
                  style={{
                    background: 'none', border: 'none', width: '100%',
                    borderBottom: `1px solid ${TS.inkFaint}`, paddingBottom: 12,
                    minHeight: 100, resize: 'vertical',
                    fontFamily: 'Oswald, sans-serif', fontSize: 20,
                    color: TS.ink, lineHeight: 1.3, letterSpacing: 0,
                    outline: 'none', caretColor: TS.amber,
                  }}
                />
              ) : (
                <input type={f.t} name={f.n} value={values[f.n]} onChange={set(f.n)}
                  placeholder={f.p} required={f.r}
                  style={{
                    background: 'none', border: 'none', width: '100%',
                    borderBottom: `1px solid ${TS.inkFaint}`, paddingBottom: 12,
                    fontFamily: 'Oswald, sans-serif', fontSize: 20,
                    color: TS.ink, letterSpacing: 0,
                    outline: 'none', caretColor: TS.amber,
                  }}
                />
              )}
            </div>
          ))}
          <button type="submit" disabled={status === 'submitting'} style={{
            display: 'inline-flex', alignItems: 'center', gap: 12, marginTop: 12,
            padding: '14px 22px',
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
            letterSpacing: 2.2, textTransform: 'uppercase',
            color: '#fff', background: status === 'submitting' ? TS.steel : TS.amber,
            border: 'none', cursor: status === 'submitting' ? 'default' : 'pointer',
            opacity: status === 'submitting' ? 0.7 : 1,
          }}>
            {status === 'submitting' ? 'Sending…' : 'Start the Conversation'}
          </button>
          <div style={{
            marginTop: 18,
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
            letterSpacing: 1.6, textTransform: 'uppercase', color: TS.inkLow, lineHeight: 1.7,
          }}>
            Concept shown for illustrative purposes.
          </div>
        </>
      )}
    </form>
  );
};

/* ============================================================
   DESKTOP — 1440 wide
   ============================================================ */

const Desktop = () => (
  <div style={{
    width: 1440, background: TS.bg, color: TS.ink,
    fontFamily: 'IBM Plex Sans, sans-serif', fontSize: 15, lineHeight: 1.55,
    position: 'relative', overflow: 'hidden',
  }}>
    <DesktopNav />
    <DesktopHero />
    <DesktopStory />
    <DesktopCulture />
    <DesktopManifesto />
    <DesktopIdentity />
    <DesktopContact />
    <DesktopFooter />
  </div>
);

const DesktopNav = () => (
  <div style={{
    position: 'absolute', top: 0, left: 0, right: 0, zIndex: 20,
    padding: '26px 56px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
      <Wordmark size={22} />
      <span style={{ width: 1, height: 14, background: TS.inkFaint }} />
      <span style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
        letterSpacing: 2.4, textTransform: 'uppercase', color: TS.inkLow,
      }}>TireSales.org · Fleet Procurement</span>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
      {[['Fleet Programs', '#story'], ['Tire Sourcing', '#culture'], ['Uptime', '#manifesto']].map(([l, href], i) => (
        <a key={l} href={href} style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
          letterSpacing: 2.2, textTransform: 'uppercase',
          color: i === 0 ? TS.ink : TS.inkDim, textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          <span style={{
            color: TS.amber, opacity: 0.7,
            fontSize: 9, fontVariantNumeric: 'tabular-nums',
          }}>0{i + 1}</span>
          {l}
        </a>
      ))}
      <a href="#inquiry" style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
        letterSpacing: 2.2, textTransform: 'uppercase', color: TS.ink,
        textDecoration: 'none',
        border: `1px solid ${TS.inkFaint}`, padding: '10px 18px',
        display: 'inline-flex', alignItems: 'center', gap: 8,
      }}>
        Domain Inquiry
        <span style={{ width: 5, height: 5, background: TS.amber, borderRadius: 0 }} />
      </a>
    </div>
  </div>
);

const DesktopHero = () => (
  <Plate id="hero" image="media/hero.jpg" imagePos="center" caption="// 01 · fleet warehouse · tire procurement · amber" style={{ height: 880 }}>
    {/* lower gradient */}
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, height: 460,
      background: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.32) 45%, rgba(0,0,0,0.72) 100%)',
    }} />

    {/* corner indices */}
    <div style={{
      position: 'absolute', top: 110, left: 56,
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: 'rgba(235,229,216,0.5)',
    }}>
      N° 001 — Fleet Ready
    </div>
    <div style={{
      position: 'absolute', top: 110, right: 56,
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: 'rgba(235,229,216,0.5)',
      textAlign: 'right',
    }}>
      Fleet / Uptime / Procurement
    </div>

    {/* hero copy */}
    <div style={{
      position: 'absolute', left: 56, bottom: 96, maxWidth: 940,
    }}>
      <div style={{ marginBottom: 28 }}>
        <Eyebrow style={{ color: 'rgba(224,161,27,0.9)' }}>Commercial Fleet Tire Procurement</Eyebrow>
      </div>
      <h1 style={{
        fontFamily: 'Oswald, "Barlow Condensed", sans-serif', fontWeight: 600,
        fontSize: 148, lineHeight: 0.95, letterSpacing: -1,
        margin: 0, color: '#F3F0EA', textTransform: 'uppercase',
      }}>
        Commercial tire<br />
        <span style={{ fontWeight: 400 }}>sourcing built </span>
        <span style={{
          fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05,
          color: TS.amber, fontWeight: 500, textTransform: 'none',
        }}>around uptime.</span>
      </h1>
      <p style={{
        marginTop: 84, marginBottom: 0, maxWidth: 560,
        fontSize: 17, lineHeight: 1.55, color: 'rgba(235,229,216,0.75)',
      }}>
        TireSales.org is a premium fleet tire procurement concept for operators who need
        the right tire programs, replacement planning, and supplier-ready workflows before
        vehicles come off route.
      </p>

      <div style={{ marginTop: 40, display: 'flex', alignItems: 'center', gap: 28 }}>
        <a href="#inquiry" style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
          letterSpacing: 2.4, textTransform: 'uppercase',
          color: '#181A1B', background: TS.amber,
          padding: '18px 28px', textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 14,
        }}>
          Inquire About TireSales.org
          <span style={{ display: 'inline-block', width: 18, height: 1, background: '#181A1B' }} />
        </a>
        <a href="#story" style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
          letterSpacing: 2.4, textTransform: 'uppercase',
          color: 'rgba(235,229,216,0.85)', textDecoration: 'none',
          padding: '18px 0',
          display: 'inline-flex', alignItems: 'center', gap: 12,
          borderBottom: '1px solid rgba(235,229,216,0.22)',
        }}>
          View Fleet Concept
        </a>
      </div>
    </div>

    {/* scroll marker */}
    <div style={{
      position: 'absolute', right: 56, bottom: 64,
      display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 12,
    }}>
      <div style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
        letterSpacing: 2.4, textTransform: 'uppercase', color: 'rgba(235,229,216,0.4)',
      }}>Scroll · 01 of 06</div>
      <div style={{ width: 1, height: 56, background: `linear-gradient(180deg, ${TS.amber}, transparent)` }} />
    </div>
  </Plate>
);

const DesktopStory = () => (
  <div id="story" style={{
    background: TS.bg, padding: '160px 56px 160px',
    display: 'grid', gridTemplateColumns: '560px 1fr', gap: 96,
  }}>
    <Plate image="media/story.jpg" imagePos="center" caption="// 02 · tire inventory · service bay" style={{ height: 720 }} />

    <div style={{ paddingTop: 24, alignSelf: 'start' }}>
      <Eyebrow>01 — The Concept</Eyebrow>
      <h2 style={{
        marginTop: 36, marginBottom: 36, maxWidth: 660,
        fontFamily: 'Oswald, sans-serif', fontWeight: 500,
        fontSize: 72, lineHeight: 0.98, letterSpacing: -0.5,
        color: TS.ink, textTransform: 'uppercase',
      }}>
        Commercial procurement,<br />
        built for fleets that<br />
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: TS.amber, fontWeight: 400, textTransform: 'none' }}>cannot afford downtime.</span>
      </h2>
      <p style={{
        fontSize: 18, lineHeight: 1.6, color: TS.inkDim, maxWidth: 520, margin: 0,
      }}>
        Tire Sales is a commercial tire sourcing concept built for operators who move product,
        deliver services, and maintain mixed-use vehicle fleets. Route vehicles need the right
        tires before they leave the yard — not emergency replacements when they come off route.
      </p>

      <div style={{
        marginTop: 64, paddingTop: 36, borderTop: `1px solid ${TS.inkFaint}`,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40, maxWidth: 580,
      }}>
        {[
          { n: 'B2B',   l: 'Procurement focus' },
          { n: 'Fleet', l: 'Tire programs' },
          { n: '∞',     l: 'Scale potential' },
        ].map(s => (
          <div key={s.l}>
            <div style={{
              fontFamily: 'Oswald, sans-serif', fontWeight: 500,
              fontSize: 56, lineHeight: 1, color: TS.ink,
            }}>{s.n}</div>
            <div style={{
              marginTop: 10,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
              letterSpacing: 1.8, textTransform: 'uppercase', color: TS.inkLow,
            }}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const fleetItems = [
  { n: '01', label: 'Route Vehicles',  mood: 'asphalt',   image: 'media/parts.jpg',   h: 560, blurb: 'Commercial tires matched to route demands — load ratings, duty cycles, and tread wear built for mileage.',          cap: '// 02 · tread inspection · commercial spec' },
  { n: '02', label: 'Service Fleets',  mood: 'bay',       image: 'media/builds.jpg',  h: 720, blurb: 'Work trucks, service vans, and municipal units. Tire programs sized and specified for the whole fleet.',            cap: '// 03 · service fleet · tire program' },
  { n: '03', label: 'Procurement',     mood: 'warehouse', image: 'media/apparel.jpg', h: 720, blurb: 'Volume quote workflows, size coordination, and supplier-ready procurement for commercial buyers at scale.',          cap: '// 04 · procurement · volume sourcing' },
  { n: '04', label: 'Fleet Uptime',    mood: 'route',     image: 'media/culture.jpg', h: 560, blurb: 'Planned replacement cycles and inventory coordination keep vehicles off the shoulder and on route.',                 cap: '// 05 · route-ready · fleet uptime' },
];

const DesktopCulture = () => (
  <div id="culture" style={{ background: TS.bg, padding: '40px 56px 180px' }}>
    <div style={{
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      paddingBottom: 56, borderBottom: `1px solid ${TS.inkFaint}`, marginBottom: 64,
    }}>
      <div>
        <Eyebrow>02 — Fleet Programs</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0, maxWidth: 900,
          fontFamily: 'Oswald, sans-serif', fontWeight: 500,
          fontSize: 96, lineHeight: 0.95, letterSpacing: -0.8,
          color: TS.ink, textTransform: 'uppercase',
        }}>
          Four pillars of<br />
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400, color: TS.inkDim, textTransform: 'none' }}>commercial tire service.</span>
        </h2>
      </div>
      <div style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
        letterSpacing: 2.2, textTransform: 'uppercase', color: TS.inkLow,
        textAlign: 'right', paddingBottom: 12,
      }}>
        Route Vehicles · Service Fleets<br/>Procurement · Uptime
      </div>
    </div>

    {/* asymmetric staircase grid */}
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
      columnGap: 24, rowGap: 64,
    }}>
      {fleetItems.map((c, i) => (
        <div key={c.label} style={{ marginTop: i % 2 === 1 ? 64 : 0 }}>
          <Plate mood={c.mood} image={c.image} caption={c.cap} style={{ height: c.h }} />
          <div style={{
            marginTop: 22, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 18 }}>
              <span style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 11,
                letterSpacing: 2, color: TS.amber,
              }}>N° {c.n}</span>
              <h3 style={{
                fontFamily: 'Oswald, sans-serif', fontWeight: 500,
                fontSize: 44, lineHeight: 1, letterSpacing: -0.3,
                color: TS.ink, margin: 0, textTransform: 'uppercase',
              }}>{c.label}</h3>
            </div>
            <a href="#inquiry" style={{
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
              letterSpacing: 2.2, textTransform: 'uppercase',
              color: TS.inkDim, textDecoration: 'none',
            }}>Inquire →</a>
          </div>
          <p style={{
            marginTop: 14, marginBottom: 0, maxWidth: 440,
            fontSize: 15.5, color: TS.inkDim,
          }}>{c.blurb}</p>
        </div>
      ))}
    </div>
  </div>
);

const DesktopManifesto = () => (
  <Plate id="manifesto" image="media/manifesto.jpg" caption="// 03 · sourcing · fleet ready · route planned" style={{ height: 700 }}>
    <div style={{
      position: 'absolute', inset: 0,
      background: 'radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.62) 100%)',
    }} />
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexDirection: 'column',
    }}>
      <div style={{ marginBottom: 56 }}><Eyebrow style={{ color: 'rgba(224,161,27,0.9)' }}>03 — Sourcing</Eyebrow></div>
      <h2 style={{
        margin: 0, textAlign: 'center',
        fontFamily: 'Oswald, sans-serif', fontWeight: 500,
        fontSize: 128, lineHeight: 0.92, letterSpacing: -1.2,
        color: '#F3F0EA', textTransform: 'uppercase',
      }}>
        Procurement<br />
        built for<br />
        <span style={{ color: TS.amber, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400, textTransform: 'none' }}>uptime.</span>
      </h2>
      <div style={{
        marginTop: 56, display: 'flex', alignItems: 'center', gap: 18,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
        letterSpacing: 2.4, textTransform: 'uppercase', color: 'rgba(235,229,216,0.4)',
      }}>
        <span style={{ width: 32, height: 1, background: 'rgba(235,229,216,0.2)' }} />
        <span>Supplier-coordinated · Fleet-specified · Route-ready</span>
        <span style={{ width: 32, height: 1, background: 'rgba(235,229,216,0.2)' }} />
      </div>
    </div>
  </Plate>
);

/* Artifact card — physical brand object feel */
const Artifact = ({ label, footnote, stitched = false, accentTab = false, children, style = {}, contentStyle = {} }) => (
  <div style={{
    position: 'relative', background: TS.bg,
    border: `1px solid ${TS.inkFaint}`,
    boxShadow: 'inset 0 0 40px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.6)',
    ...style,
  }}>
    {/* corner ticks */}
    {[
      { top: 8, left: 8, b: '1px 0 0 1px' },
      { top: 8, right: 8, b: '1px 1px 0 0' },
      { bottom: 8, left: 8, b: '0 0 1px 1px' },
      { bottom: 8, right: 8, b: '0 1px 1px 0' },
    ].map((c, i) => (
      <span key={i} style={{
        position: 'absolute', width: 10, height: 10,
        borderStyle: 'solid', borderColor: TS.amberDim, borderWidth: c.b,
        ...c,
      }} />
    ))}
    {stitched && (
      <div style={{
        position: 'absolute', inset: 18, pointerEvents: 'none',
        border: `1px dashed rgba(224,161,27,0.25)`,
      }} />
    )}
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: grainSVG, opacity: 0.07, mixBlendMode: 'multiply',
    }} />
    {accentTab && (
      <span style={{
        position: 'absolute', top: -1, left: 32, width: 22, height: 4,
        background: TS.amber,
      }} />
    )}
    <div style={{
      position: 'relative', zIndex: 1, height: '100%',
      display: 'flex', flexDirection: 'column', ...contentStyle,
    }}>
      <div style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
        letterSpacing: 2.4, textTransform: 'uppercase', color: TS.inkLow,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <span style={{ width: 10, height: 1, background: TS.amberDim }} />
        {label}
      </div>
      {children}
      {footnote && (
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2.2, textTransform: 'uppercase', color: TS.inkLow,
        }}>{footnote}</div>
      )}
    </div>
  </div>
);

const programNotes = [
  { n: '01', t: 'Tread Spec',        kind: 'metal',   d: 'Load index, speed rating, tread pattern, and sidewall spec matched to each vehicle type and route demand.' },
  { n: '02', t: 'Duty Cycle',        kind: 'stance',  d: 'Highway, urban, mixed-use, and off-road profiles — matched to how the vehicle actually runs its routes.' },
  { n: '03', t: 'Replacement Plan',  kind: 'leather', d: 'Mileage reviews, wear tracking, and predictive replacement before tires become an unplanned service event.' },
  { n: '04', t: 'Quote Workflow',    kind: 'tank',    d: 'Fleet size, axle positions, and size specs submitted in a structured request to procurement-ready suppliers.' },
  { n: '05', t: 'Service Network',   kind: 'shop',    d: 'Dealer and service bay coordination. The right tire delivered and mounted across the full fleet.' },
  { n: '06', t: 'Fleet Uptime',      kind: 'road',    d: 'Tire failure is a missed route and an unplanned service call. Planned replacement keeps vehicles working.' },
];

const ProgramGlyph = ({ kind, size = 44 }) => {
  const s = size; const cx = s/2; const cy = s/2;
  const stroke = TS.amber;
  const dim = TS.inkLow;
  const ink = TS.ink;
  switch (kind) {
    case 'stance': // vehicle profile silhouette
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <line x1={s*0.08} y1={s*0.82} x2={s*0.92} y2={s*0.82} stroke={dim} strokeWidth="1" />
          <circle cx={s*0.26} cy={s*0.66} r={s*0.14} fill="none" stroke={stroke} strokeWidth="1.2" />
          <circle cx={s*0.74} cy={s*0.66} r={s*0.14} fill="none" stroke={stroke} strokeWidth="1.2" />
          <line x1={s*0.30} y1={s*0.58} x2={s*0.70} y2={s*0.58} stroke={ink} strokeWidth="1.4" />
          <line x1={s*0.42} y1={s*0.58} x2={s*0.46} y2={s*0.48} stroke={ink} strokeWidth="1" />
        </svg>
      );
    case 'tank': // spec shape / quote form outline
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <path d={`M ${s*0.18} ${cy} Q ${s*0.30} ${s*0.30}, ${s*0.62} ${s*0.30} Q ${s*0.86} ${s*0.32}, ${s*0.82} ${cy} Q ${s*0.78} ${s*0.72}, ${s*0.50} ${s*0.72} Q ${s*0.22} ${s*0.72}, ${s*0.18} ${cy} Z`} fill="none" stroke={stroke} strokeWidth="1.2" />
          <path d={`M ${s*0.28} ${s*0.42} Q ${s*0.42} ${s*0.36}, ${s*0.58} ${s*0.40}`} fill="none" stroke={dim} strokeWidth="0.8" opacity="0.7" />
          <circle cx={s*0.66} cy={cy} r="1.6" fill={stroke} />
        </svg>
      );
    case 'metal': // spoked wheel / tire cross-section
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={cx} cy={cy} r={s*0.36} fill="none" stroke={stroke} strokeWidth="1.2" />
          <circle cx={cx} cy={cy} r={s*0.12} fill="none" stroke={dim} strokeWidth="0.8" />
          <circle cx={cx} cy={cy} r={s*0.04} fill={stroke} />
          {[0, 45, 90, 135].map(a => {
            const rad = (a * Math.PI) / 180;
            const x1 = cx + Math.cos(rad) * s*0.12;
            const y1 = cy + Math.sin(rad) * s*0.12;
            const x2 = cx + Math.cos(rad) * s*0.36;
            const y2 = cy + Math.sin(rad) * s*0.36;
            const x1b = cx - Math.cos(rad) * s*0.12;
            const y1b = cy - Math.sin(rad) * s*0.12;
            const x2b = cx - Math.cos(rad) * s*0.36;
            const y2b = cy - Math.sin(rad) * s*0.36;
            return (
              <g key={a}>
                <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={dim} strokeWidth="0.8" />
                <line x1={x1b} y1={y1b} x2={x2b} y2={y2b} stroke={dim} strokeWidth="0.8" />
              </g>
            );
          })}
        </svg>
      );
    case 'leather': // schedule grid / plan
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.16} y={s*0.22} width={s*0.68} height={s*0.56} fill="none" stroke={dim} strokeWidth="1" />
          <rect x={s*0.22} y={s*0.28} width={s*0.56} height={s*0.44} fill="none" stroke={stroke} strokeWidth="0.8" strokeDasharray="2 3" />
          <line x1={s*0.50} y1={s*0.30} x2={s*0.50} y2={s*0.70} stroke={dim} strokeWidth="0.6" strokeDasharray="2 3" />
        </svg>
      );
    case 'shop': // service bay pendant light
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <line x1={cx} y1={s*0.08} x2={cx} y2={s*0.36} stroke={dim} strokeWidth="1" />
          <circle cx={cx} cy={s*0.42} r={s*0.07} fill={stroke} />
          <path d={`M ${cx} ${s*0.48} L ${s*0.28} ${s*0.80} L ${s*0.72} ${s*0.80} Z`} fill={stroke} opacity="0.16" stroke={stroke} strokeWidth="0.6" />
          <line x1={s*0.10} y1={s*0.82} x2={s*0.90} y2={s*0.82} stroke={dim} strokeWidth="1" />
        </svg>
      );
    case 'road': // perspective / route lines
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={cx} cy={s*0.38} r="1.4" fill={stroke} />
          <line x1={s*0.08} y1={s*0.86} x2={cx} y2={s*0.38} stroke={dim} strokeWidth="1" />
          <line x1={s*0.92} y1={s*0.86} x2={cx} y2={s*0.38} stroke={dim} strokeWidth="1" />
          <line x1={s*0.32} y1={s*0.86} x2={s*0.46} y2={s*0.48} stroke={stroke} strokeWidth="1.2" />
          <line x1={s*0.42} y1={s*0.86} x2={s*0.49} y2={s*0.56} stroke={stroke} strokeWidth="1" strokeDasharray="3 3" />
        </svg>
      );
    default: return null;
  }
};

const DesktopIdentity = () => (
  <div id="presence" style={{ background: TS.panel, padding: '160px 56px 160px', position: 'relative' }}>
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: grainSVG, opacity: 0.10, mixBlendMode: 'multiply',
    }} />

    <div style={{ position: 'relative', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 72, gap: 60 }}>
      <div>
        <Eyebrow>04 — Programs</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0,
          fontFamily: 'Oswald, sans-serif', fontWeight: 500,
          fontSize: 80, lineHeight: 0.96, letterSpacing: -0.6,
          color: TS.ink, textTransform: 'uppercase',
        }}>
          Tire programs built<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: TS.amber, fontWeight: 400, textTransform: 'none' }}>around how fleets actually run.</span>
        </h2>
      </div>
      <div style={{
        maxWidth: 420,
        fontSize: 15.5, lineHeight: 1.65, color: TS.inkDim, paddingBottom: 12,
      }}>
        Commercial operators need size accuracy, duty-cycle matching, volume coordination,
        and a supplier relationship that works across dozens of vehicles and multiple axle specs.
      </div>
    </div>

    {/* Six program cards */}
    <div style={{
      position: 'relative', marginTop: 24,
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
    }}>
      {programNotes.map((m) => (
        <Artifact
          key={m.t}
          label={`N° ${m.n}`}
          contentStyle={{ padding: '28px 28px 24px', justifyContent: 'space-between', minHeight: 240 }}
        >
          <div style={{
            marginTop: 18,
            display: 'flex', alignItems: 'center', gap: 18,
          }}>
            <ProgramGlyph kind={m.kind} size={44} />
            <h3 style={{
              margin: 0, whiteSpace: 'nowrap',
              fontFamily: 'Oswald, sans-serif', fontWeight: 500,
              fontSize: 28, letterSpacing: 0.5, color: TS.ink, textTransform: 'uppercase',
            }}>{m.t}</h3>
          </div>
          <p style={{
            margin: 0, marginTop: 18,
            fontSize: 14.5, lineHeight: 1.55, color: TS.inkDim,
          }}>{m.d}</p>
        </Artifact>
      ))}
    </div>

    {/* bottom brand strip */}
    <div style={{
      position: 'relative', marginTop: 64, paddingTop: 28,
      borderTop: `1px solid ${TS.inkFaint}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: TS.inkLow,
    }}>
      <span>Fleet spec · Route match · Volume sourcing · Planned replacement</span>
      <span>Tread wear · Duty cycle · Axle position · Seasonal planning</span>
      <span style={{ color: TS.amber }}>Uptime-focused · Procurement-ready · B2B-first</span>
    </div>
  </div>
);

const DesktopContact = () => {
  const { values, status, errorMsg, set, handleSubmit } = useInquiryForm();
  const formFields = [
    { label: 'Name',    name: 'name',    type: 'text',  required: true,  hint: 'Required',  placeholder: 'First & last' },
    { label: 'Email',   name: 'email',   type: 'email', required: true,  hint: 'Required',  placeholder: 'you@company.com' },
    { label: 'Company', name: 'company', type: 'text',  required: false, hint: 'Optional',  placeholder: 'Fleet operator or buyer' },
  ];
  return (
    <div id="inquiry" style={{
      background: TS.bg, padding: '180px 56px',
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96,
    }}>
      <div>
        <Eyebrow>06 — Inquire</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 36, maxWidth: 580,
          fontFamily: 'Oswald, sans-serif', fontWeight: 500,
          fontSize: 96, lineHeight: 0.95, letterSpacing: -0.8,
          color: TS.ink, textTransform: 'uppercase',
        }}>
          Acquire<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: TS.amber, fontWeight: 400, textTransform: 'none' }}>TireSales.org</span>
        </h2>
        <p style={{ maxWidth: 440, fontSize: 16, lineHeight: 1.6, color: TS.inkDim, margin: 0 }}>
          The brand concept above represents one possible direction.{' '}
          <span style={{ color: TS.ink }}>TireSales.org</span> could support a B2B lead-gen platform,
          commercial tire dealer network, fleet service marketplace, or procurement-focused media property.
          The domain is available for the right buyer.
        </p>
        <div style={{
          marginTop: 72, paddingTop: 32, borderTop: `1px solid ${TS.inkFaint}`,
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, maxWidth: 520,
        }}>
          {[
            { l: 'Domain',    v: 'TireSales.org' },
            { l: 'Direction', v: 'Fleet tire procurement' },
            { l: 'Status',    v: 'Open to serious inquiries' },
          ].map(b => (
            <div key={b.l}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 2.2, textTransform: 'uppercase', color: TS.amber,
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ width: 8, height: 1, background: TS.amberDim }} />
                {b.l}
              </div>
              <div style={{
                marginTop: 12,
                fontFamily: 'Oswald, sans-serif', fontSize: 22, color: TS.ink, lineHeight: 1.2,
              }}>
                {b.v}
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 40, maxWidth: 460,
          display: 'flex', gap: 14, alignItems: 'flex-start',
          paddingTop: 18, borderTop: `1px dashed ${TS.inkFaint}`,
        }}>
          <span style={{
            marginTop: 4, width: 6, height: 6, background: TS.amber, flexShrink: 0,
          }} />
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
            letterSpacing: 1.6, textTransform: 'uppercase', color: TS.inkLow, lineHeight: 1.7,
          }}>
            This website is an illustrative brand concept for TireSales.org. No live tire inventory,
            pricing, dealer network, or service relationship is being represented. TireSales.org is
            available for acquisition.
          </div>
        </div>
      </div>

      <form onSubmit={handleSubmit} style={{ paddingTop: 80, position: 'relative' }}>
        {/* honeypot */}
        <div style={{ position: 'absolute', left: '-9999px', height: 0, overflow: 'hidden' }} aria-hidden="true">
          <input type="text" name="website" value={values.website} onChange={set('website')} tabIndex={-1} autoComplete="off" />
        </div>
        {status === 'success' ? (
          <div style={{ padding: '56px 0', fontFamily: 'IBM Plex Mono, monospace',
            fontSize: 12, letterSpacing: 2, textTransform: 'uppercase', color: TS.amber, lineHeight: 1.8 }}>
            {SITE.successMessage}
          </div>
        ) : (
          <>
            {status === 'error' && (
              <div style={{ marginBottom: 20, fontFamily: 'IBM Plex Mono, monospace',
                fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase',
                color: 'rgba(200,90,60,0.9)', lineHeight: 1.6 }}>
                {errorMsg}
              </div>
            )}
            {formFields.map(f => (
              <div key={f.label} style={{ marginBottom: 30 }}>
                <div style={{
                  fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                  letterSpacing: 2.2, textTransform: 'uppercase', color: TS.amber,
                  marginBottom: 12, display: 'flex', justifyContent: 'space-between',
                }}>
                  <span>{f.label}</span>
                  <span style={{ color: TS.inkLow }}>{f.hint}</span>
                </div>
                <input
                  type={f.type}
                  name={f.name}
                  value={values[f.name]}
                  onChange={set(f.name)}
                  placeholder={f.placeholder}
                  required={f.required}
                  style={{
                    background: 'none', border: 'none', width: '100%',
                    borderBottom: `1px solid ${TS.inkFaint}`,
                    paddingBottom: 14,
                    fontFamily: 'Oswald, sans-serif', fontSize: 26,
                    color: TS.ink, letterSpacing: 0.2,
                    outline: 'none', caretColor: TS.amber,
                  }}
                />
              </div>
            ))}
            <div style={{ marginBottom: 44 }}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 2.2, textTransform: 'uppercase', color: TS.amber,
                marginBottom: 12, display: 'flex', justifyContent: 'space-between',
              }}>
                <span>Message</span>
                <span style={{ color: TS.inkLow }}>Fleet or acquisition</span>
              </div>
              <textarea
                name="message"
                value={values.message}
                onChange={set('message')}
                placeholder={SITE.messagePlaceholder}
                required
                style={{
                  background: 'none', border: 'none', width: '100%',
                  borderBottom: `1px solid ${TS.inkFaint}`,
                  paddingBottom: 14, minHeight: 140, resize: 'vertical',
                  fontFamily: 'Oswald, sans-serif', fontSize: 26,
                  color: TS.ink, letterSpacing: 0.2,
                  outline: 'none', caretColor: TS.amber,
                }}
              />
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
              <button
                type="submit"
                disabled={status === 'submitting'}
                style={{
                  fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
                  letterSpacing: 2.4, textTransform: 'uppercase',
                  color: '#fff', background: status === 'submitting' ? TS.steel : TS.amber,
                  padding: '20px 32px', border: 'none',
                  cursor: status === 'submitting' ? 'default' : 'pointer',
                  display: 'inline-flex', alignItems: 'center', gap: 16,
                  opacity: status === 'submitting' ? 0.7 : 1,
                }}
              >
                {status === 'submitting' ? 'Sending…' : 'Start the Conversation'}
                <span style={{ width: 22, height: 1, background: '#fff', display: 'inline-block' }} />
              </button>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 1.8, textTransform: 'uppercase', color: TS.inkLow,
                textAlign: 'right', lineHeight: 1.6, maxWidth: 220,
              }}>
                Concept shown for<br/>illustrative purposes.
              </div>
            </div>
          </>
        )}
      </form>
    </div>
  );
};

const DesktopFooter = () => (
  <div id="footer" style={{
    background: TS.panel, padding: '64px 56px 48px',
    borderTop: `1px solid ${TS.inkFaint}`,
  }}>
    <div style={{
      display: 'grid', gridTemplateColumns: '1.1fr 1fr 1fr 1fr', gap: 56,
      paddingBottom: 56,
    }}>
      {/* brand block */}
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
          <TSMark size={48} />
          <div>
            <div style={{
              fontFamily: 'Oswald, sans-serif', fontWeight: 600, fontSize: 28,
              color: TS.ink, lineHeight: 1, letterSpacing: 1, textTransform: 'uppercase',
            }}>Tire<span style={{ fontWeight: 400, opacity: 0.75 }}>Sales</span></div>
            <div style={{
              marginTop: 8,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
              letterSpacing: 2.2, textTransform: 'uppercase', color: TS.amber,
            }}>Fleet Uptime. Procurement Ready.</div>
          </div>
        </div>
        <p style={{
          marginTop: 28, marginBottom: 0, maxWidth: 320,
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
          letterSpacing: 1.6, textTransform: 'uppercase', color: TS.inkLow, lineHeight: 1.7,
        }}>
          This website is an illustrative brand concept for{' '}
          <span style={{ color: TS.inkDim }}>TireSales.org</span>.
          No live tire inventory, pricing, dealer network, or service relationship is being
          represented. TireSales.org is independently owned and available for acquisition.
        </p>
      </div>
      {[
        { h: 'Concept', l: [
          { t: 'Brand Direction',  href: '#story' },
          { t: 'Tire Programs',    href: '#presence' },
          { t: 'Use Cases',        href: '#culture' },
        ]},
        { h: 'Domain', l: [
          { t: 'TireSales.org',       href: '#inquiry' },
          { t: 'Acquisition Inquiry', href: '#inquiry' },
          { t: 'Contact',             href: '#inquiry' },
        ]},
        { h: 'Note', l: [
          { t: 'Independent Concept',         href: null },
          { t: 'No Manufacturer Affiliation', href: null },
        ]},
      ].map(g => (
        <div key={g.h}>
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
            letterSpacing: 2.2, textTransform: 'uppercase', color: TS.inkLow,
            marginBottom: 18, display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ width: 8, height: 1, background: TS.amberDim }} />
            {g.h}
          </div>
          <div style={{ display: 'grid', gap: 10 }}>
            {g.l.map(x => (
              <a key={x.t} href={x.href || undefined} style={{
                fontFamily: 'Oswald, sans-serif', fontSize: 20, color: TS.ink,
                letterSpacing: 0.5, textDecoration: 'none', lineHeight: 1.15,
                textTransform: 'uppercase',
              }}>{x.t}</a>
            ))}
          </div>
        </div>
      ))}
    </div>
    <div style={{
      paddingTop: 28, borderTop: `1px solid ${TS.inkFaint}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
      letterSpacing: 2, textTransform: 'uppercase', color: TS.inkLow,
    }}>
      <span>© MMXXVI · Tire Sales · Concept presentation</span>
      <span>Independently owned · Available for acquisition</span>
      <span style={{ color: TS.amber }}>Volume One — 001</span>
    </div>
  </div>
);

/* ============================================================
   MOBILE — 390 wide
   ============================================================ */

const Mobile = () => (
  <div style={{
    width: 390, background: TS.bg, color: TS.ink,
    fontFamily: 'IBM Plex Sans, sans-serif', fontSize: 14, lineHeight: 1.55,
    position: 'relative', overflow: 'hidden',
  }}>
    {/* status bar */}
    <div style={{
      height: 44, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 22px', fontFamily: 'IBM Plex Mono, monospace', fontSize: 11,
      color: TS.ink, fontWeight: 600, position: 'absolute', top: 0, left: 0, right: 0, zIndex: 30,
    }}>
      <span>9:41</span>
      <span style={{ display: 'flex', gap: 6 }}>
        <span>●●●●</span><span>●●</span>
      </span>
    </div>

    {/* nav */}
    <div style={{
      position: 'absolute', top: 44, left: 0, right: 0, zIndex: 20,
      padding: '16px 22px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <Wordmark size={18} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <span style={{ width: 22, height: 1, background: TS.ink }} />
        <span style={{ width: 16, height: 1, background: TS.ink, alignSelf: 'flex-end' }} />
      </div>
    </div>

    {/* hero */}
    <Plate id="m-hero" image="media/hero.jpg" imagePos="center" caption="// 01 · fleet · amber" style={{ height: 720, paddingTop: 100 }}>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: 380,
        background: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.8) 100%)',
      }} />
      <div style={{
        position: 'absolute', left: 22, bottom: 56, right: 22,
      }}>
        <div style={{ marginBottom: 18 }}>
          <Eyebrow style={{ color: 'rgba(224,161,27,0.9)' }}>Commercial Fleet Tires</Eyebrow>
        </div>
        <h1 style={{
          fontFamily: 'Oswald, sans-serif', fontWeight: 600,
          fontSize: 64, lineHeight: 0.9, letterSpacing: -0.6,
          margin: 0, color: '#F3F0EA', textTransform: 'uppercase',
        }}>
          Uptime starts<br/>with the
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: TS.amber, fontWeight: 500, textTransform: 'none' }}> right tire.</span>
        </h1>
        <p style={{ marginTop: 52, color: 'rgba(235,229,216,0.75)', fontSize: 14, lineHeight: 1.55 }}>
          TireSales.org is a premium fleet tire procurement concept for commercial operators,
          service fleets, and dealer networks.
        </p>
        <a href="#inquiry" style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          marginTop: 24, padding: '14px 22px',
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
          letterSpacing: 2.2, textTransform: 'uppercase',
          color: '#181A1B', background: TS.amber, textDecoration: 'none',
        }}>
          Inquire About TireSales.org
          <span style={{ width: 16, height: 1, background: '#181A1B' }} />
        </a>
      </div>
    </Plate>

    {/* story */}
    <div id="m-story" style={{ padding: '88px 22px 64px' }}>
      <Eyebrow>01 — The Concept</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 20,
        fontFamily: 'Oswald, sans-serif', fontWeight: 500,
        fontSize: 44, lineHeight: 0.98, letterSpacing: -0.3,
        color: TS.ink, textTransform: 'uppercase',
      }}>
        Built for fleets that{' '}
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: TS.amber, fontWeight: 400, textTransform: 'none' }}>cannot afford downtime.</span>
      </h2>
      <p style={{ color: TS.inkDim, fontSize: 14.5, lineHeight: 1.6 }}>
        Tire Sales is a commercial tire sourcing concept built for operators who move product,
        deliver services, and maintain mixed-use vehicle fleets.
      </p>
      <Plate image="media/story.jpg" caption="// 02 · inventory · service bay" style={{ height: 320, marginTop: 32 }} />
    </div>

    {/* culture */}
    <div id="m-culture" style={{ padding: '0 22px 64px' }}>
      <Eyebrow>02 — Fleet Programs</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 32,
        fontFamily: 'Oswald, sans-serif', fontWeight: 500,
        fontSize: 52, lineHeight: 0.95, letterSpacing: -0.4,
        color: TS.ink, textTransform: 'uppercase',
      }}>
        Four pillars<br/>of{' '}
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: TS.inkDim, fontWeight: 400, textTransform: 'none' }}>commercial tire service.</span>
      </h2>
      <div style={{ display: 'grid', gap: 36 }}>
        {fleetItems.map(c => (
          <div key={c.label}>
            <Plate mood={c.mood} image={c.image} caption={c.cap} style={{ height: 280 }} />
            <div style={{ marginTop: 14, display: 'flex', alignItems: 'baseline', gap: 12 }}>
              <span style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 2, color: TS.amber,
              }}>N° {c.n}</span>
              <h3 style={{
                fontFamily: 'Oswald, sans-serif', fontWeight: 500,
                fontSize: 32, lineHeight: 1, color: TS.ink, margin: 0, textTransform: 'uppercase',
              }}>{c.label}</h3>
            </div>
            <p style={{ marginTop: 8, color: TS.inkDim, fontSize: 14 }}>{c.blurb}</p>
          </div>
        ))}
      </div>
    </div>

    {/* manifesto */}
    <Plate id="m-manifesto" image="media/manifesto.jpg" caption="// 03 · sourcing · fleet ready" style={{ height: 520 }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.65) 100%)',
      }} />
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', padding: '0 22px' }}>
        <div style={{ marginBottom: 26 }}>
          <Eyebrow style={{ color: 'rgba(224,161,27,0.9)' }}>03 — Sourcing</Eyebrow>
        </div>
        <h2 style={{
          margin: 0, textAlign: 'center',
          fontFamily: 'Oswald, sans-serif', fontWeight: 500,
          fontSize: 56, lineHeight: 0.92, letterSpacing: -0.4,
          color: '#F3F0EA', textTransform: 'uppercase',
        }}>
          Procurement<br/>built for<br/>
          <span style={{ color: TS.amber, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400, textTransform: 'none' }}>uptime.</span>
        </h2>
      </div>
    </Plate>

    {/* programs (presence equivalent) */}
    <div id="m-presence" style={{ background: TS.panel, padding: '64px 22px' }}>
      <Eyebrow>04 — Programs</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 16,
        fontFamily: 'Oswald, sans-serif', fontWeight: 500,
        fontSize: 40, lineHeight: 0.96, letterSpacing: -0.3,
        color: TS.ink, textTransform: 'uppercase',
      }}>
        Tire programs built around<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: TS.amber, fontWeight: 400, textTransform: 'none' }}>how fleets actually run.</span>
      </h2>
      <p style={{ color: TS.inkDim, fontSize: 13.5, lineHeight: 1.6, marginBottom: 28 }}>
        Commercial operators need size accuracy, duty-cycle matching, and volume coordination
        that works across dozens of vehicles and multiple axle specs.
      </p>
      {/* program cards — 2-col grid */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {programNotes.map((m) => (
          <Artifact
            key={m.t}
            label={`N° ${m.n}`}
            contentStyle={{ padding: 16, justifyContent: 'space-between', minHeight: 180 }}
          >
            <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
              <ProgramGlyph kind={m.kind} size={32} />
              <h3 style={{
                margin: 0,
                fontFamily: 'Oswald, sans-serif', fontWeight: 500,
                fontSize: 16, letterSpacing: 0.5, color: TS.ink, textTransform: 'uppercase',
                whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
              }}>{m.t}</h3>
            </div>
            <p style={{
              margin: 0, marginTop: 12,
              fontSize: 12.5, lineHeight: 1.5, color: TS.inkDim,
            }}>{m.d}</p>
          </Artifact>
        ))}
      </div>

      {/* brand strip */}
      <div style={{
        marginTop: 18, padding: '18px 18px',
        border: `1px solid ${TS.inkFaint}`, background: TS.bg,
        display: 'grid', gap: 10,
      }}>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
          letterSpacing: 2, textTransform: 'uppercase', color: TS.inkLow, lineHeight: 1.7,
        }}>Fleet spec · Route match<br/>Volume sourcing · Replacement</div>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2, textTransform: 'uppercase', color: TS.amber,
        }}>Uptime-focused · Procurement-ready · B2B-first</div>
      </div>
    </div>

    {/* contact */}
    <div id="m-inquiry" style={{ padding: '64px 22px' }}>
      <Eyebrow>06 — Inquire</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 20,
        fontFamily: 'Oswald, sans-serif', fontWeight: 500,
        fontSize: 56, lineHeight: 0.95, letterSpacing: -0.5,
        color: TS.ink, textTransform: 'uppercase',
      }}>
        Acquire<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: TS.amber, fontWeight: 400, textTransform: 'none' }}>TireSales.org</span>
      </h2>
      <p style={{ color: TS.inkDim, fontSize: 13.5, lineHeight: 1.6 }}>
        The brand concept above is one possible direction.{' '}
        <span style={{ color: TS.ink }}>TireSales.org</span> is available for the right buyer
        to shape into a dealer network, fleet marketplace, procurement platform, or media property.
      </p>

      <div style={{
        marginTop: 32, paddingTop: 22, borderTop: `1px solid ${TS.inkFaint}`,
        display: 'grid', gap: 18,
      }}>
        {[
          { l: 'Domain',    v: 'TireSales.org' },
          { l: 'Direction', v: 'Fleet tire procurement' },
          { l: 'Status',    v: 'Open to serious inquiries' },
        ].map(b => (
          <div key={b.l}>
            <div style={{
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
              letterSpacing: 2, textTransform: 'uppercase', color: TS.amber,
            }}>{b.l}</div>
            <div style={{
              marginTop: 4,
              fontFamily: 'Oswald, sans-serif', fontSize: 20, color: TS.ink, lineHeight: 1.2,
              textTransform: 'uppercase',
            }}>{b.v}</div>
          </div>
        ))}
      </div>

      <MobileContactForm />

      <div style={{
        marginTop: 32, paddingTop: 18, borderTop: `1px dashed ${TS.inkFaint}`,
        display: 'flex', gap: 10, alignItems: 'flex-start',
      }}>
        <span style={{ marginTop: 3, width: 5, height: 5, background: TS.amber, flexShrink: 0 }} />
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 1.5, textTransform: 'uppercase', color: TS.inkLow, lineHeight: 1.7,
        }}>
          This site is an illustrative brand concept. No live inventory, pricing, or dealer network
          is represented. TireSales.org is available for acquisition.
        </div>
      </div>
    </div>

    {/* footer */}
    <div id="m-footer" style={{ background: TS.panel, padding: '36px 22px 32px', borderTop: `1px solid ${TS.inkFaint}` }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <TSMark size={36} />
        <div>
          <div style={{ fontFamily: 'Oswald, sans-serif', fontWeight: 600, fontSize: 22, color: TS.ink, lineHeight: 1, textTransform: 'uppercase', letterSpacing: 1 }}>Tire<span style={{ fontWeight: 400, opacity: 0.75 }}>Sales</span></div>
          <div style={{ marginTop: 6, fontFamily: 'IBM Plex Mono, monospace', fontSize: 9, letterSpacing: 2, textTransform: 'uppercase', color: TS.amber }}>Fleet Uptime. Procurement Ready.</div>
        </div>
      </div>
      <p style={{
        marginTop: 22, marginBottom: 0,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
        letterSpacing: 1.5, textTransform: 'uppercase', color: TS.inkLow, lineHeight: 1.7,
      }}>
        This website is an illustrative brand concept for{' '}
        <span style={{ color: TS.inkDim }}>TireSales.org</span>.
        No live tire inventory, pricing, dealer network, or service relationship is being represented.
        TireSales.org is available for acquisition.
      </p>
      <div style={{
        marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
      }}>
        {[
          { h: 'Concept', l: [
            { t: 'Brand Direction',  href: '#story' },
            { t: 'Tire Programs',    href: '#presence' },
            { t: 'Use Cases',        href: '#culture' },
          ]},
          { h: 'Domain', l: [
            { t: 'TireSales.org',       href: '#inquiry' },
            { t: 'Acquisition Inquiry', href: '#inquiry' },
            { t: 'Contact',             href: '#inquiry' },
          ]},
        ].map(g => (
          <div key={g.h}>
            <div style={{
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
              letterSpacing: 2, textTransform: 'uppercase', color: TS.inkLow,
              marginBottom: 12,
            }}>{g.h}</div>
            <div style={{ display: 'grid', gap: 6 }}>
              {g.l.map(x => (
                <a key={x.t} href={x.href} style={{
                  fontFamily: 'Oswald, sans-serif', fontSize: 16, color: TS.ink,
                  letterSpacing: 0.5, lineHeight: 1.2, textDecoration: 'none',
                  textTransform: 'uppercase',
                }}>{x.t}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 24, paddingTop: 16, borderTop: `1px solid ${TS.inkFaint}`,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
        letterSpacing: 2, textTransform: 'uppercase', color: TS.inkLow, lineHeight: 1.8,
      }}>
        © MMXXVI · Tire Sales<br/>Independent concept · No manufacturer affiliation<br/>
        <span style={{ color: TS.amber }}>Volume One — 001</span>
      </div>
    </div>
  </div>
);

Object.assign(window, { Desktop, Mobile });