// Web Design Showcase — 6 mini-site previews in a browser frame carousel

function MiniMaisonNoir() {
  return (
    <div style={{ background:'#0A0A0A', width:'100%', height:'100%', fontFamily:'Georgia, serif', color:'#F5E8C8', position:'relative', overflow:'hidden' }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'20px 48px', borderBottom:'1px solid rgba(245,232,200,0.12)' }}>
        <div style={{ fontSize:11, letterSpacing:'0.3em', textTransform:'uppercase', color:'#C9B37A' }}>Réserver</div>
        <span style={{ fontSize:22, letterSpacing:'0.35em', textTransform:'uppercase', color:'#F5E8C8', fontWeight:400 }}>MAISON NOIR</span>
        <div style={{ fontSize:11, letterSpacing:'0.3em', textTransform:'uppercase', color:'#C9B37A' }}>Menu</div>
      </div>
      <div style={{ padding:'80px 48px', textAlign:'center' }}>
        <div style={{ fontSize:11, letterSpacing:'0.4em', textTransform:'uppercase', color:'#C9B37A', marginBottom:30 }}>— Paris · 2ème —</div>
        <div style={{ fontFamily:'Georgia, serif', fontSize:64, fontStyle:'italic', fontWeight:400, lineHeight:1.05, marginBottom:24 }}>
          La table la plus<br/>secrète de Paris.
        </div>
        <div style={{ display:'inline-block', border:'1px solid #C9B37A', color:'#C9B37A', padding:'12px 32px', fontSize:10, letterSpacing:'0.3em', textTransform:'uppercase', marginTop:10 }}>Réservation privée</div>
      </div>
      <div style={{ position:'absolute', bottom:28, left:48, fontSize:10, color:'#C9B37A', letterSpacing:'0.2em', textTransform:'uppercase' }}>Étoile Michelin · 2026</div>
      <div style={{ position:'absolute', bottom:28, right:48, fontSize:10, color:'#C9B37A', letterSpacing:'0.2em' }}>01 · 06</div>
    </div>
  );
}

