// Aurum — interactive feature & channel cards
// Each feature card has a bespoke SVG vignette that animates on hover.
// Visuals stay editorial: line-work, champagne ink, slow easing.

// ————————————————————————————————————————————————————————————————
// Feature vignettes — pure SVG, driven by a single `play` boolean.
// Each is 200×160 (card-scaled); stroke = champagne; bg = transparent.
// ————————————————————————————————————————————————————————————————

const V_GOLD = "var(--epa-gold)";
const V_CHAMP = "var(--epa-champagne)";
const V_DARK = "rgba(170,135,87,.28)";

// 1 · Compass — needle rotates slowly, cardinal marks breathe
function VignetteCompass({play}) {
  return (
    <svg viewBox="0 0 200 160" style={{width:"100%", height:"100%", overflow:"visible"}}>
      {/* outer ring */}
      <circle cx="100" cy="80" r="54" fill="none" stroke={V_DARK} strokeWidth="1"/>
      <circle cx="100" cy="80" r="46" fill="none" stroke={V_DARK} strokeWidth=".5"/>
      {/* cardinal ticks */}
      {[0,45,90,135,180,225,270,315].map(a => (
        <line key={a} x1="100" y1="30" x2="100" y2={a%90===0?38:34}
          stroke={a%90===0?V_GOLD:V_DARK} strokeWidth={a%90===0?1:.5}
          transform={`rotate(${a} 100 80)`}/>
      ))}
      {/* N / E / S / W */}
      {[["N",100,22],["E",158,84],["S",100,142],["W",42,84]].map(([l,x,y]) => (
        <text key={l} x={x} y={y} fill={V_GOLD} fontSize="8"
          fontFamily="var(--font-ui)" textAnchor="middle"
          style={{letterSpacing:".15em", opacity:.7}}>{l}</text>
      ))}
      {/* needle — animated */}
      <g style={{
        transformOrigin:"100px 80px",
        transform: play ? "rotate(67deg)" : "rotate(-18deg)",
        transition:"transform 2.4s cubic-bezier(.22,.61,.36,1)"
      }}>
        <polygon points="100,42 96,80 100,80" fill={V_CHAMP}/>
        <polygon points="100,118 104,80 100,80" fill={V_GOLD} opacity=".5"/>
        <circle cx="100" cy="80" r="4" fill={V_CHAMP} stroke="#0B0703" strokeWidth=".8"/>
      </g>
    </svg>
  );
}

// 2 · Gold Standard — three stars fill left→right
function VignetteStar({play}) {
  const starPath = "M0,-14 L4,-4 L14,-4 L6,2 L9,12 L0,6 L-9,12 L-6,2 L-14,-4 L-4,-4 Z";
  return (
    <svg viewBox="0 0 200 160" style={{width:"100%", height:"100%"}}>
      {/* tier labels */}
      <text x="100" y="30" fill={V_GOLD} fontSize="8" fontFamily="var(--font-ui)"
        textAnchor="middle" style={{letterSpacing:".3em"}}>— GOLD STANDARD —</text>
      {[50,100,150].map((x,i) => (
        <g key={i} transform={`translate(${x} 85)`}>
          <circle r="22" fill="none" stroke={V_DARK} strokeWidth=".8"/>
          <path d={starPath} fill="none" stroke={V_GOLD} strokeWidth=".8"/>
          <path d={starPath} fill={V_CHAMP}
            style={{
              opacity: play ? 1 : 0,
              transform: play ? "scale(1)" : "scale(.4)",
              transformOrigin:"center",
              transition:`opacity .5s ease ${i*.18}s, transform .7s cubic-bezier(.34,1.56,.64,1) ${i*.18}s`
            }}/>
        </g>
      ))}
      {/* base line */}
      <line x1="30" y1="130" x2="170" y2="130" stroke={V_DARK} strokeWidth=".5"/>
      <text x="100" y="146" fill={V_GOLD} fontSize="7" fontFamily="var(--font-ui)"
        textAnchor="middle" style={{letterSpacing:".25em", opacity:.7}}>
        LISTED · VALIDATED · GOLD
      </text>
    </svg>
  );
}

