// v5 Maintenance page — Coming Soon component
function MaintenancePage() {
    const handleBack = () => {
      if (window.navigateTo) window.navigateTo('home');
    };
  React.useEffect(() => {
    // Background floating nuts (light: 8 instances) — generated once
    const host = document.getElementById('bgNuts');
    if (host && !window.matchMedia('(prefers-reduced-motion: reduce)').matches && !window.matchMedia('(max-width: 720px)').matches) {
      const ids = ['#nut-almond','#nut-cashew','#nut-pistachio','#nut-walnut','#nut-date'];
      const sizes = [22, 26, 30, 34, 28];
      for (let i = 0; i < 10; i++){
        const id = ids[i % ids.length];
        const sz = sizes[i % sizes.length] + (i*3 % 12);
        const left = (i * 13 + 7) % 100;
        const top  = (i * 21 + 11) % 100;
        const dur  = 9 + (i*1.7) % 6;
        const delay = -((i*1.3) % dur);
        const rot = ((i*53) % 360);
        const anim = ['nut-float-a','nut-float-b','nut-float-c'][i%3];
        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('viewBox','0 0 60 60');
        svg.setAttribute('width', sz);
        svg.setAttribute('height', sz);
        const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
        use.setAttributeNS('http://www.w3.org/1999/xlink','href',id);
        use.setAttribute('href', id);
        svg.appendChild(use);
        svg.classList.add('bg-nut');
        svg.style.left = left + '%';
        svg.style.top  = top + '%';
        svg.style.transform = 'rotate(' + rot + 'deg)';
        svg.style.animation = anim + ' ' + dur + 's ease-in-out infinite';
        svg.style.animationDelay = delay + 's';
        host.appendChild(svg);
      }
    }

    // Reveal on load
    document.querySelectorAll('.reveal').forEach(el => {
      requestAnimationFrame(() => el.classList.add('is-in'));
    });
  }, []);

  const cssVars = {
    '--paper':'#FAF5E8',
    '--cream':'#F2EAD3',
    '--cream-deep':'#E8DCBC',
    '--buff':'#E0D2A6',
    '--roast':'#0E1B44',
    '--roast-2':'#152456',
    '--roast-soft':'#1F3370',
    '--date':'#070F2A',
    '--date-2':'#0A1638',
    '--saffron':'#D4A24A',
    '--saffron-soft':'#E8C57C',
    '--gold':'#C8A24E',
    '--gold-2':'#D9B970',
    '--gold-3':'#ECD49A',
    '--gold-deep':'#8B6A28',
    '--navy':'#070F2A',
    '--navy-mid':'#0E1B44',
    '--ink':'#0B1638',
    '--ink-soft':'#3B4870',
    '--line':'rgba(200,162,78,0.32)',
    '--line-soft':'rgba(11,22,56,0.10)',
  };

  return (
    <>
      <style>{`
        :root{
          --paper:#FAF5E8;
          --cream:#F2EAD3;
          --cream-deep:#E8DCBC;
          --buff:#E0D2A6;
          --roast:#0E1B44;
          --roast-2:#152456;
          --roast-soft:#1F3370;
          --date:#070F2A;
          --date-2:#0A1638;
          --saffron:#D4A24A;
          --saffron-soft:#E8C57C;
          --gold:#C8A24E;
          --gold-2:#D9B970;
          --gold-3:#ECD49A;
          --gold-deep:#8B6A28;
          --navy:#070F2A;
          --navy-mid:#0E1B44;
          --ink:#0B1638;
          --ink-soft:#3B4870;
          --line:rgba(200,162,78,0.32);
          --line-soft:rgba(11,22,56,0.10);
          --shadow-card:0 30px 70px -28px rgba(7,15,42,0.50), 0 2px 8px rgba(7,15,42,0.08);
          --r-lg:20px;
          --r-md:14px;
          --r-sm:8px;
        }
        *{box-sizing:border-box;}
        html,body{margin:0;padding:0;}
        body{
          font-family:'Plus Jakarta Sans', system-ui, sans-serif;
          background:var(--navy);
          color:var(--cream);
          -webkit-font-smoothing:antialiased;
          text-rendering:optimizeLegibility;
          line-height:1.5;
          min-height:100vh;
          overflow-x:hidden;
        }
        img{max-width:100%; display:block;}
        .serif{font-family:'Cormorant Garamond', serif; font-weight:500; letter-spacing:0.005em;}
        .wordmark{font-family:'Quicksand', sans-serif; font-weight:700; letter-spacing:-0.01em; line-height:1;}

        .wrap{
          width: min(100% - clamp(32px, 5vw, 96px), clamp(1280px, 86vw, 1820px));
          margin: 0 auto;
        }

        .backdrop{
          position:fixed; inset:0; z-index:0; pointer-events:none;
          background:
            radial-gradient(1200px 800px at 80% 20%, rgba(212,162,74,0.18), transparent 60%),
            radial-gradient(900px 700px at 15% 90%, rgba(31,51,112,0.55), transparent 60%),
            linear-gradient(180deg, var(--date) 0%, var(--navy-mid) 100%);
          animation: gradient-shift 18s ease-in-out infinite alternate;
        }
        @keyframes gradient-shift {
          0%   { background-position: 0% 0%, 0% 0%, 0 0; }
          100% { background-position: 4% -3%, -3% 4%, 0 0; }
        }

        .dotgrid{
          position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.08;
          background-image: radial-gradient(rgba(212,162,74,0.8) 1px, transparent 1.2px);
          background-size: 32px 32px;
        }

        .page{
          position:relative; z-index:2;
          min-height:100vh;
          display:flex; flex-direction:column;
        }

        .top-bar{
          padding: clamp(20px, 2vw, 36px) 0;
        }
        .top-bar-inner{
          display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
        }
        .logo{ display:flex; align-items:center; gap:12px; color:var(--cream); text-decoration:none; }
        .logo-mark{ width:38px; height:38px; }
        .logo-text .wordmark{ color:var(--cream); font-size:22px; }
        .logo-text .sub{
          margin-top:5px; font-size:8.5px; letter-spacing:0.28em;
          color:rgba(244,236,220,0.6); text-transform:uppercase; font-weight:600;
        }
        .top-meta{
          display:flex; gap:18px; align-items:center;
          font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
          color:rgba(244,236,220,0.7); font-weight:600;
        }
        .top-meta a{ color:var(--gold-3); text-decoration:none; }

        .hero{
          flex:1; display:flex; align-items:center; justify-content:center;
          padding: clamp(40px, 6vw, 120px) 0 clamp(40px, 5vw, 96px);
          position:relative;
        }
        .hero-inner{
          display:grid;
          grid-template-columns: 1.1fr 1fr;
          gap: clamp(40px, 5vw, 96px);
          align-items:center;
        }
        @media (max-width: 980px){
          .hero-inner{ grid-template-columns: 1fr; gap: 48px; }
        }

        .eyebrow{
          display:inline-flex; align-items:center; gap:14px;
          color:var(--gold-3); font-size:11px; letter-spacing:0.28em;
          text-transform:uppercase; font-weight:600;
        }
        .eyebrow::before{
          content:""; width:32px; height:1px; background:currentColor; opacity:0.7;
        }
        .hero h1{
          font-family:'Cormorant Garamond', serif; font-weight:500;
          font-size: clamp(48px, 6.6vw, 152px);
          line-height: 1.02; letter-spacing: -0.015em;
          margin: clamp(20px, 2vw, 36px) 0 clamp(16px, 1.6vw, 32px);
          color: var(--cream);
          text-wrap: balance;
        }
        .hero h1 em{
          font-style: italic; color: var(--gold-3);
          font-weight:500;
        }
        .hero .sub{
          font-size: clamp(15px, 1.05vw, 24px); line-height:1.65;
          color: rgba(244,236,220,0.78);
          max-width: clamp(360px, 32vw, 640px);
          margin: 0 0 clamp(28px, 2.8vw, 48px);
        }
        .hero .micro{
          display:flex; flex-direction:column; gap:10px;
          margin: clamp(20px,2vw,36px) 0 clamp(28px,2.6vw,44px);
        }
        .hero .micro li{
          list-style:none; display:flex; gap:12px; align-items:center;
          font-size: clamp(13.5px, 0.95vw, 18px); color:rgba(244,236,220,0.85);
        }
        .hero .micro li::before{
          content:""; width:6px; height:6px; border-radius:99px;
          background: var(--gold); flex-shrink:0;
        }

        .btn-row{ display:flex; gap:12px; flex-wrap:wrap; }
        .btn{
          position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
          padding: clamp(14px, 1.1vw, 24px) clamp(22px, 2vw, 44px);
          border-radius:4px; font-weight:600;
          font-size: clamp(12.5px, 0.85vw, 17px);
          letter-spacing:0.05em; text-transform:uppercase;
          cursor:pointer; border:1px solid transparent;
          transition: transform .25s ease, background .35s ease, color .25s ease, border-color .25s ease, box-shadow .35s ease;
          text-decoration:none; white-space:nowrap;
          font-family:inherit;
        }
        .btn svg{ width:14px; height:14px; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
        .btn:hover svg{ transform: translateX(4px); }
        .btn-gold{ background:var(--saffron); color:var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 12px 28px -16px rgba(212,162,74,0.55); }
        .btn-gold:hover{ background:var(--saffron-soft); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 18px 36px -14px rgba(212,162,74,0.75); }
        .btn-ghost{ background:transparent; color:var(--cream); border-color:rgba(244,236,220,0.4); }
        .btn-ghost:hover{ border-color:var(--gold-3); background:rgba(212,162,74,0.08); }

        .visual{
          position:relative;
          aspect-ratio: 1/1;
          width:100%;
          max-width: clamp(360px, 38vw, 720px);
          margin-left:auto;
        }
        .plate{
          position:absolute; inset:8%; border-radius:50%;
          background:
            radial-gradient(closest-side at 38% 32%, rgba(212,162,74,0.4), transparent 60%),
            linear-gradient(135deg, var(--roast), var(--date));
          border: 1px solid rgba(212,162,74,0.4);
          box-shadow:
            inset 0 0 60px rgba(0,0,0,0.4),
            0 60px 100px -30px rgba(0,0,0,0.7);
          animation: bowl-breathe 8s ease-in-out infinite;
          transform-origin:center;
        }
        .ring-outer{
          position:absolute; inset:2%; border-radius:50%;
          border: 1px dashed rgba(212,162,74,0.45);
          animation: ring-spin 80s linear infinite;
        }
        .ring-inner{
          position:absolute; inset:18%; border-radius:50%;
          border: 1px solid rgba(212,162,74,0.3);
        }

        .badge{
          position:absolute; inset:0;
          display:grid; place-items:center;
        }
        .badge-inner{
          width: 64%; aspect-ratio:1/1;
          border-radius:50%;
          background:
            radial-gradient(closest-side at 40% 35%, rgba(255,236,194,0.18), transparent 60%),
            linear-gradient(160deg, var(--saffron) 0%, var(--gold-deep) 100%);
          display:grid; place-items:center;
          color:var(--ink);
          text-align:center;
          box-shadow: 0 30px 60px -20px rgba(212,162,74,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
          border: 1px solid rgba(255,236,194,0.4);
          animation: badge-pulse 6s ease-in-out infinite;
        }
        @keyframes badge-pulse{
          0%, 100% { transform: scale(1); }
          50%      { transform: scale(1.02); }
        }
        .badge-inner .badge-eye{
          font-size: clamp(9px, 0.55vw, 13px); letter-spacing:0.28em; text-transform:uppercase; font-weight:700;
          color: rgba(11,22,56,0.7);
        }
        .badge-inner .badge-title{
          font-family:'Cormorant Garamond', serif; font-weight:500;
          font-size: clamp(28px, 3.2vw, 64px); line-height:1; margin: clamp(6px, 0.4vw, 12px) 0;
          font-style:italic;
        }
        .badge-inner .badge-tag{
          font-size: clamp(9px, 0.55vw, 13px); letter-spacing:0.18em; text-transform:uppercase; font-weight:700;
          color: rgba(11,22,56,0.6);
        }
        .badge-divider{
          width: 40%; height:1px;
          background: rgba(11,22,56,0.25);
          margin: clamp(6px, 0.5vw, 14px) 0;
        }

        .circle-text{
          position:absolute; inset:0; animation: ring-spin 40s linear infinite;
          pointer-events:none;
        }

        .nut{ position:absolute; pointer-events:none; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.4)); will-change: transform; }
        .nut.n1{ top:-2%;  left:14%; animation: nut-float-a 7s ease-in-out infinite; }
        .nut.n2{ top:8%;   right:-2%; animation: nut-float-b 9s ease-in-out infinite -2s; }
        .nut.n3{ bottom:10%; left:-4%; animation: nut-float-c 8s ease-in-out infinite -1s; }
        .nut.n4{ bottom:-2%; right:18%; animation: nut-float-a 7.5s ease-in-out infinite -3s; }
        .nut.n5{ top:42%;  right:-7%; animation: nut-float-b 8s ease-in-out infinite -4s; }
        .nut.n6{ top:55%;  left:-7%; animation: nut-float-c 9s ease-in-out infinite -2.5s; }

        @keyframes nut-float-a {
          0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
          50%      { transform: translate3d(8px, -14px, 0) rotate(8deg); }
        }
        @keyframes nut-float-b {
          0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
          50%      { transform: translate3d(-10px, -18px, 0) rotate(-6deg); }
        }
        @keyframes nut-float-c {
          0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
          50%      { transform: translate3d(6px, -22px, 0) rotate(12deg); }
        }
        @keyframes bowl-breathe {
          0%, 100% { transform: scale(1) rotate(0deg); }
          50%      { transform: scale(1.015) rotate(0.4deg); }
        }
        @keyframes ring-spin {
          from { transform: rotate(0deg); }
          to   { transform: rotate(360deg); }
        }

        .bg-nuts{
          position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden;
        }
        .bg-nuts .bg-nut{
          position:absolute;
          opacity:0.32;
          filter: blur(0.5px);
        }

        .contact-strip{
          border-top: 1px solid rgba(212,162,74,0.22);
          border-bottom: 1px solid rgba(212,162,74,0.22);
          background: rgba(7,15,42,0.4);
          backdrop-filter: blur(4px);
          -webkit-backdrop-filter: blur(4px);
          padding: clamp(20px, 1.6vw, 32px) 0;
        }
        .contact-strip-inner{
          display:flex; flex-wrap:wrap; gap:clamp(16px, 2vw, 40px);
          align-items:center; justify-content:space-between;
        }
        .contact-strip .left{
          display:flex; gap: clamp(16px, 2vw, 40px); flex-wrap:wrap; align-items:center;
        }
        .contact-item{
          display:flex; align-items:center; gap:12px;
          color: rgba(244,236,220,0.85);
          font-size: clamp(13px, 0.85vw, 16px);
          text-decoration:none;
        }
        .contact-item .ic{
          width: clamp(32px, 2.4vw, 44px); height: clamp(32px, 2.4vw, 44px);
          display:grid; place-items:center;
          background:rgba(212,162,74,0.10);
          border: 1px solid rgba(212,162,74,0.3);
          border-radius:6px;
          color: var(--gold-3);
          transition: background .25s, border-color .25s;
        }
        .contact-item:hover .ic{ background:rgba(212,162,74,0.18); border-color:var(--gold-3); }
        .contact-item .lbl{
          font-size: clamp(10px, 0.55vw, 12px); letter-spacing:0.18em; text-transform:uppercase;
          color:rgba(244,236,220,0.6); font-weight:600; display:block; margin-bottom:2px;
        }
        .contact-item .val{ font-weight:500; }

        .social{ display:flex; gap:8px; }
        .social a{
          width: clamp(36px, 2.4vw, 44px); height: clamp(36px, 2.4vw, 44px);
          display:grid; place-items:center;
          background: transparent;
          border: 1px solid rgba(212,162,74,0.3);
          border-radius:4px;
          color: var(--gold-3);
          transition: background .25s, border-color .25s, transform .25s;
        }
        .social a:hover{ background: rgba(212,162,74,0.1); border-color: var(--gold-3); transform: translateY(-2px); }

        .minifooter{
          padding: clamp(20px, 2vw, 36px) 0 clamp(28px, 2vw, 40px);
          font-size: clamp(11px, 0.7vw, 14px);
          color: rgba(244,236,220,0.5);
        }
        .minifooter-inner{
          display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
        }
        .minifooter a{ color:inherit; text-decoration:none; }
        .minifooter a:hover{ color:var(--gold-3); }

        .reveal{ opacity:0; transform: translateY(20px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
        .reveal.is-in{ opacity:1; transform:none; }

        @media (max-width: 720px){
          .nut{ display:none; }
          .bg-nuts{ display:none; }
          .visual{ max-width: 380px; margin: 0 auto; }
          .top-meta{ font-size:10px; gap:12px; }
        }

        @media (min-width: 1600px){
          body{ font-size: 17px; }
        }
        @media (min-width: 1920px){
          body{ font-size: 18px; }
        }
        @media (min-width: 2400px){
          body{ font-size: 20px; }
        }

        @media (prefers-reduced-motion: reduce){
          *, *::before, *::after{
            animation-duration: 0.001ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.001ms !important;
          }
          .reveal{ opacity:1 !important; transform:none !important; }
        }
      `}</style>

      <div className="backdrop" aria-hidden="true"></div>
      <div className="dotgrid" aria-hidden="true"></div>

      <div className="bg-nuts" id="bgNuts" aria-hidden="true"></div>

      <svg width="0" height="0" style={{position:'absolute', visibility:'hidden'}} aria-hidden="true">
        <defs>
          <radialGradient id="alm-g" cx="35%" cy="35%">
            <stop offset="0" stopColor="#E6B97A"/>
            <stop offset="0.6" stopColor="#B07A3E"/>
            <stop offset="1" stopColor="#6E4220"/>
          </radialGradient>
          <linearGradient id="csh-g" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#F0CA8A"/>
            <stop offset="0.6" stopColor="#C99A52"/>
            <stop offset="1" stopColor="#8A5A2C"/>
          </linearGradient>
          <radialGradient id="pst-g" cx="50%" cy="40%">
            <stop offset="0" stopColor="#B5C892"/>
            <stop offset="0.55" stopColor="#7B9C5F"/>
            <stop offset="1" stopColor="#3F5A2B"/>
          </radialGradient>
          <linearGradient id="pst-shell" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#E5C99A"/>
            <stop offset="1" stopColor="#A07B4A"/>
          </linearGradient>
          <radialGradient id="dt-g" cx="40%" cy="30%">
            <stop offset="0" stopColor="#A0633A"/>
            <stop offset="0.55" stopColor="#5A3018"/>
            <stop offset="1" stopColor="#2A1608"/>
          </radialGradient>
          <radialGradient id="wln-g" cx="35%" cy="35%">
            <stop offset="0" stopColor="#D1A36A"/>
            <stop offset="1" stopColor="#6E4220"/>
          </radialGradient>

          <symbol id="nut-almond" viewBox="0 0 50 70">
            <ellipse cx="25" cy="35" rx="14" ry="28" fill="url(#alm-g)" stroke="#5C3214" strokeWidth="1"/>
            <path d="M25 8 Q22 35 25 62" stroke="#5C3214" strokeWidth="0.8" fill="none" opacity="0.5"/>
            <ellipse cx="20" cy="22" rx="4" ry="6" fill="rgba(255,240,210,0.35)"/>
          </symbol>
          <symbol id="nut-cashew" viewBox="0 0 60 42">
            <path d="M8 20 C 6 6, 22 0, 32 8 C 40 14, 50 14, 54 26 C 56 36, 42 40, 30 36 C 20 32, 14 32, 10 28 Z" fill="url(#csh-g)" stroke="#6E4220" strokeWidth="1"/>
            <path d="M14 16 Q 28 12 50 24" stroke="#6E4220" strokeWidth="0.8" fill="none" opacity="0.5"/>
          </symbol>
          <symbol id="nut-pistachio" viewBox="0 0 50 45">
            <ellipse cx="25" cy="22" rx="18" ry="15" fill="url(#pst-shell)" stroke="#7A5630" strokeWidth="1"/>
            <ellipse cx="25" cy="22" rx="9" ry="10" fill="url(#pst-g)" stroke="#4B6936" strokeWidth="0.6"/>
            <path d="M22 13 Q 25 22 22 32" stroke="#3F5A2B" strokeWidth="0.6" fill="none" opacity="0.6"/>
          </symbol>
          <symbol id="nut-walnut" viewBox="0 0 50 50">
            <ellipse cx="25" cy="25" rx="20" ry="18" fill="url(#wln-g)" stroke="#4F2C15" strokeWidth="1"/>
            <path d="M25 7 Q 20 25 25 43 M10 18 Q 25 22 40 18 M10 32 Q 25 28 40 32 M16 10 Q 18 25 16 40 M34 10 Q 32 25 34 40" stroke="#4F2C15" strokeWidth="0.7" fill="none" opacity="0.55"/>
          </symbol>
          <symbol id="nut-date" viewBox="0 0 40 60">
            <ellipse cx="20" cy="30" rx="13" ry="24" fill="url(#dt-g)" stroke="#1F1004" strokeWidth="0.8"/>
            <ellipse cx="16" cy="20" rx="3" ry="5" fill="rgba(255,210,160,0.3)"/>
          </symbol>
        </defs>
      </svg>

      <div className="page">
        <header className="top-bar">
          <div className="wrap top-bar-inner">
            <a className="logo" href="index.html" aria-label="Nuts Hub home">
              <svg className="logo-mark" viewBox="0 0 80 80" fill="none" aria-hidden="true">
                <circle cx="40" cy="40" r="36" stroke="var(--cream)" strokeWidth="3" />
                <path d="M22 52 V32 c0-3 2-5 5-5 s5 2 5 5 v20" stroke="var(--cream)" strokeWidth="3.5" strokeLinecap="round" fill="none"/>
                <path d="M42 22 V52" stroke="var(--cream)" strokeWidth="3.5" strokeLinecap="round"/>
                <ellipse cx="51" cy="44" rx="10" ry="8" stroke="var(--cream)" strokeWidth="3.5" fill="none"/>
              </svg>
              <span className="logo-text">
                <span className="wordmark">nuts hub</span>
                <span className="sub" style={{display:'block'}}>Premium Pantry · UAE</span>
              </span>
            </a>
            <div className="top-meta">
              <span>EN</span>
              <span style={{opacity:0.4}}>·</span>
              <a href="index.html">← Back to home</a>
            </div>
          </div>
        </header>

        <section className="hero">
          <div className="wrap hero-inner">
            <div className="reveal" id="rev1">
              <span className="eyebrow">Coming Soon · Nuts Hub</span>
              <h1 className="serif">
                We're preparing<br/>
                something<br/>
                <em>premium.</em>
              </h1>
              <p className="sub">
                This section of Nuts Hub is being carefully crafted. Soon, you'll be able to
                explore more of our premium nuts, dry fruits, dates, spices, snack packs,
                and gifting collections online.
              </p>
              <ul className="micro">
                <li>Fresh selections are coming soon</li>
                <li>Premium packs, gifting options &amp; everyday favorites are being prepared</li>
                <li>Thank you for your patience while we complete this experience</li>
              </ul>
              <div className="btn-row">
                <a className="btn btn-gold" href="#" onClick={(e) => { e.preventDefault(); handleBack(); }}>
                  Back to Home
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                </a>
                <a className="btn btn-ghost" href="mailto:info@thenutshub.com">
                  Contact Nuts Hub
                </a>
              </div>
            </div>

            <div className="reveal" id="rev2" style={{transitionDelay: '.2s'}}>
              <div className="visual">
                <div className="plate" aria-hidden="true"></div>
                <div className="ring-outer" aria-hidden="true"></div>
                <div className="ring-inner" aria-hidden="true"></div>

                <div className="circle-text" aria-hidden="true">
                  <svg viewBox="0 0 400 400" width="100%" height="100%">
                    <defs>
                      <path id="circle-path" d="M 200,200 m -160,0 a 160,160 0 1,1 320,0 a 160,160 0 1,1 -320,0"/>
                    </defs>
                    <text fontFamily="'Plus Jakarta Sans', sans-serif" fontSize="13" fontWeight="600" letterSpacing="6" fill="var(--gold-3)">
                      <textPath href="#circle-path">
                        PREMIUM PANTRY · UAE · COMING SOON · NUTS HUB · PREMIUM PANTRY · UAE · COMING SOON · NUTS HUB · 
                      </textPath>
                    </text>
                  </svg>
                </div>

                <div className="badge" aria-hidden="true">
                  <div className="badge-inner">
                    <div style={{display:'flex', flexDirection:'column', alignItems:'center', padding: '0 18px'}}>
                      <div className="badge-eye">Est · 2026</div>
                      <div className="badge-divider"></div>
                      <div className="badge-title">Coming<br/>Soon</div>
                      <div className="badge-divider"></div>
                      <div className="badge-tag">Premium &middot; Pantry</div>
                    </div>
                  </div>
                </div>

                <svg className="nut n1" width="48" height="68" aria-hidden="true"><use href="#nut-almond"/></svg>
                <svg className="nut n2" width="56" height="40" aria-hidden="true"><use href="#nut-cashew"/></svg>
                <svg className="nut n3" width="50" height="45" aria-hidden="true"><use href="#nut-pistachio"/></svg>
                <svg className="nut n4" width="36" height="54" aria-hidden="true"><use href="#nut-date"/></svg>
                <svg className="nut n5" width="44" height="44" aria-hidden="true"><use href="#nut-walnut"/></svg>
                <svg className="nut n6" width="42" height="60" aria-hidden="true"><use href="#nut-almond"/></svg>
              </div>
            </div>
          </div>
        </section>

        <div className="contact-strip">
          <div className="wrap contact-strip-inner">
            <div className="left">
              <a className="contact-item" href="https://www.instagram.com/thenutshubroastery/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                <span className="ic">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
                </span>
                <span>
                  <span className="lbl">Instagram</span>
                  <span className="val">@thenutshubroastery</span>
                </span>
              </a>
              <a className="contact-item" href="tel:+971559701501" aria-label="Phone">
                <span className="ic">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z"/></svg>
                </span>
                <span>
                  <span className="lbl">Call us</span>
                  <span className="val">+971 55 970 1501</span>
                </span>
              </a>
              <a className="contact-item" href="mailto:info@thenutshub.com" aria-label="Email">
                <span className="ic">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 7 9-7"/></svg>
                </span>
                <span>
                  <span className="lbl">Email</span>
                  <span className="val">info@thenutshub.com</span>
                </span>
              </a>
              <div className="contact-item">
                <span className="ic">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 21s-7-7-7-12a7 7 0 0 1 14 0c0 5-7 12-7 12Z"/><circle cx="12" cy="9" r="2.5"/></svg>
                </span>
                <span>
                  <span className="lbl">Visit</span>
                  <span className="val">Al Falah St · Abu Dhabi</span>
                </span>
              </div>
            </div>
            {/* <div className="social">
              <a href="https://www.instagram.com/thenutshubroastery/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
              </a>
              <a href="#" aria-label="Facebook">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M13 22v-8h3l1-4h-4V7.5c0-1.2.4-2 2-2h2V2.1C16.6 2 15.6 2 14.6 2 12 2 10 3.6 10 6.9V10H7v4h3v8Z"/></svg>
              </a>
              <a href="#" aria-label="TikTok">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M16 3c.6 2.6 2.4 4.3 5 4.6v3c-1.9 0-3.6-.6-5-1.6V16a6 6 0 1 1-6-6v3a3 3 0 1 0 3 3V3Z"/></svg>
              </a>
            </div> */}
          </div>
        </div>

        <footer className="minifooter">
          <div className="wrap minifooter-inner">
            <div>© 2026 Nuts Hub Roastery · Premium nuts, dry fruits &amp; spices · UAE</div>
            <div style={{display:'flex', gap:20}}>
              <a href="index.html">Home</a>
              <a href="mailto:info@thenutshub.com">Contact</a>
              <a href="#" aria-disabled="true" style={{opacity:0.5}}>Privacy</a>
            </div>
          </div>
        </footer>
      </div>
    </>
  );
}