/* Mandera website — screens: Home, Work, WorkDetail, Contact. */

const SERVICES = [
  { icon: 'pen-tool', name: 'Content Creation', desc: 'Editorial, film and social content built to earn attention in a crowded feed.' },
  { icon: 'compass', name: 'Branding', desc: 'Positioning, naming and identity systems that give a brand a reason to be remembered.' },
  { icon: 'server', name: 'IT', desc: 'Websites, infrastructure and the technical backbone that keeps everything running.' },
  { icon: 'sparkles', name: 'AI', desc: 'Custom AI tools and content engines that make your marketing compound.' },
  { icon: 'workflow', name: 'Automation', desc: 'Workflows and lifecycle systems that do the repetitive work for you.' },
  { icon: 'camera', name: 'Photography', desc: 'Product, lifestyle and brand photography shot to a considered art direction.' },
];

// ============================================================
//  CLIENT LINKS  —  paste each client's URLs between the quotes.
//  Example:  website: 'https://qahwa.com',  socials: 'https://instagram.com/qahwa'
//  Leave '' (empty) and the button stays disabled until you add a link.
// ============================================================
const CLIENT_LINKS = {
  'Qahwa Culture':   { website: '', socials: 'https://www.instagram.com/qahwaculture' },
  'Ferragosto':      { website: '', socials: 'https://www.instagram.com/ferragostogelateria' },
  'Global Travel':   { website: 'https://gttjo.com', socials: 'https://www.instagram.com/globaltravel.jo' },
  'Brava Dentistry': { website: '', socials: 'https://www.instagram.com/brava.clinic.jo' },
};

// ============================================================
//  SHOWREEL — when your reel is ready, upload the MP4 (e.g. assets/showreel.mp4)
//  and set:   const SHOWREEL_SRC = './assets/showreel.mp4';
// ============================================================
const SHOWREEL_SRC = '';

const WORK = [
  {
    client: 'Global Travel', tag: 'Content · Campaigns', metric: '+73% new clients', year: '2023',
    tint: 'linear-gradient(135deg,#14384f,#06070a)', logo: 'work-globaltravel.png', logoMaxW: '58%', logoMaxH: '46%',
    blurb: 'An always-on content and campaign engagement for one of Jordan’s most established travel agencies — turning decades of reputation into modern, measurable demand.',
    tagline: '“Your journey starts here.”',
    services: ['Content Creation', 'Social Media', 'Campaigns'],
    challenge: 'Global Travel had the experience and the loyal customers — but almost no digital presence. We built a content system around Jordan itself (heritage, nature, luxury) and ran always-on social campaigns that turned attention into booked trips: 73% more new clients since the engagement began.',
    gallery: ['work/gt-jordan.png', 'work/gt-petra.png', 'work/gt-nature.png', 'work/gt-luxury.png', 'work/gt-night.png'],
    quote: { text: 'Simply the best marketing company we have ever worked with.', who: 'Fuad Marmash', role: 'CEO, Global Travel' },
  },
  {
    client: 'Qahwa Culture', tag: 'Brand · Content', metric: '500K+ views', year: '2025',
    tint: 'linear-gradient(135deg,#1b4d72,#06070a)', logo: 'work-qahwa.png', logoMaxW: '40%', logoMaxH: '56%',
    blurb: 'Craft-heavy social content for a specialty coffee brand with personality to spare — the kind of feed that gets screenshotted, shared and remembered.',
    tagline: '“Coffee, but make it culture.”',
    services: ['Content Creation', 'Art Direction', 'Photography'],
    challenge: 'Coffee is the most crowded category in town, and Qahwa Culture needed to feel like a friend — not another shop. We answered with playful, hand-crafted content: paper-cut visuals, summer campaigns and product-first photography that pushed past 500,000 views.',
    gallery: ['work/qahwa-summer.png', 'work/qahwa-alarm.png', 'work/qahwa-heat.png', 'work/qahwa-reminder.png', 'work/qahwa-tray.png', 'work/qahwa-brewing.png'],
    quote: { text: 'Great quality — and everything is seamless.', who: 'Eyad Aloul', role: 'Qahwa Culture' },
  },
  {
    client: 'Ferragosto', tag: 'Identity · Launch', metric: 'Branding & launch', year: '2026',
    tint: 'linear-gradient(135deg,#246a9b,#0a0c11)', logo: 'work-ferragosto.png', logoMaxW: '64%', logoMaxH: '34%',
    blurb: 'Naming, identity and launch storytelling for an Italian gelateria — from a hand-lettered wordmark to a postcard campaign that feels flown in from Italy.',
    tagline: '“Greetings from Italy.”',
    services: ['Branding', 'Identity', 'Launch Campaign'],
    challenge: 'Ferragosto opened with zero awareness in a market that had never tasted proper gelato. We built the brand from scratch — the hand-written wordmark, illustrated stamps and flavour frames, and a postcard-led launch — so the store opened with a story people wanted to share.',
    gallery: ['work/ferra-postcard-1.png', 'work/ferra-swirl.png', 'work/ferra-strawberry.png', 'work/ferra-postcard-2.png', 'work/ferra-pistachio.png', 'work/ferra-coconut.png'],
    quote: { text: 'The branding was on point — every detail of it.', who: 'Khalil Zuaiter', role: 'Store Owner, Ferragosto' },
  },
  {
    client: 'Brava Dentistry', tag: 'Content · Social', metric: 'Coming soon', year: '2026',
    tint: 'linear-gradient(135deg,#2e83be,#0a0c11)', wordmark: { name: 'Brava', sub: 'Dentistry' },
    blurb: 'A content and social engagement for Amman’s boutique dental clinic. Full case study coming soon.',
  },
];