// 3 · Insider fiches — open book, lines fade in sequentially
function VignetteBook({play}) {
  return (
    <svg viewBox="0 0 200 160" style={{width:"100%", height:"100%"}}>
      {/* spine */}
      <line x1="100" y1="36" x2="100" y2="130" stroke={V_GOLD} strokeWidth=".8"/>
      {/* pages */}
      <path d="M40,40 Q100,32 100,36 L100,130 Q100,126 40,132 Z"
        fill="none" stroke={V_DARK} strokeWidth="1"/>
      <path d="M160,40 Q100,32 100,36 L100,130 Q100,126 160,132 Z"
        fill="none" stroke={V_DARK} strokeWidth="1"/>
      {/* left page lines */}
      {[52,62,72,82,92,102,112].map((y,i) => (
        <line key={`l${i}`} x1="50" y1={y} x2={94 - (i===0?14:0)} y2={y}
          stroke={i===0?V_CHAMP:V_GOLD}
          strokeWidth={i===0?1:.4}
          style={{
            strokeDasharray: 100,
            strokeDashoffset: play ? 0 : 100,
            opacity: i===0?1:.6,
            transition:`stroke-dashoffset .7s ease ${.1+i*.08}s`
          }}/>
      ))}
      {/* right page lines */}
      {[52,62,72,82,92,102,112].map((y,i) => (
        <line key={`r${i}`} x1="106" y1={y} x2={150 - (i===0?14:0)} y2={y}
          stroke={i===0?V_CHAMP:V_GOLD}
          strokeWidth={i===0?1:.4}
          style={{
            strokeDasharray: 100,
            strokeDashoffset: play ? 0 : 100,
            opacity: i===0?1:.6,
            transition:`stroke-dashoffset .7s ease ${.45+i*.08}s`
          }}/>
      ))}
    </svg>
  );
}

// 4 · Filters — three sliders glide to new positions
function VignetteSliders({play}) {
  const rows = [
    {label:"NOISE", a:.2, b:.55},
    {label:"INTIMACY", a:.75, b:.4},
    {label:"HOUR", a:.45, b:.8},
  ];
  return (
    <svg viewBox="0 0 200 160" style={{width:"100%", height:"100%"}}>
      {rows.map((r,i) => {
        const y = 42 + i*28;
        const x = 40 + (play?r.b:r.a)*120;
        return (
          <g key={r.label}>
            <text x="40" y={y-8} fill={V_GOLD} fontSize="7"
              fontFamily="var(--font-ui)" style={{letterSpacing:".25em", opacity:.7}}>
              {r.label}
            </text>
            <line x1="40" y1={y} x2="160" y2={y} stroke={V_DARK} strokeWidth=".8"/>
            <line x1="40" y1={y} x2={x} y2={y} stroke={V_GOLD} strokeWidth="1"
              style={{transition:"all 1s cubic-bezier(.22,.61,.36,1)"}}/>
            <circle cx={x} cy={y} r="4" fill={V_CHAMP} stroke="#0B0703" strokeWidth=".8"
              style={{transition:"cx 1s cubic-bezier(.22,.61,.36,1)"}}/>
          </g>
        );
      })}
    </svg>
  );
}

// 5 · Concierge channel — phone + ring arcs pulse outward
function VignettePhone({play}) {
  return (
    <svg viewBox="0 0 200 160" style={{width:"100%", height:"100%", overflow:"visible"}}>
      {/* ring arcs */}
      {[0,1,2].map(i => (
        <circle key={i} cx="100" cy="80" r={30 + i*14}
          fill="none" stroke={V_GOLD} strokeWidth=".7"
          style={{
            opacity: play ? 0 : 0,
            animation: play ? `aurum-ring 1.8s ease-out ${i*.35}s infinite` : "none"
          }}/>
      ))}
      {/* handset */}
      <g transform="translate(100 80)">
        <g style={{
          transformOrigin:"center",
          transform: play ? "rotate(-8deg)" : "rotate(0deg)",
          transition:"transform .35s ease"
        }}>
          <path d="M-18,-14 Q-22,-18 -18,-22 L-8,-22 Q-4,-22 -2,-18 L2,-10 Q4,-6 0,-2 L-4,2
                   Q0,10 8,14 L12,10 Q16,6 20,10 L26,14 Q30,16 30,20 L30,30
                   Q30,34 26,34 Q6,34 -12,16 Q-30,-2 -30,-22"
            transform="translate(0 0) scale(.7)"
            fill="none" stroke={V_CHAMP} strokeWidth="1.2" strokeLinejoin="round"/>
        </g>
      </g>
      {/* marque */}
      <text x="100" y="140" fill={V_GOLD} fontSize="7" fontFamily="var(--font-ui)"
        textAnchor="middle" style={{letterSpacing:".3em", opacity:.7}}>
        ATELIER — DAY &amp; NIGHT
      </text>
      <style>{`
        @keyframes aurum-ring {
          0%   { opacity: 0; transform: scale(.6); transform-origin: 100px 80px; }
          20%  { opacity: .8; }
          100% { opacity: 0; transform: scale(1.6); transform-origin: 100px 80px; }
        }
      `}</style>
    </svg>
  );
}

