// Hero: full-bleed photographic cover + magazine cover treatment.
// Second component InteractiveDemo lives below — the draggable hotspot canvas.

const HERO_IMG = "https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=2400&q=85&auto=format&fit=crop";
const HERO_IMG_2 = "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80&auto=format&fit=crop";
const HERO_IMG_3 = "https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?w=1200&q=80&auto=format&fit=crop";

function Hero(){
  return (
    <section style={{
      position:'relative', minHeight:'min(900px, 100vh)',
      background:'#0a0807',
      overflow:'hidden',
      borderBottom:'1px solid var(--line)',
      display:'flex', flexDirection:'column',
    }}>
      {/* photo */}
      <img src={HERO_IMG} alt="" style={{
        position:'absolute', inset:0,
        width:'100%', height:'100%', objectFit:'cover',
        filter:'saturate(0.88) brightness(0.5) contrast(1.05)',
      }}/>
      {/* warm color wash */}
      <div style={{
        position:'absolute', inset:0, pointerEvents:'none',
        background:'radial-gradient(80% 60% at 80% 30%, rgba(217,119,87,0.20), transparent 60%), linear-gradient(180deg, rgba(10,8,7,0.55) 0%, rgba(10,8,7,0.15) 35%, rgba(10,8,7,0.9) 92%)',
      }}/>
      {/* duotone-ish blue shadow */}
      <div style={{
        position:'absolute', inset:0, pointerEvents:'none',
        background:'radial-gradient(60% 50% at 12% 75%, rgba(42,26,46,0.55), transparent 65%)',
      }}/>

      {/* flow content */}
      <div style={{
        position:'relative', zIndex:4,
        flex:1,
        display:'flex', flexDirection:'column',
        padding:'118px 32px 32px',
        maxWidth:1320, margin:'0 auto', width:'100%',
      }}>
        {/* masthead bar */}
        <div style={{
          display:'flex', justifyContent:'space-between', alignItems:'center',
          paddingBottom:18, borderBottom:'1px solid rgba(245,238,225,0.18)',
          gap:24, flexWrap:'wrap',
        }}>
          <span className="mono" style={{color:'var(--brass-2)'}}>Vol. I · Issue 01</span>
          <span className="serif" style={{fontStyle:'italic', fontSize:14, color:'var(--ink-2)'}}>
            A home platform for the people who actually live there
          </span>
          <span className="mono" style={{color:'var(--brass-2)'}}>Spring 2026</span>
        </div>

        {/* main headline block */}
        <div style={{flex:1, display:'flex', flexDirection:'column', justifyContent:'center', padding:'48px 0'}}>
          <div style={{display:'flex',alignItems:'center',gap:14, marginBottom:28}}>
            <span style={{width:48, height:1, background:'var(--accent)'}}/>
            <span className="mono" style={{color:'var(--accent-2)'}}>The cover story</span>
          </div>

          <h1 className="serif" style={{
            margin:0, fontWeight:300,
            fontSize:'clamp(64px, 11vw, 172px)',
            lineHeight:0.88, letterSpacing:'-0.04em',
            color:'var(--ink)',
            textShadow:'0 2px 40px rgba(0,0,0,0.35)',
            maxWidth:'1100px',
          }}>
            Design the room
            <br/>
            <span style={{
              fontStyle:'italic', fontWeight:300,
              background:'linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 55%, var(--brass) 100%)',
              WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent',
              backgroundClip:'text', color:'transparent',
            }}>you live in.</span>
          </h1>

          <div style={{
            marginTop:40, display:'grid',
            gridTemplateColumns:'minmax(0, 1fr) auto', gap:48, alignItems:'end',
            flexWrap:'wrap',
          }}>
            <p style={{
              margin:0, maxWidth:560,
              color:'var(--ink)', fontSize:'clamp(15px, 1.3vw, 18px)', lineHeight:1.55, fontWeight:300,
            }}>
              <span className="serif" style={{
                float:'left', fontSize:60, lineHeight:0.85, fontStyle:'italic',
                color:'var(--accent)', paddingRight:14, paddingTop:4, fontWeight:300,
              }}>P</span>
              lan it. Source it. Layer real products onto a photo of your actual space.
              Then share a shoppable card the internet can click — and earn from the taste
              you already have.
            </p>

            <div style={{display:'flex',gap:14, alignItems:'center', flexWrap:'wrap'}}>
              <a href="Editor.html" style={{
                display:'inline-flex',alignItems:'center',gap:10,
                padding:'18px 26px', borderRadius:999,
                background:'var(--accent)', color:'#1a0907',
                fontSize:14, fontWeight:600,
                boxShadow:'0 10px 30px rgba(217,119,87,0.35), inset 0 1px 0 rgba(255,255,255,0.25)',
              }}>
                Build your first room <Icon.Arrow size={13}/>
              </a>
              <a href="Explore.html" style={{
                padding:'18px 4px', fontSize:14, color:'var(--ink)',
                borderBottom:'1px solid rgba(245,238,225,0.4)',
              }}>
                See live room cards
              </a>
            </div>
          </div>
        </div>

        {/* bottom row — tilted photo + TOC card in flow */}
        <div style={{
          marginTop:24,
          display:'grid',
          gridTemplateColumns:'minmax(180px, 220px) 1fr minmax(260px, 320px)',
          gap:32, alignItems:'end',
        }}>
          {/* tilted photo card */}
          <div style={{
            width:200,
            border:'1px solid rgba(245,238,225,0.14)',
            background:'#0c0b0a',
            boxShadow:'0 24px 60px rgba(0,0,0,0.45)',
            transform:'rotate(-2deg)',
            transformOrigin:'left bottom',
          }}>
            <div style={{aspectRatio:'4/3', overflow:'hidden'}}>
              <img src={HERO_IMG_2} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
            </div>
            <div style={{padding:'10px 12px', borderTop:'1px solid var(--line)'}}>
              <div className="mono" style={{fontSize:9, color:'var(--brass)'}}>Cover, ctd. — pg. 06</div>
              <div className="serif" style={{fontStyle:'italic', fontSize:13, marginTop:4, color:'var(--ink-2)'}}>
                “The room is the editorial.”
              </div>
            </div>
          </div>

          {/* spacer / scroll cue */}
          <div style={{display:'flex',alignItems:'flex-end',justifyContent:'center', paddingBottom:14}}>
            <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:10, opacity:0.7}}>
              <span className="mono" style={{fontSize:9, color:'var(--brass-2)'}}>turn the page</span>
              <span style={{width:1, height:36, background:'linear-gradient(180deg, var(--brass), transparent)'}}/>
            </div>
          </div>

          {/* TOC card */}
          <div style={{
            padding:'20px 22px',
            background:'rgba(20,17,15,0.62)',
            backdropFilter:'blur(14px)', WebkitBackdropFilter:'blur(14px)',
            border:'1px solid rgba(245,238,225,0.14)',
            boxShadow:'0 24px 60px rgba(0,0,0,0.45)',
          }}>
            <div className="mono" style={{color:'var(--brass-2)', marginBottom:12}}>Inside this issue</div>
            <ol style={{listStyle:'none', padding:0, margin:0, display:'grid', gap:8}}>
              {[
                ['I.',  'Plan',   'pg. 02'],
                ['II.', 'Source', 'pg. 04'],
                ['III.','Design', 'pg. 06'],
                ['IV.', 'Share',  'pg. 08'],
                ['V.',  'Earn',   'pg. 10'],
              ].map((r,i)=>(
                <li key={i} style={{
                  display:'grid', gridTemplateColumns:'28px 1fr auto', alignItems:'baseline',
                  fontSize:13, color:'var(--ink-2)',
                  borderBottom: i<4 ? '1px dotted rgba(245,238,225,0.15)' : 'none',
                  paddingBottom:8,
                }}>
                  <span className="serif" style={{fontStyle:'italic', color:'var(--accent)'}}>{r[0]}</span>
                  <span className="serif" style={{fontSize:16}}>{r[1]}</span>
                  <span className="mono" style={{color:'var(--muted-2)'}}>{r[2]}</span>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------- Interactive demo (the canvas with draggable hotspots) -------- */
const DEMO_IMG = "https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?w=2000&q=85&auto=format&fit=crop";
const DEMO_PINS_INIT = [
  { id:'p1', x:18,  y:55, name:'Travertine Coffee Table',  brand:'Soho Home',    price:'$1,840' },
  { id:'p2', x:52,  y:42, name:'Boucle Lounge Chair',      brand:'CB2',          price:'$1,299' },
  { id:'p3', x:78,  y:35, name:'Linen Floor Lamp',         brand:'Schoolhouse',  price:'$420'   },
  { id:'p4', x:38,  y:78, name:'Vintage Beni Ourain Rug',  brand:'Etsy',         price:'$880'   },
];

function HeroPin({pin, idx, tier, isOpen, onOpen, onMove, containerRef}){
  const [dragging, setDragging] = React.useState(false);
  const start = React.useRef(null);

  const onPointerDown = (e) => {
    e.stopPropagation();
    e.preventDefault();
    e.currentTarget.setPointerCapture(e.pointerId);
    start.current = { x:e.clientX, y:e.clientY, moved:false };
    setDragging(true);
  };
  const onPointerMove = (e) => {
    if(!start.current) return;
    const dx = e.clientX - start.current.x;
    const dy = e.clientY - start.current.y;
    if(Math.abs(dx)+Math.abs(dy) > 3) start.current.moved = true;
    const rect = containerRef.current.getBoundingClientRect();
    const nx = ((e.clientX - rect.left)/rect.width)*100;
    const ny = ((e.clientY - rect.top)/rect.height)*100;
    onMove(pin.id, Math.max(4,Math.min(96,nx)), Math.max(6,Math.min(94,ny)));
  };
  const onPointerUp = () => {
    const moved = start.current?.moved;
    start.current = null;
    setDragging(false);
    if(!moved) onOpen(pin.id);
  };

  const live = tier === 'paid';
  const ring = live ? 'var(--accent)' : 'rgba(244,236,224,0.75)';

  return (
    <div
      style={{
        position:'absolute', left:`${pin.x}%`, top:`${pin.y}%`,
        transform:'translate(-50%,-50%)',
        zIndex: isOpen ? 5 : 2,
        touchAction:'none',
        cursor: dragging ? 'grabbing' : 'grab',
      }}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={onPointerUp}
    >
      <span style={{
        position:'absolute', inset:-14, borderRadius:999,
        border:`1px solid ${ring}`, opacity:0.25,
        animation: live ? 'pulse 2.4s ease-out infinite' : 'none',
      }}/>
      <div style={{
        width:30, height:30, borderRadius:999,
        background: live ? 'var(--accent)' : 'rgba(20,17,15,0.6)',
        border: `1px solid ${ring}`,
        backdropFilter:'blur(8px)',
        display:'grid', placeItems:'center',
        color: live ? '#1a0f08' : 'var(--ink)',
        fontFamily:'JetBrains Mono', fontSize:11, fontWeight:500,
        boxShadow: live ? '0 6px 24px rgba(217,119,87,0.45)' : '0 4px 24px rgba(0,0,0,0.35)',
      }}>
        {String(idx+1).padStart(2,'0')}
      </div>
      {isOpen && (
        <div onPointerDown={(e)=>e.stopPropagation()} style={{
          position:'absolute', left:'50%', top:'calc(100% + 14px)',
          transform:'translateX(-50%)',
          width:240, padding:'14px 16px',
          background:'rgba(20,17,15,0.94)',
          backdropFilter:'blur(16px)',
          border:'1px solid var(--brass)',
          borderRadius:6,
          textAlign:'left',
          cursor:'default',
          boxShadow:'0 16px 48px rgba(0,0,0,0.5)',
        }}>
          <div className="mono" style={{fontSize:10,color:'var(--brass-2)'}}>{pin.brand}</div>
          <div className="serif" style={{fontSize:17, marginTop:6, lineHeight:1.2}}>{pin.name}</div>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:12}}>
            <span style={{fontSize:14,color:'var(--ink-2)'}}>{pin.price}</span>
            {live ? (
              <a href="#" style={{
                display:'inline-flex',alignItems:'center',gap:6,
                fontSize:11, color:'var(--accent)',
                fontFamily:'JetBrains Mono', textTransform:'uppercase', letterSpacing:'0.12em',
              }}>Shop <Icon.Arrow size={11}/></a>
            ) : (
              <span style={{
                display:'inline-flex',alignItems:'center',gap:6,
                fontSize:11, color:'var(--muted)',
                fontFamily:'JetBrains Mono', textTransform:'uppercase', letterSpacing:'0.12em',
              }}><Icon.Lock size={11}/> Locked</span>
            )}
          </div>
          <span style={{
            position:'absolute', left:'50%', top:-5, transform:'translateX(-50%) rotate(45deg)',
            width:10,height:10, background:'rgba(20,17,15,0.94)',
            borderTop:'1px solid var(--brass)', borderLeft:'1px solid var(--brass)',
          }}/>
        </div>
      )}
    </div>
  );
}

function InteractiveDemo(){
  const [pins, setPins] = React.useState(DEMO_PINS_INIT);
  const [open, setOpen] = React.useState('p2');
  const [tier, setTier] = React.useState('paid');
  const ref = React.useRef(null);

  const move = (id, x, y) => setPins(ps => ps.map(p => p.id===id ? {...p, x, y} : p));
  const openPin = (id) => setOpen(o => o===id ? null : id);

  return (
    <section id="demo" style={{
      position:'relative',
      padding:'120px 0 120px',
      background:'linear-gradient(180deg, #0a0807 0%, #14100e 100%)',
      borderBottom:'1px solid var(--line)',
    }}>
      <style>{`
        @keyframes pulse {
          0% { transform: scale(0.9); opacity: 0.6 }
          70% { transform: scale(1.9); opacity: 0 }
          100% { transform: scale(1.9); opacity: 0 }
        }
      `}</style>

      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'1fr auto', gap:32, alignItems:'end', marginBottom:48}}>
          <div>
            <span className="mono eyebrow">The room card · live preview</span>
            <h2 className="serif" style={{
              margin:'24px 0 0', fontWeight:300,
              fontSize:'clamp(36px, 4.5vw, 64px)', lineHeight:1, letterSpacing:'-0.03em',
            }}>
              Drag a pin. Toggle the tier. <br/>
              <span style={{fontStyle:'italic', color:'var(--brass-2)'}}>This is what your audience sees.</span>
            </h2>
          </div>
          <div style={{
            display:'flex', alignItems:'center', gap:14,
            padding:'8px 8px 8px 16px',
            border:'1px solid var(--brass)',
            background:'rgba(201,163,106,0.06)',
            borderRadius:999,
          }}>
            <span className="mono" style={{color:'var(--brass-2)'}}>Preview as</span>
            <div style={{display:'flex', background:'rgba(0,0,0,0.4)', borderRadius:999, padding:3, gap:2}}>
              {['free','paid'].map(t=>(
                <button key={t} onClick={()=>setTier(t)} style={{
                  padding:'8px 14px', borderRadius:999,
                  fontSize:12, textTransform:'capitalize',
                  fontWeight:500, letterSpacing:'0.04em',
                  background: tier===t ? (t==='paid' ? 'var(--accent)' : 'var(--ink)') : 'transparent',
                  color: tier===t ? '#1a0f08' : 'var(--muted)',
                  transition:'background .2s ease, color .2s ease',
                }}>
                  {t === 'paid' ? 'Paid · live' : 'Free · locked'}
                </button>
              ))}
            </div>
          </div>
        </div>

        <div style={{
          display:'grid',
          gridTemplateColumns:'1fr 300px',
          border:'1px solid var(--line)',
          background:'var(--bg-1)',
          boxShadow:'0 40px 100px rgba(0,0,0,0.5)',
        }}>
          <div
            ref={ref}
            onPointerDown={()=>setOpen(null)}
            style={{
              position:'relative', aspectRatio:'16/10',
              background:'#1a1714', overflow:'hidden', cursor:'crosshair',
            }}
          >
            <img src={DEMO_IMG} alt="" style={{
              position:'absolute', inset:0, width:'100%', height:'100%',
              objectFit:'cover', filter:'saturate(0.95) brightness(0.92)',
              userSelect:'none', pointerEvents:'none',
            }}/>
            <div style={{
              position:'absolute', inset:0, pointerEvents:'none',
              background:'radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,0.35), transparent 60%), linear-gradient(180deg, rgba(0,0,0,0.18), transparent 30%)',
            }}/>
            {pins.map((p,i)=>(
              <HeroPin
                key={p.id} pin={p} idx={i} tier={tier}
                isOpen={open===p.id}
                onOpen={openPin} onMove={move}
                containerRef={ref}
              />
            ))}

            <div style={{
              position:'absolute', left:16, top:16,
              display:'flex',alignItems:'center',gap:8,
              padding:'6px 10px',
              background:'rgba(12,11,10,0.65)',
              backdropFilter:'blur(10px)',
              border:'1px solid var(--brass)',
            }}>
              <span style={{width:6,height:6,borderRadius:99,background:'var(--accent)',boxShadow:'0 0 10px var(--accent)'}}/>
              <span className="mono" style={{fontSize:10,color:'var(--brass-2)'}}>Live demo · drag the pins</span>
            </div>

            <div style={{
              position:'absolute', right:16, bottom:16,
              padding:'10px 14px',
              background:'rgba(12,11,10,0.7)',
              backdropFilter:'blur(10px)',
              border:'1px solid var(--line)',
              maxWidth:280,
            }}>
              <div className="mono" style={{fontSize:10, color:'var(--brass-2)'}}>Room card · myrooms.design/room/canyon-living</div>
              <div className="serif" style={{fontSize:18,marginTop:4}}>The Canyon Living Room</div>
              <div style={{fontSize:12, color:'var(--muted)', marginTop:2}}>by @ellaprice · 4 products · 312 clicks</div>
            </div>
          </div>

          <aside style={{
            padding:'28px 24px', borderLeft:'1px solid var(--line)',
            display:'flex', flexDirection:'column', gap:24,
            background:'linear-gradient(180deg, var(--bg-1), #100d0b)',
          }}>
            <div>
              <div className="mono" style={{marginBottom:14, color:'var(--brass-2)'}}>What you’re seeing</div>
              <ul style={{listStyle:'none',padding:0,margin:0,display:'flex',flexDirection:'column',gap:10}}>
                {pins.map((p,i)=>(
                  <li key={p.id} onClick={()=>setOpen(p.id)} style={{
                    display:'flex', alignItems:'center', gap:10,
                    fontSize:13, color: open===p.id ? 'var(--ink)' : 'var(--ink-2)',
                    cursor:'pointer',
                    padding:'4px 0',
                  }}>
                    <span style={{
                      width:22,height:22,borderRadius:99,
                      border:`1px solid ${open===p.id?'var(--accent)':'var(--line)'}`,
                      background: open===p.id ? 'rgba(217,119,87,0.18)' : 'transparent',
                      display:'grid',placeItems:'center',
                      fontFamily:'JetBrains Mono', fontSize:9,
                      color: open===p.id ? 'var(--accent)' : 'var(--muted)',
                    }}>{String(i+1).padStart(2,'0')}</span>
                    <span style={{flex:1}}>{p.name}</span>
                    <span style={{color:'var(--muted)', fontSize:12}}>{p.price}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div style={{
              padding:'14px 16px',
              background: tier==='paid' ? 'rgba(217,119,87,0.08)' : 'rgba(245,238,225,0.04)',
              border: `1px solid ${tier==='paid' ? 'var(--accent)' : 'var(--line)'}`,
            }}>
              <div className="mono" style={{
                color: tier==='paid' ? 'var(--accent-2)' : 'var(--muted-2)',
              }}>
                {tier==='paid' ? '● Hotspots are live' : '○ Hotspots are locked'}
              </div>
              <p style={{margin:'8px 0 0', fontSize:12, color:'var(--muted)', lineHeight:1.5}}>
                {tier === 'paid'
                  ? "Every hotspot fires the creator's affiliate link. The card converts wherever it travels."
                  : 'Hotspots are visible but locked. Free creators see exactly what they’re missing.'}
              </p>
            </div>

            <div style={{marginTop:'auto', paddingTop:16, borderTop:'1px solid var(--line-soft)'}}>
              <div className="mono" style={{fontSize:10, color:'var(--muted-2)'}}>Acquisition loop</div>
              <p style={{margin:'6px 0 0', fontSize:12, color:'var(--muted)', lineHeight:1.5}}>
                A card on a blog. A click. A creator earning a commission. A new creator signing up.
              </p>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.InteractiveDemo = InteractiveDemo;