const STATS = [['5', 'years in practice'], ['20+', 'brands shaped'], ['60', 'Campaigns launched'], ['7', 'industries worked with']];

function MarkBackdrop({ opacity = 0.16, size = 720, pos = { top: '-160px', right: '-160px' } }) {
  return <img src={window.MANDERA_ASSET + 'mandera-mark-transparent.png'} alt="" aria-hidden="true"
    style={{ position: 'absolute', width: size, height: size, objectFit: 'contain', opacity, pointerEvents: 'none', ...pos }} />;
}

function Hero({ go }) {
  const { Button, Badge } = window.ManderaDesignSystem_8327ce;
  return (
    <section style={{ position: 'relative', overflow: 'hidden', padding: '120px 40px 100px', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--grad-hero)' }} />
      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 28, alignItems: 'flex-start' }}>
        <Badge tone="accent" variant="outline">Marketing Agency</Badge>
        <h1 className="mn-hero-h1" style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(44px, 5.4vw, 82px)', lineHeight: 1.08, letterSpacing: '-0.015em', color: 'var(--text-strong)', maxWidth: 980, margin: 0 }}>
          <span style={{ display: 'block', whiteSpace: 'nowrap' }}>We make brands</span>
          <span style={{ display: 'block', whiteSpace: 'nowrap' }}><span style={{ fontStyle: 'italic', color: 'var(--accent-text)' }}>impossible</span> to ignore.</span>
        </h1>
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 19, lineHeight: 1.6, color: 'var(--text-secondary)', maxWidth: 560, margin: 0 }}>
          Mandera is a modern marketing studio for founders and category leaders — brand, content, performance and AI, under one roof.
        </p>
        <div style={{ display: 'flex', gap: 14, marginTop: 8 }}>
          <Button variant="primary" size="lg" iconRight={<window.Icon n="arrow-right" s={18} />} onClick={() => go('contact')}>Start a project</Button>
          <Button variant="outline" size="lg" onClick={() => go('work')}>View our work</Button>
        </div>
        <div className="mn-wrap" style={{ display: 'flex', flexWrap: 'wrap', gap: 56, marginTop: 48, paddingTop: 36, borderTop: '1px solid var(--border-subtle)', width: '100%' }}>
          {STATS.map(([n, l]) => (
            <div key={l} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 40, color: 'var(--text-strong)' }}>{n}</span>
              <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--text-muted)', letterSpacing: '0.02em' }}>{l}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServicesSection() {
  const { Card } = window.ManderaDesignSystem_8327ce;
  return (
    <section style={{ padding: '100px 40px', maxWidth: 1200, margin: '0 auto' }}>
      <window.SectionHead eyebrow="What we do" title="Modern marketing, one team." sub="No handoffs between strategy and execution — the people who plan your work are the people who make it." />
      <div className="mn-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20, marginTop: 48 }}>
        {SERVICES.map((s) => (
          <Card key={s.name} interactive padding="lg">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 52, height: 52, borderRadius: 'var(--radius-md)', background: 'var(--accent-soft)', border: '1px solid var(--border-accent)', marginBottom: 20 }}>
              <window.Icon n={s.icon} s={22} color="var(--accent-text)" stroke={1.6} />
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 26, color: 'var(--text-strong)', margin: '0 0 10px' }}>{s.name}</h3>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.6, color: 'var(--text-muted)', margin: 0 }}>{s.desc}</p>
          </Card>
        ))}
      </div>
    </section>
  );
}