// 6 · City guides — route with three pins, pen draws the path
function VignettePin({play}) {
  const pins = [[50,60],[110,90],[160,50]];
  return (
    <svg viewBox="0 0 200 160" style={{width:"100%", height:"100%"}}>
      {/* grid */}
      {[30,60,90,120].map(y => (
        <line key={y} x1="20" y1={y} x2="180" y2={y} stroke={V_DARK} strokeWidth=".3"/>
      ))}
      {[40,80,120,160].map(x => (
        <line key={x} x1={x} y1="30" x2={x} y2="130" stroke={V_DARK} strokeWidth=".3"/>
      ))}
      {/* route path */}
      <path d={`M${pins[0][0]},${pins[0][1]} Q80,110 ${pins[1][0]},${pins[1][1]} Q140,120 ${pins[2][0]},${pins[2][1]}`}
        fill="none" stroke={V_GOLD} strokeWidth="1"
        strokeDasharray="280"
        style={{
          strokeDashoffset: play ? 0 : 280,
          transition:"stroke-dashoffset 1.4s cubic-bezier(.22,.61,.36,1)"
        }}/>
      {/* pins */}
      {pins.map(([x,y],i) => (
        <g key={i} transform={`translate(${x} ${y})`} style={{
          opacity: play ? 1 : 0,
          transform: `translate(${x}px, ${play?y:y-8}px)`,
          transition:`opacity .4s ease ${.2+i*.4}s, transform .5s cubic-bezier(.34,1.56,.64,1) ${.2+i*.4}s`
        }}>
          <circle r="8" fill="none" stroke={V_CHAMP} strokeWidth="1"/>
          <circle r="3" fill={V_CHAMP}/>
          <text x="0" y="-12" fill={V_GOLD} fontSize="7" fontFamily="var(--font-ui)"
            textAnchor="middle" style={{letterSpacing:".2em"}}>
            {["LUNCH","ATELIER","DINNER"][i]}
          </text>
        </g>
      ))}
    </svg>
  );
}

const VIGNETTES = {
  compass: VignetteCompass,
  star: VignetteStar,
  book: VignetteBook,
  sliders: VignetteSliders,
  phone: VignettePhone,
  pin: VignettePin,
};

// ————————————————————————————————————————————————————————————————
// Feature card — vignette + title + rule + body; tilts on hover
// ————————————————————————————————————————————————————————————————

function FeatureCard({kind, title, body}) {
  const [hover, setHover] = React.useState(false);
  const Vignette = VIGNETTES[kind];
  return (
    <div
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      style={{
        position:"relative",
        background: hover
          ? "linear-gradient(180deg,#1C130B,#0E0905)"
          : "linear-gradient(180deg,#150E07,#0C0804)",
        border: `1px solid ${hover ? "rgba(212,175,125,.45)" : "rgba(170,135,87,.25)"}`,
        padding:"32px 32px 36px",
        boxShadow: hover
          ? "0 28px 60px -18px rgba(0,0,0,.8), 0 1px 0 rgba(212,175,125,.15) inset"
          : "0 20px 40px -16px rgba(0,0,0,.6)",
        transition:"background .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s ease",
        transform: hover ? "translateY(-2px)" : "translateY(0)",
        cursor:"default"
      }}>
      {/* vignette frame */}
      <div style={{
        position:"relative", height:150, marginBottom:24,
        borderTop:"1px solid rgba(170,135,87,.2)",
        borderBottom:"1px solid rgba(170,135,87,.2)",
        background: hover
          ? "radial-gradient(ellipse at 50% 50%, rgba(212,175,125,.06), transparent 70%)"
          : "transparent",
        transition:"background .5s ease"
      }}>
        {/* corner marks */}
        {[[8,8,1,1],[8,8,-1,1],[8,8,1,-1],[8,8,-1,-1]].map(([w,h,sx,sy],i)=>{
          const pos = {
            top: sy>0 ? 6 : "auto", bottom: sy<0 ? 6 : "auto",
            left: sx>0 ? 6 : "auto", right: sx<0 ? 6 : "auto",
          };
          return (
            <div key={i} style={{position:"absolute", ...pos, width:w, height:h,
              borderTop: sy>0 ? "1px solid var(--epa-gold)" : "none",
              borderBottom: sy<0 ? "1px solid var(--epa-gold)" : "none",
              borderLeft: sx>0 ? "1px solid var(--epa-gold)" : "none",
              borderRight: sx<0 ? "1px solid var(--epa-gold)" : "none",
              opacity:.6}}/>
          );
        })}
        <Vignette play={hover}/>
      </div>

      <h3 style={{font:"400 24px/1.15 var(--font-display)",
        letterSpacing:".01em", margin:"0 0 12px",
        color: hover ? "var(--epa-champagne)" : "var(--epa-paper-ivory)",
        transition:"color .4s ease"}}>{title}</h3>
      <div style={{width: hover ? 80 : 36, height:1, background:"var(--epa-gold)",
        margin:"0 0 16px", transition:"width .5s cubic-bezier(.22,.61,.36,1)"}}/>
      <p style={{font:"italic 300 14.5px/1.65 var(--font-editorial)",
        color:"var(--epa-text-secondary)", margin:0}}>{body}</p>
    </div>
  );
}