function MiniSurge() {
  return (
    <div style={{ background:'#FF3A00', width:'100%', height:'100%', fontFamily:'system-ui, sans-serif', color:'#fff', position:'relative', overflow:'hidden' }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'18px 40px' }}>
        <span style={{ fontWeight:900, fontSize:22, letterSpacing:'-0.04em', fontStyle:'italic' }}>SURGE/</span>
        <div style={{ display:'flex', gap:20, fontSize:12, fontWeight:600 }}>
          <span>Shop</span><span>Science</span><span>Stack</span>
        </div>
        <div style={{ background:'#000', color:'#fff', padding:'8px 18px', borderRadius:99, fontSize:12, fontWeight:700 }}>BAG · 2</div>
      </div>
      <div style={{ padding:'48px 40px', display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:36, alignItems:'center' }}>
        <div>
          <div style={{ fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.15em', marginBottom:14, opacity:0.85 }}>NEW · PRE-WORKOUT 3.0</div>
          <div style={{ fontSize:62, fontWeight:900, lineHeight:0.92, letterSpacing:'-0.04em' }}>
            HIT.<br/>HARD.<br/>EARLY.
          </div>
          <div style={{ display:'inline-block', background:'#000', color:'#fff', padding:'14px 28px', fontSize:12, fontWeight:800, letterSpacing:'0.08em', marginTop:28, borderRadius:99 }}>SHOP NOW — $42</div>
        </div>
        <div style={{
          aspectRatio:'1', background:'#000', borderRadius:16, display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column', gap:8,
        }}>
          <div style={{ fontSize:60, fontWeight:900, color:'#FF3A00', fontStyle:'italic' }}>300</div>
          <div style={{ fontSize:11, color:'#FF3A00', letterSpacing:'0.2em', fontWeight:700 }}>MG CAFFEINE</div>
        </div>
      </div>
    </div>
  );
}

function MiniOrbitize() {
  return (
    <div style={{ background:'#0A0E1A', width:'100%', height:'100%', fontFamily:'system-ui, sans-serif', color:'#fff', position:'relative', overflow:'hidden' }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'14px 36px', borderBottom:'1px solid rgba(255,255,255,0.06)' }}>
        <div style={{ display:'flex', alignItems:'center', gap:10 }}>
          <div style={{ width:18, height:18, borderRadius:'50%', background:'linear-gradient(135deg,#7C3AED,#00B4FF)' }}/>
          <span style={{ fontWeight:700, fontSize:15 }}>Orbitize</span>
        </div>
        <div style={{ display:'flex', gap:20, fontSize:12, color:'rgba(255,255,255,0.55)' }}>
          <span>Dashboard</span><span>Reports</span><span>API</span>
        </div>
        <div style={{ background:'linear-gradient(135deg,#7C3AED,#00B4FF)', padding:'7px 16px', borderRadius:8, fontSize:12, fontWeight:600 }}>Upgrade</div>
      </div>
      <div style={{ padding:'28px 36px' }}>
        <div style={{ fontSize:11, color:'rgba(255,255,255,0.5)', marginBottom:4 }}>Monthly Revenue</div>
        <div style={{ fontSize:40, fontWeight:700, letterSpacing:'-0.03em', marginBottom:4 }}>
          $284,920 <span style={{ fontSize:14, color:'#00E5A0', fontWeight:600 }}>+18.4%</span>
        </div>
        {/* fake chart */}
        <svg viewBox="0 0 500 120" style={{ width:'100%', height:120, marginTop:12 }}>
          <defs>
            <linearGradient id="og1" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#7C3AED" stopOpacity="0.5"/>
              <stop offset="100%" stopColor="#7C3AED" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d="M0 90 C 80 80, 120 60, 180 65 S 300 30, 380 40 S 480 10, 500 20 L 500 120 L 0 120 Z" fill="url(#og1)"/>
          <path d="M0 90 C 80 80, 120 60, 180 65 S 300 30, 380 40 S 480 10, 500 20" stroke="#00B4FF" strokeWidth="2" fill="none"/>
        </svg>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14, marginTop:16 }}>
          {[['Users','12,408'],['Churn','2.1%'],['LTV','$1,284']].map(([l,v])=> (
            <div key={l} style={{ background:'rgba(255,255,255,0.04)', borderRadius:8, padding:'12px 14px', border:'1px solid rgba(255,255,255,0.06)' }}>
              <div style={{ fontSize:11, color:'rgba(255,255,255,0.5)' }}>{l}</div>
              <div style={{ fontSize:18, fontWeight:700, marginTop:2 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function MiniVelour() {
  return (
    <div style={{ background:'#F5F0EB', width:'100%', height:'100%', fontFamily:'Georgia, serif', color:'#1A1A1A', position:'relative' }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'20px 44px', borderBottom:'1px solid #D4CAB8' }}>
        <div style={{ fontSize:11, letterSpacing:'0.22em', textTransform:'uppercase', color:'#8B7355' }}>Collections</div>
        <span style={{ fontSize:22, letterSpacing:'0.35em', textTransform:'uppercase' }}>VELOUR</span>
        <div style={{ fontSize:11, letterSpacing:'0.22em', textTransform:'uppercase', color:'#8B7355' }}>Cart (0)</div>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', height:'calc(100% - 62px)' }}>
        <div style={{
          background:`linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.5)),
                      repeating-linear-gradient(135deg, #3A2F25 0px, #3A2F25 20px, #4A3E32 20px, #4A3E32 40px)`,
          position:'relative', display:'flex', alignItems:'flex-end', padding:36,
        }}>
          <div>
            <div style={{ fontSize:10, letterSpacing:'0.22em', textTransform:'uppercase', color:'rgba(255,255,255,0.8)', marginBottom:10 }}>SS 2026</div>
            <div style={{ fontSize:46, fontWeight:400, lineHeight:0.98, color:'#fff', fontStyle:'italic' }}>Worn in<br/>Silence.</div>
          </div>
        </div>
        <div style={{ background:'#1A1A1A', color:'#F5F0EB', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:22, padding:40, textAlign:'center' }}>
          <div style={{ width:56, height:56, borderRadius:'50%', border:'1px solid rgba(245,240,235,0.3)', display:'flex', alignItems:'center', justifyContent:'center' }}>
            <span style={{ fontSize:22 }}>✦</span>
          </div>
          <div style={{ fontSize:12, letterSpacing:'0.22em', textTransform:'uppercase', lineHeight:1.8 }}>New Arrivals<br/>Just Landed</div>
          <div style={{ border:'1px solid rgba(245,240,235,0.5)', padding:'9px 24px', fontSize:10, letterSpacing:'0.22em', textTransform:'uppercase' }}>Shop Now</div>
        </div>
      </div>
    </div>
  );
}

function MiniVerdant() {
  return (
    <div style={{ background:'#FAFAF8', width:'100%', height:'100%', fontFamily:'system-ui, sans-serif', color:'#1A1A1A' }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'14px 32px', background:'#fff', borderBottom:'1px solid #E4EBE4' }}>
        <span style={{ fontWeight:800, fontSize:16, letterSpacing:'-0.03em' }}>
          <span style={{ color:'#2D5A3D' }}>Verdant</span>Realty
        </span>
        <div style={{ display:'flex', gap:20, fontSize:12, color:'#6B7B6B' }}>
          <span>Buy</span><span>Rent</span><span>Sell</span><span>Agents</span>
        </div>
        <span style={{ background:'#2D5A3D', color:'#fff', padding:'8px 18px', fontSize:12, fontWeight:600, borderRadius:4 }}>Free Valuation</span>
      </div>
      <div style={{ padding:36, background:`linear-gradient(135deg, #D4E4D4 0%, #B0CBB0 100%)` }}>
        <div style={{ fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color:'#2D5A3D', fontWeight:700, marginBottom:10 }}>London · Manchester · Bristol</div>
        <div style={{ fontSize:36, fontWeight:800, lineHeight:1.1, letterSpacing:'-0.03em', color:'#1A2E1A' }}>
          Find a home that<br/><span style={{ color:'#2D5A3D' }}>fits your life.</span>
        </div>
        <div style={{ background:'#fff', borderRadius:6, padding:'10px 14px', display:'flex', alignItems:'center', gap:10, maxWidth:380, marginTop:16 }}>
          <span style={{ fontSize:13 }}>🔍</span>
          <span style={{ fontSize:11, color:'#A0AFA0', flex:1 }}>City, postcode, or area…</span>
          <span style={{ background:'#2D5A3D', color:'#fff', padding:'5px 14px', borderRadius:4, fontSize:11, fontWeight:600 }}>Search</span>
        </div>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14, padding:'18px 32px' }}>
        {[['£485K','3 bed · Chelsea','#2D5A3D'],['£320K','2 bed · Shoreditch','#6FCF97'],['£720K','4 bed · Kensington','#2D5A3D']].map(([p,d,c])=> (
          <div key={d} style={{ background:'#fff', borderRadius:8, boxShadow:'0 2px 10px rgba(0,0,0,0.06)', overflow:'hidden' }}>
            <div style={{ height:80, background:`linear-gradient(135deg, ${c}33, ${c}66)` }}/>
            <div style={{ padding:'10px 12px' }}>
              <div style={{ fontSize:14, fontWeight:700 }}>{p}</div>
              <div style={{ fontSize:11, color:'#6B7B6B', marginTop:2 }}>{d}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function MiniApex() {
  return (
    <div style={{ background:'#0D0D0D', width:'100%', height:'100%', fontFamily:'Impact, sans-serif', color:'#FFF', position:'relative', overflow:'hidden' }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'14px 32px', borderBottom:'1px solid rgba(198,255,0,0.12)' }}>
        <span style={{ fontWeight:900, fontSize:16, letterSpacing:'0.05em', color:'#C6FF00', textTransform:'uppercase' }}>APEX FORM</span>
        <div style={{ display:'flex', gap:18, fontSize:10, color:'#555', letterSpacing:'0.1em', textTransform:'uppercase', fontFamily:'Arial' }}>
          <span>Programs</span><span>Coaches</span><span>App</span>
        </div>
        <div style={{ border:'1px solid #C6FF00', color:'#C6FF00', padding:'6px 16px', fontSize:10, fontWeight:900, letterSpacing:'0.1em', textTransform:'uppercase' }}>Join Now</div>
      </div>
      <div style={{ padding:'36px 32px', position:'relative' }}>
        <div style={{
          position:'absolute', inset:0,
          background:`radial-gradient(ellipse at 80% 40%, rgba(198,255,0,0.25) 0%, transparent 55%)`,
        }}/>
        <div style={{ position:'relative' }}>
          <div style={{ fontSize:10, letterSpacing:'0.22em', textTransform:'uppercase', color:'#C6FF00', fontFamily:'Arial', marginBottom:10 }}>No fluff. No excuses.</div>
          <div style={{ fontSize:56, fontWeight:900, lineHeight:0.88, letterSpacing:'-0.02em', textTransform:'uppercase', marginBottom:22 }}>
            TRAIN<br/><span style={{ color:'#C6FF00' }}>LIKE</span><br/>YOU MEAN IT.
          </div>
          <div style={{ background:'#C6FF00', color:'#0D0D0D', display:'inline-block', padding:'12px 26px', fontSize:12, fontWeight:900, letterSpacing:'0.08em', textTransform:'uppercase' }}>
            Start Your Program →
          </div>
        </div>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', borderTop:'1px solid rgba(198,255,0,0.15)', margin:'0 32px' }}>
        {[['12K+','Athletes'],['94%','Retention'],['200+','Programs']].map(([v,l],i)=>(
          <div key={l} style={{ padding:'14px 0', textAlign:'center', borderRight:i<2?'1px solid rgba(198,255,0,0.15)':'none' }}>
            <div style={{ fontSize:22, fontWeight:900, color:'#C6FF00' }}>{v}</div>
            <div style={{ fontSize:9, color:'#666', fontFamily:'Arial', letterSpacing:'0.1em', textTransform:'uppercase', marginTop:2 }}>{l}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

const SITES = [
  { name:'Maison Noir',       url:'maisonnoir.fr',       type:'Luxury Restaurant',   Comp: MiniMaisonNoir },
  { name:'Surge Supplements', url:'surgesupps.com',      type:'DTC E-commerce',      Comp: MiniSurge },
  { name:'Orbitize Analytics',url:'orbitize.io',         type:'SaaS Platform',       Comp: MiniOrbitize },
  { name:'Velour Studio',     url:'velour.studio',       type:'Fashion & Luxury',    Comp: MiniVelour },
  { name:'Verdant Realty',    url:'verdantrealty.co.uk', type:'Real Estate',         Comp: MiniVerdant },
  { name:'Apex Form',         url:'apexform.io',         type:'Fitness & Wellness',  Comp: MiniApex },
];

function WebDesignShowcase() {
  const [cur, setCur] = useState(0);
  const go = (d) => setCur(p => (p + d + SITES.length) % SITES.length);
  const containerRef = useRef(null);
  const [scale, setScale] = useState(1);

  // Auto-advance
  useEffect(() => {
    const id = setInterval(() => setCur(p => (p+1) % SITES.length), 6500);
    return () => clearInterval(id);
  }, []);

  // Responsive scaling logic
  useEffect(() => {
    if (!containerRef.current) return;
    const handleResize = () => {
      const width = containerRef.current.offsetWidth;
      setScale(width / 900);
    };
    handleResize();
    window.addEventListener('resize', handleResize);
    const timer = setTimeout(handleResize, 150); // delay check to ensure flex layout finishes
    return () => {
      window.removeEventListener('resize', handleResize);
      clearTimeout(timer);
    };
  }, []);

  return (
    <section id="designs" className="section-full" style={{ background:'var(--bg)' }}>
      <div className="section" style={{ padding:'0 var(--section-px)' }}>
        <SectionHeader
          eyebrow="Frontend UI"
          title={<>Every industry. <span style={{ fontStyle:'italic', color:'var(--accent)' }}>Every aesthetic.</span></>}
          sub="Six live-coded site designs spanning luxury, DTC, SaaS, fashion, real estate, and fitness — all built from scratch, no templates."
        />
        <div style={{ maxWidth:1000, margin:'0 auto' }}>
          <div className="design-carousel-row" style={{ display:'flex', alignItems:'center', gap:14 }}>
            <button onClick={()=>go(-1)} aria-label="Previous" className="design-nav-btn" style={navBtn}>‹</button>
            <div style={{ flex:1, borderRadius:16, minWidth:0,
              background:'#1C1C1E', overflow:'hidden', border:'1px solid rgba(255,255,255,0.08)',
              boxShadow:'0 32px 80px rgba(0,0,0,0.5)',
            }}>
              <div style={{ background:'#2C2C2E', padding:'10px 14px', display:'flex', alignItems:'center', gap:8 }}>
                <span style={{ width:10, height:10, borderRadius:'50%', background:'#FF5F57' }}/>
                <span style={{ width:10, height:10, borderRadius:'50%', background:'#FEBC2E' }}/>
                <span style={{ width:10, height:10, borderRadius:'50%', background:'#28C840' }}/>
                <div style={{ flex:1, background:'#3A3A3C', borderRadius:6, padding:'4px 12px', marginLeft:6, fontSize:11, color:'#888', fontFamily:'system-ui, sans-serif', textAlign:'center' }}>
                  {SITES[cur].url}
                </div>
              </div>
              <div ref={containerRef} style={{ height:440 * scale, position:'relative', background:'#0a0a0a', overflow:'hidden', transition:'height 0.2s ease' }}>
                <div style={{
                  width: 900,
                  height: 440,
                  transform: `scale(${scale})`,
                  transformOrigin: 'top left',
                  position: 'absolute',
                  top: 0,
                  left: 0,
                }}>
                  {SITES.map((s, i) => {
                    const C = s.Comp;
                    return (
                      <div key={i} style={{
                        position:'absolute', inset:0,
                        opacity: i === cur ? 1 : 0,
                        transition:'opacity .5s ease', pointerEvents: i === cur ? 'auto' : 'none',
                      }}>
                        <C />
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
            <button onClick={()=>go(1)} aria-label="Next" className="design-nav-btn" style={navBtn}>›</button>
          </div>

          <div style={{ textAlign:'center', marginTop:22 }}>
            <div className="serif" style={{ fontSize:20, fontWeight:700, color:'var(--text)', letterSpacing:'-0.01em' }}>
              {SITES[cur].name}
            </div>
            <div className="mono" style={{ fontSize:11.5, color:'var(--muted)', marginTop:5, letterSpacing:'0.1em', textTransform:'uppercase' }}>
              {SITES[cur].type}
            </div>
          </div>

          <div style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:16, marginTop:18 }}>
            <button onClick={()=>go(-1)} aria-label="Previous" className="design-mobile-nav" style={{
              background:'transparent', border:'none', color:'var(--accent)', fontSize:28, cursor:'pointer', padding:'0 8px', display:'flex', alignItems:'center', justifyContent:'center'
            }}>‹</button>

            <div style={{ display:'flex', gap:8 }}>
              {SITES.map((_, i) => (
                <button key={i} onClick={()=>setCur(i)} aria-label={`Go to ${i+1}`} style={{
                  width: i===cur? 24: 6, height: 6, borderRadius:99,
                  background: i===cur ? 'var(--accent)' : 'var(--border-strong)',
                  border:'none', cursor:'pointer', padding:0, transition:'width .3s, background .2s',
                }}/>
              ))}
            </div>

            <button onClick={()=>go(1)} aria-label="Next" className="design-mobile-nav" style={{
              background:'transparent', border:'none', color:'var(--accent)', fontSize:28, cursor:'pointer', padding:'0 8px', display:'flex', alignItems:'center', justifyContent:'center'
            }}>›</button>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 768px) {
          .design-nav-btn { display: none !important; }
        }
        @media (min-width: 769px) {
          .design-mobile-nav { display: none !important; }
        }
      `}</style>
    </section>
  );
}
const navBtn = {
  flexShrink:0, width:42, height:42, borderRadius:'50%',
  background:'rgba(6,20,34,0.85)', border:'1px solid var(--border)',
  color:'var(--accent)', fontSize:22, cursor:'pointer',
  display:'flex', alignItems:'center', justifyContent:'center',
  transition:'all .2s',
};

window.WebDesignShowcase = WebDesignShowcase;