function WorkCard({ w, go }) {
  const [h, setH] = React.useState(false);
  return (
    <button onClick={() => go('detail', w)} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ textAlign: 'left', background: 'none', border: 'none', padding: 0, cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 16, width: '100%' }}>
      <div style={{ position: 'relative', width: '100%', boxSizing: 'border-box', aspectRatio: '4 / 3', borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: w.tint, border: '1px solid var(--border-subtle)', boxShadow: h ? 'var(--shadow-lg)' : 'var(--shadow-md)', transition: 'box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out)', transform: h ? 'translateY(-4px)' : 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {/* faint house mark, always present for texture */}
        <img src={window.MANDERA_ASSET + 'mandera-mark-transparent.png'} alt="" aria-hidden="true" style={{ position: 'absolute', right: -70, bottom: -70, width: 280, height: 280, objectFit: 'contain', opacity: w.logo || w.wordmark ? 0.12 : 0.5, transform: h ? 'scale(1.05) rotate(4deg)' : 'scale(1)', transition: 'transform var(--dur-slow) var(--ease-out)' }} />
        {w.logo && (
          <img src={window.MANDERA_ASSET + w.logo} alt={w.client + ' logo'} style={{ position: 'relative', maxWidth: w.logoMaxW || '56%', maxHeight: w.logoMaxH || '46%', objectFit: 'contain', opacity: h ? 1 : 0.92, transform: h ? 'scale(1.03)' : 'scale(1)', transition: 'opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out)', filter: 'drop-shadow(0 4px 16px rgba(0,0,0,0.35))' }} />
        )}
        {w.wordmark && (
          <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, transform: h ? 'scale(1.03)' : 'scale(1)', transition: 'transform var(--dur-slow) var(--ease-out)', opacity: h ? 1 : 0.94 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 600, fontSize: 56, lineHeight: 1, color: 'var(--ink-0)', letterSpacing: '0.01em' }}>{w.wordmark.name}</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12, fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500, letterSpacing: '0.42em', textTransform: 'uppercase', color: 'rgba(247,249,251,0.78)', paddingLeft: '0.42em' }}>
              <span style={{ width: 18, height: 1, background: 'rgba(247,249,251,0.5)' }} />{w.wordmark.sub}<span style={{ width: 18, height: 1, background: 'rgba(247,249,251,0.5)' }} />
            </span>
          </div>
        )}
        <span style={{ position: 'absolute', top: 18, right: 18, padding: '6px 12px', borderRadius: 'var(--radius-pill)', background: 'rgba(6,7,10,0.55)', backdropFilter: 'blur(8px)', border: '1px solid var(--border-subtle)', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--accent-bright)', whiteSpace: 'nowrap' }}>{w.metric}</span>
        <div style={{ position: 'absolute', left: 24, bottom: 22, display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--accent-bright)', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14, opacity: h ? 1 : 0, transform: h ? 'translateX(0)' : 'translateX(-8px)', transition: 'all var(--dur-base) var(--ease-out)' }}>
            View case study <window.Icon n="arrow-right" s={16} color="var(--accent-bright)" />
          </span>
        </div>
      </div>
      <div style={{ width: '100%', boxSizing: 'border-box', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16 }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 24, color: 'var(--text-strong)' }}>{w.client}</div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--text-muted)', marginTop: 2 }}>{w.tag} · {w.year}</div>
        </div>
        <window.Icon n="arrow-up-right" s={18} color="var(--text-faint)" />
      </div>
    </button>
  );
}