// ————————————————————————————————————————————————————————————————
// Channel cards — research (search query animates) vs concierge (chat stream)
// ————————————————————————————————————————————————————————————————

function ResearchPreview({play}) {
  const query = "quiet table, paris, tuesday 20:30";
  const typed = play ? query : query.slice(0,6);
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    if (!play) return;
    const id = setInterval(() => setTick(t => t+1), 900);
    return () => clearInterval(id);
  }, [play]);

  return (
    <div style={{
      background:"rgba(10,6,2,.5)",
      border:"1px solid rgba(170,135,87,.25)",
      padding:"16px 18px"}}>
      {/* search row */}
      <div style={{display:"flex", alignItems:"center", gap:10,
        paddingBottom:12, borderBottom:"1px solid rgba(170,135,87,.18)"}}>
        <i data-lucide="search" style={{width:12, height:12, color:"var(--epa-gold)", strokeWidth:1.4}}/>
        <div style={{font:"400 12px/1 var(--font-ui)", color:"var(--epa-champagne)",
          letterSpacing:".06em", flex:1, whiteSpace:"nowrap", overflow:"hidden"}}>
          {typed}
          <span style={{
            display:"inline-block", width:1, height:11, background:"var(--epa-champagne)",
            marginLeft:2, verticalAlign:"middle",
            opacity: Math.floor(Date.now()/500)%2 }}/>
        </div>
        <div style={{font:"500 9px/1 var(--font-ui)", color:"var(--epa-gold)",
          letterSpacing:".25em", opacity:.7}}>PARIS</div>
      </div>
      {/* result rows */}
      {[
        ["Le Petit Lune","7ᵉ · GOLD", "20:30 · last table"],
        ["Table d'Alcide","8ᵉ · VALIDATED", "21:00 · 2 left"],
        ["Hôtel Grenelle · Dining","15ᵉ · GOLD", "20:00 · 19:30"],
      ].map(([n,m,h],i) => (
        <div key={n} style={{
          display:"grid", gridTemplateColumns:"1fr auto", alignItems:"baseline",
          padding:"10px 0", borderBottom: i<2 ? "1px solid rgba(170,135,87,.1)" : "none",
          opacity: play ? 1 : 0.2,
          transform: play ? "translateY(0)" : "translateY(4px)",
          transition:`opacity .4s ease ${.3+i*.15}s, transform .4s ease ${.3+i*.15}s`
        }}>
          <div>
            <div style={{font:"400 13.5px/1.2 var(--font-display)", color:"var(--epa-paper-ivory)",
              letterSpacing:".015em"}}>{n}</div>
            <div style={{font:"500 8.5px/1 var(--font-ui)", color:"var(--epa-gold)",
              letterSpacing:".3em", marginTop:3, opacity:.75}}>{m}</div>
          </div>
          <div style={{font:"italic 300 11px/1 var(--font-editorial)",
            color:"var(--epa-champagne)"}}>{h}</div>
        </div>
      ))}
    </div>
  );
}