function WorkSection({ go, full }) {
  return (
    <section style={{ padding: full ? '120px 40px 100px' : '40px 40px 100px', maxWidth: 1200, margin: '0 auto' }}>
      <window.SectionHead eyebrow="Selected work" title={full ? 'Work we’re proud of.' : 'Recent work.'} sub={full ? 'A cross-section of brands we’ve shaped across spirits, finance and culture.' : undefined} />
      <div className="mn-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 36, marginTop: 48 }}>
        {WORK.map((w) => <WorkCard key={w.client} w={w} go={go} />)}
      </div>
    </section>
  );
}

function Quote() {
  const more = [
    { text: 'The branding was on point — every detail of it.', who: 'Khalil Zuaiter', role: 'Store Owner · Ferragosto' },
    { text: 'Great quality — and everything is seamless.', who: 'Eyad Aloul', role: 'Qahwa Culture' },
  ];
  return (
    <section style={{ position: 'relative', overflow: 'hidden', padding: '110px 40px', background: 'var(--ink-900)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <MarkBackdrop opacity={0.12} size={620} pos={{ top: '-120px', left: '-160px' }} />
      <div style={{ position: 'relative', maxWidth: 980, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 56 }}>
        <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 26, alignItems: 'center' }}>
          <span className="mandera-eyebrow">In their words</span>
          <p style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(30px, 4vw, 46px)', lineHeight: 1.22, color: 'var(--text-strong)', margin: 0, maxWidth: 860 }}>
            “Simply the <span style={{ fontStyle: 'italic', color: 'var(--accent-text)' }}>best marketing company</span> we have ever worked with.”
          </p>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, color: 'var(--text-muted)' }}><strong style={{ color: 'var(--text-secondary)', fontWeight: 600 }}>Fuad Marmash</strong> · CEO, Global Travel</span>
        </div>
        <div className="mn-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          {more.map((q) => (
            <div key={q.who} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '26px 28px', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <p style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 22, lineHeight: 1.4, color: 'var(--text-strong)', margin: 0 }}>“{q.text}”</p>
              <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13.5, color: 'var(--text-muted)' }}>{q.who} · {q.role}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA({ go }) {
  const { Button } = window.ManderaDesignSystem_8327ce;
  return (
    <section style={{ padding: '110px 40px', maxWidth: 1200, margin: '0 auto', textAlign: 'center' }}>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 58, color: 'var(--text-strong)', margin: '0 0 20px', letterSpacing: '-0.01em' }}>Let’s make something worth remembering.</h2>
      <p style={{ fontFamily: 'var(--font-sans)', fontSize: 18, color: 'var(--text-muted)', maxWidth: 520, margin: '0 auto 32px' }}>Tell us where you want to go. We’ll bring the strategy, the craft and the momentum.</p>
      <Button variant="primary" size="lg" iconRight={<window.Icon n="arrow-right" s={18} />} onClick={() => go('contact')}>Start a project</Button>
    </section>
  );
}