function ConciergePreview({play}) {
  const messages = [
    {who:"you", text:"Tuesday, two. Quiet. Near rue Saint-Dominique."},
    {who:"atelier", text:"Bien sûr. Le Petit Lune, 20:30 — corner banquette. Confirmed."},
    {who:"you", text:"And a car from the Bristol."},
    {who:"atelier", text:"20:10, the black one. Chauffeur Thierry. À ce soir."},
  ];
  return (
    <div style={{
      background:"rgba(10,6,2,.5)",
      border:"1px solid rgba(170,135,87,.25)",
      padding:"16px 18px 14px",
      display:"flex", flexDirection:"column", gap:10}}>
      <div style={{display:"flex", alignItems:"center", gap:10, marginBottom:4,
        paddingBottom:10, borderBottom:"1px solid rgba(170,135,87,.18)"}}>
        <div style={{width:18, height:18, borderRadius:"50%",
          background:"linear-gradient(135deg,#D4AF7D,#8B6530)",
          display:"flex", alignItems:"center", justifyContent:"center",
          color:"#0B0703", font:"500 8px/1 var(--font-ui)",
          letterSpacing:".1em"}}>A</div>
        <div style={{font:"500 9px/1 var(--font-ui)", color:"var(--epa-gold)",
          letterSpacing:".3em"}}>ATELIER — LIVE</div>
        <div style={{marginLeft:"auto", display:"flex", gap:4, alignItems:"center"}}>
          <div style={{width:5, height:5, borderRadius:"50%", background:"#8fbf7f",
            boxShadow: play?"0 0 6px #8fbf7f":"none",
            transition:"box-shadow .4s ease"}}/>
          <span style={{font:"500 8px/1 var(--font-ui)", color:"#8fbf7f",
            letterSpacing:".2em"}}>ON LINE</span>
        </div>
      </div>
      {messages.map((m,i) => (
        <div key={i} style={{
          alignSelf: m.who==="you" ? "flex-end" : "flex-start",
          maxWidth:"84%",
          background: m.who==="you"
            ? "rgba(170,135,87,.14)"
            : "linear-gradient(135deg, rgba(212,175,125,.2), rgba(139,101,48,.12))",
          border:"1px solid rgba(170,135,87,.25)",
          padding:"8px 12px",
          font: m.who==="atelier"
            ? "italic 300 12.5px/1.4 var(--font-editorial)"
            : "400 12px/1.4 var(--font-ui)",
          color: m.who==="atelier" ? "var(--epa-champagne)" : "var(--epa-paper-ivory)",
          letterSpacing:".01em",
          opacity: play ? 1 : 0.1,
          transform: play ? "translateY(0)" : "translateY(6px)",
          transition:`opacity .4s ease ${.2+i*.4}s, transform .4s ease ${.2+i*.4}s`
        }}>{m.text}</div>
      ))}
    </div>
  );
}

function ChannelCard({kind, icon, tag, title, body, emphasis}) {
  const [hover, setHover] = React.useState(false);
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });
  const Preview = kind === "research" ? ResearchPreview : ConciergePreview;

  return (
    <div
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      style={{
        background:"linear-gradient(180deg,#18110A,#0D0804)",
        border: emphasis
          ? "1px solid var(--epa-gold-dark)"
          : `1px solid ${hover?"rgba(212,175,125,.45)":"rgba(170,135,87,.25)"}`,
        padding:"44px 40px",
        boxShadow: emphasis
          ? "0 30px 60px -20px rgba(0,0,0,.8), 0 1px 0 rgba(212,175,125,.18) inset"
          : (hover
              ? "0 28px 54px -18px rgba(0,0,0,.7)"
              : "0 22px 40px -16px rgba(0,0,0,.6)"),
        transition:"border-color .4s ease, box-shadow .4s ease, transform .4s ease",
        transform: hover ? "translateY(-2px)" : "translateY(0)",
        cursor:"default"
      }}>
      <div style={{display:"flex", alignItems:"center", gap:14, marginBottom:18}}>
        <div style={{width:40, height:40, borderRadius:"50%",
          border:"1px solid var(--epa-gold-dark)",
          display:"flex", alignItems:"center", justifyContent:"center",
          color:"var(--epa-champagne)"}}>
          <i data-lucide={icon} style={{width:16, height:16, strokeWidth:1.4}}/>
        </div>
        <div style={{font:"500 10px/1.3 var(--font-ui)", color:"var(--epa-gold)",
          letterSpacing:".3em", textTransform:"uppercase"}}>{tag}</div>
      </div>
      <h4 style={{font:"400 32px/1 var(--font-display)",
        letterSpacing:".02em", margin:"0 0 18px"}}>{title}</h4>
      <Arabesque w={54}/>
      <p style={{font:"italic 300 15px/1.65 var(--font-editorial)",
        color:"var(--epa-text-secondary)", margin:"20px 0 22px"}}>{body}</p>

      {/* live preview */}
      <Preview play={hover}/>

      {/* hover hint */}
      <div style={{
        marginTop:14, font:"500 9px/1 var(--font-ui)", color:"var(--epa-gold)",
        letterSpacing:".35em", textTransform:"uppercase",
        opacity: hover ? 0 : .6,
        transition:"opacity .3s ease"
      }}>— Hover to see it in motion</div>
    </div>
  );
}

Object.assign(window, { FeatureCard, ChannelCard });