function Showreel() {
  if (!SHOWREEL_SRC) return null;
  return (
    <section style={{ padding: '90px 40px 0', maxWidth: 1200, margin: '0 auto' }}>
      <video src={SHOWREEL_SRC} autoPlay muted loop playsInline controls style={{ width: '100%', display: 'block', borderRadius: 'var(--radius-xl)', border: '1px solid var(--border-subtle)', boxShadow: 'var(--shadow-lg)' }}></video>
    </section>
  );
}

function Home({ go }) {
  return (
    <>
      <Hero go={go} />
      <Showreel />
      <ServicesSection />
      <WorkSection go={go} />
      <Quote />
      <CTA go={go} />
    </>
  );
}

function Work({ go }) {
  return (<><WorkSection go={go} full /><CTA go={go} /></>);
}

function WorkDetail({ go, item }) {
  const { Badge, Button } = window.ManderaDesignSystem_8327ce;
  const w = item || WORK[0];
  const links = CLIENT_LINKS[w.client] || {};
  return (
    <article>
      <section style={{ position: 'relative', overflow: 'hidden', padding: '60px 40px 80px', borderBottom: '1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth: 1000, margin: '0 auto' }}>
          <button onClick={() => go('work')} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)', fontFamily: 'var(--font-sans)', fontSize: 14, marginBottom: 40, padding: 0 }}>
            <window.Icon n="arrow-left" s={16} /> All work
          </button>
          <Badge tone="accent" variant="outline">{w.tag}</Badge>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 72, color: 'var(--text-strong)', margin: '20px 0 16px', letterSpacing: '-0.015em' }}>{w.client}</h1>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 19, color: 'var(--text-secondary)', maxWidth: 620, lineHeight: 1.6, margin: 0 }}>
            {w.blurb || 'A full brand and growth engagement — from positioning through launch campaign — that reset the category conversation.'}
          </p>
        </div>
      </section>
      <section style={{ position: 'relative', height: 420, background: w.tint, overflow: 'hidden', borderBottom: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center' }}>
        <img src={window.MANDERA_ASSET + 'mandera-mark-transparent.png'} alt="" aria-hidden="true" style={{ position: 'absolute', right: '4%', top: '50%', transform: 'translateY(-50%)', width: 360, height: 360, objectFit: 'contain', opacity: 0.28 }} />
        <div className="mn-stack" style={{ position: 'relative', maxWidth: 1000, width: '100%', margin: '0 auto', padding: '0 40px', display: 'flex', alignItems: 'center', gap: 56 }}>
          <div style={{ width: 300, height: 220, flex: 'none', borderRadius: 'var(--radius-lg)', background: 'rgba(6,7,10,0.32)', border: '1px solid rgba(255,255,255,0.12)', backdropFilter: 'blur(2px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 28, boxSizing: 'border-box' }}>
            {w.logo && <img src={window.MANDERA_ASSET + w.logo} alt={w.client + ' logo'} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', filter: 'drop-shadow(0 6px 20px rgba(0,0,0,0.4))' }} />}
            {w.wordmark && (
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 600, fontSize: 52, lineHeight: 1, color: 'var(--ink-0)' }}>{w.wordmark.name}</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500, letterSpacing: '0.4em', textTransform: 'uppercase', color: 'rgba(247,249,251,0.78)', paddingLeft: '0.4em' }}>
                  <span style={{ width: 16, height: 1, background: 'rgba(247,249,251,0.5)' }} />{w.wordmark.sub}<span style={{ width: 16, height: 1, background: 'rgba(247,249,251,0.5)' }} />
                </span>
              </div>
            )}
          </div>
          <div style={{ maxWidth: 380 }}>
            <span className="mandera-eyebrow" style={{ color: 'rgba(247,249,251,0.7)' }}>The brand</span>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontStyle: 'italic', fontSize: 26, color: 'var(--ink-0)', margin: '12px 0 14px', lineHeight: 1.3 }}>{w.tagline || '“A name worth remembering — finally seen.”'}</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {(w.services || ['Content Creation', 'SEO', 'Campaign']).map((t) => (
                <span key={t} style={{ fontFamily: 'var(--font-sans)', fontSize: 12.5, fontWeight: 600, color: 'rgba(247,249,251,0.92)', padding: '6px 13px', borderRadius: 'var(--radius-pill)', border: '1px solid rgba(255,255,255,0.22)', background: 'rgba(255,255,255,0.06)' }}>{t}</span>
              ))}
            </div>
          </div>
        </div>
      </section>
      <section className="mn-grid" style={{ maxWidth: 1000, margin: '0 auto', padding: '80px 40px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60 }}>
        <div>
          <span className="mandera-eyebrow">The challenge</span>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.75, color: 'var(--text-body)', marginTop: 16 }}>
            {w.challenge || 'A respected name had become invisible — strong product, soft story. We rebuilt the brand from its point of view out, then put media behind a single, ownable idea.'}
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          {[['Result', w.metric], ['Engagement', (w.services || ['Content Creation', 'SEO', 'Campaign']).join(', ')]].map(([k, v]) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: 16, borderBottom: '1px solid var(--border-subtle)' }}>
              <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--text-muted)' }}>{k}</span>
              <span style={{ fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600, color: 'var(--text-strong)', textAlign: 'right' }}>{v}</span>
            </div>
          ))}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 4 }}>
            {links.website && <Button variant="primary" onClick={() => window.open(links.website, '_blank', 'noopener')} iconRight={<window.Icon n="arrow-up-right" s={16} color="var(--ink-950)" />}>Visit Website</Button>}
            {links.socials && <Button variant={links.website ? 'outline' : 'primary'} onClick={() => window.open(links.socials, '_blank', 'noopener')} iconRight={<window.Icon n="arrow-up-right" s={16} color={links.website ? 'var(--accent-text)' : 'var(--ink-950)'} />}>Visit Instagram</Button>}
          </div>
        </div>
      </section>
      {w.gallery && (
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '0 40px 90px' }}>
          <window.SectionHead eyebrow="From the work" title="Straight from the feed." />
          <div className="mn-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18, marginTop: 40 }}>
            {w.gallery.map((g) => (
              <img key={g} src={window.MANDERA_ASSET + g} alt={w.client + ' — work sample'}
                style={{ width: '100%', aspectRatio: '4 / 5', objectFit: 'cover', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-subtle)', display: 'block', background: 'var(--surface-sunken)' }} />
            ))}
          </div>
        </section>
      )}
      {w.quote && (
        <section style={{ position: 'relative', overflow: 'hidden', padding: '90px 40px', background: 'var(--ink-900)', borderTop: '1px solid var(--border-subtle)' }}>
          <div style={{ position: 'relative', maxWidth: 820, margin: '0 auto', textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 22, alignItems: 'center' }}>
            <span className="mandera-eyebrow">In their words</span>
            <p style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 34, lineHeight: 1.3, color: 'var(--text-strong)', margin: 0 }}>“{w.quote.text}”</p>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--text-muted)' }}><strong style={{ color: 'var(--text-secondary)', fontWeight: 600 }}>{w.quote.who}</strong> · {w.quote.role}</span>
          </div>
        </section>
      )}
      <CTA go={go} />
    </article>
  );
}

function Contact({ go }) {
  const { Button, Input, Checkbox } = window.ManderaDesignSystem_8327ce;
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [err, setErr] = React.useState('');
  async function submit(e) {
    e.preventDefault();
    const form = e.target;
    const data = new FormData(form);
    data.append('form', 'Contact');
    data.append('_subject', 'New inquiry from the Mandera website');
    setSending(true); setErr('');
    try {
      const res = await fetch('/api/send.php', {
        method: 'POST', headers: { Accept: 'application/json' }, body: data,
      });
      const out = await res.json().catch(() => ({}));
      if (!res.ok || !out.ok) throw new Error(out.message || 'Your message could not be sent.');
      setSent(true);
    } catch (e2) {
      setErr((e2 && e2.message) || 'Something went wrong. Please email info@manderamarketing.com directly.');
    } finally { setSending(false); }
  }
  return (
    <section className="mn-grid" style={{ position: 'relative', overflow: 'hidden', minHeight: '70vh', padding: '90px 40px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ position: 'relative' }}>
        <span className="mandera-eyebrow">Start a project</span>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 60, color: 'var(--text-strong)', margin: '16px 0 24px', letterSpacing: '-0.015em', lineHeight: 1.05 }}>Tell us what you’re building.</h1>
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, color: 'var(--text-secondary)', maxWidth: 420, lineHeight: 1.6 }}>
          We reply to every serious inquiry within two business days. No bots, no forms into the void.
        </p>
        <div style={{ marginTop: 40, display: 'flex', flexDirection: 'column', gap: 16 }}>
          {[['mail', 'info@manderamarketing.com', 'mailto:info@manderamarketing.com'], ['phone', '+962 77 777 3324', 'tel:+962777773324'], ['map-pin', 'Al-Madinah St · Al-Assaf Building, Office 101 · Amman, Jordan', 'https://maps.app.goo.gl/VUFdwRNiLABDZp6V6']].map(([ic, t, href]) => (
            <a key={t} href={href} target={href.startsWith('http') ? '_blank' : undefined} rel={href.startsWith('http') ? 'noopener noreferrer' : undefined} style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'var(--text-muted)', fontFamily: 'var(--font-sans)', fontSize: 15, textDecoration: 'none' }}
              onMouseEnter={(e) => e.currentTarget.style.color = 'var(--accent-text)'}
              onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-muted)'}>
              <window.Icon n={ic} s={18} color="var(--accent-text)" stroke={1.6} /> {t}
            </a>
          ))}
        </div>
      </div>
      <div style={{ position: 'relative' }}>
        <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: 32, boxShadow: 'var(--shadow-lg)' }}>
          {sent ? (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 16, padding: '40px 0' }}>
              <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--accent-soft)', border: '1px solid var(--border-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <window.Icon n="check" s={30} color="var(--accent-bright)" stroke={2} />
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 28, color: 'var(--text-strong)', margin: 0 }}>Message received.</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--text-muted)', margin: 0, maxWidth: 280 }}>Thanks — we’ll be in touch within two business days.</p>
              <Button variant="ghost" onClick={() => { setSent(false); go('home'); }}>Back to home</Button>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                <Input label="Name" name="name" placeholder="Jane Doe" required />
                <Input label="Company" name="company" placeholder="Acme Inc." />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                <Input label="Work email" name="email" type="email" placeholder="you@company.com" required iconLeft={<window.Icon n="mail" s={16} />} />
                <Input label="Phone" name="phone" type="tel" placeholder="+962 7…" iconLeft={<window.Icon n="phone" s={16} />} />
              </div>
              <input type="text" name="_honey" tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }} />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                <label style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500, color: 'var(--text-secondary)' }}>What do you need?</label>
                <textarea name="message" rows={4} placeholder="A sentence or two about the project…" style={{ resize: 'vertical', padding: '12px 14px', background: 'var(--surface-sunken)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', color: 'var(--text-strong)', fontFamily: 'var(--font-sans)', fontSize: 15, outline: 'none' }}
                  onFocus={(e) => e.target.style.borderColor = 'var(--accent)'} onBlur={(e) => e.target.style.borderColor = 'var(--border-default)'} />
              </div>
              <Checkbox label="Sign me up for the monthly dispatch" name="newsletter" />
              {err && <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--critical)' }}>{err}</span>}
              <Button variant="primary" size="lg" type="submit" fullWidth disabled={sending} iconRight={<window.Icon n="arrow-right" s={18} />}>{sending ? 'Sending…' : 'Send inquiry'}</Button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Home, Work, WorkDetail, Contact });
