/* ============================================================
   Mini-site renderer — produces a tiny preview of a site
   based on a business name + layout type. All inline SVG/CSS.
   ============================================================ */

const { useMemo } = React;

function MiniSite({ name = "Your Business", layout = "diner", palette }) {
  const initials = useMemo(() => {
    const parts = (name || "Y").trim().split(/\s+/).slice(0,2);
    return parts.map(p => p[0]?.toUpperCase()).join("") || "·";
  }, [name]);

  const p = palette || { bg: "#F4E1B8", ink: "#1F1A14", accent: "#C2410C", soft: "#FFF6E0" };

  const wrapStyle = {
    width: "100%", height: "100%",
    background: p.bg, color: p.ink,
    fontFamily: "'Bricolage Grotesque', system-ui, sans-serif",
    fontWeight: 700,
    position: "relative",
    overflow: "hidden",
    display: "flex", flexDirection: "column",
  };

  const navBar = (
    <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", padding:"10px 14px", fontSize:9, letterSpacing:".15em", textTransform:"uppercase", borderBottom:`1px solid ${p.ink}22`}}>
      <div style={{display:"flex", alignItems:"center", gap:6}}>
        <div style={{width:18, height:18, background: p.accent, borderRadius:4, color:p.bg, display:"grid", placeItems:"center", fontSize:9, fontWeight:800}}>{initials}</div>
        <span style={{fontSize:11, fontWeight:800}}>{name}</span>
      </div>
      <div style={{display:"flex", gap:10, opacity:.6, fontSize:8}}>
        <span>Menu</span><span>About</span><span>Visit</span>
      </div>
    </div>
  );

  if (layout === "diner" || layout === "cafe") {
    return (
      <div style={wrapStyle}>
        {navBar}
        <div style={{flex:1, display:"grid", gridTemplateColumns:"1.2fr 1fr", gap:8, padding:"14px"}}>
          <div style={{display:"flex", flexDirection:"column", justifyContent:"space-between"}}>
            <div>
              <div style={{fontSize:8, letterSpacing:".2em", textTransform:"uppercase", color:p.accent, fontFamily:"'JetBrains Mono', monospace", marginBottom:6}}>SINCE 2014 • OPEN DAILY</div>
              <div style={{fontSize:28, lineHeight:.95, letterSpacing:"-0.02em", fontWeight:800}}>
                Honest food, <em style={{fontFamily:"Fraunces, serif", fontStyle:"italic", fontWeight:400, color:p.accent}}>fair</em> prices.
              </div>
              <div style={{fontSize:9, marginTop:8, opacity:.7, lineHeight:1.4}}>Family-run since '14. Counter seats and pies that travel.</div>
            </div>
            <div style={{display:"flex", gap:6}}>
              <div style={{background:p.ink, color:p.bg, padding:"6px 10px", borderRadius:99, fontSize:9}}>See menu →</div>
              <div style={{border:`1px solid ${p.ink}`, padding:"6px 10px", borderRadius:99, fontSize:9}}>Visit us</div>
            </div>
          </div>
          <div style={{background:p.accent, borderRadius:8, position:"relative", overflow:"hidden"}}>
            <svg viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
              <circle cx="50" cy="55" r="32" fill={p.soft} />
              <circle cx="50" cy="55" r="22" fill={p.bg} />
              <circle cx="50" cy="55" r="12" fill={p.accent} />
              <text x="50" y="20" textAnchor="middle" fontSize="8" fill={p.bg} fontFamily="Fraunces, serif" fontStyle="italic">today's special</text>
            </svg>
          </div>
        </div>
      </div>
    );
  }

  if (layout === "service") {
    return (
      <div style={{...wrapStyle, background:p.bg, color:p.ink}}>
        <div style={{padding:"10px 14px", display:"flex", justifyContent:"space-between", alignItems:"center", borderBottom:`1px solid ${p.ink}33`}}>
          <div style={{display:"flex", alignItems:"center", gap:6}}>
            <div style={{width:18, height:18, background: p.accent, borderRadius:4, color:p.bg, display:"grid", placeItems:"center", fontSize:9, fontWeight:800}}>{initials}</div>
            <span style={{fontSize:11, fontWeight:800, color:p.ink}}>{name}</span>
          </div>
          <div style={{background:p.accent, color:"#000", padding:"4px 10px", borderRadius:4, fontSize:9, fontWeight:700}}>(555) 010-2255</div>
        </div>
        <div style={{flex:1, padding:"18px 14px", display:"flex", flexDirection:"column", justifyContent:"space-between"}}>
          <div>
            <div style={{fontSize:8, letterSpacing:".2em", textTransform:"uppercase", color:p.accent, fontFamily:"monospace", marginBottom:6}}>24 / 7 EMERGENCY</div>
            <div style={{fontSize:30, lineHeight:.92, fontWeight:800, letterSpacing:"-0.02em"}}>
              Fixed right.<br/><span style={{color:p.accent}}>First time.</span>
            </div>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:6}}>
            {["Repair","Install","Maintain"].map(s => (
              <div key={s} style={{background:p.soft, color:p.ink, padding:"8px 6px", borderRadius:4, fontSize:9, textAlign:"center", border:`1px solid ${p.ink}33`}}>{s}</div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (layout === "boutique") {
    return (
      <div style={wrapStyle}>
        {navBar}
        <div style={{flex:1, padding:"16px", display:"flex", flexDirection:"column", gap:10}}>
          <div style={{fontSize:32, lineHeight:.9, letterSpacing:"-0.03em", fontFamily:"Fraunces, serif", fontWeight:400, fontStyle:"italic"}}>
            Hand-tied,<br/>fresh weekly.
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:6, flex:1}}>
            {[1,2,3].map(i => (
              <div key={i} style={{background:p.soft, borderRadius:6, position:"relative", overflow:"hidden"}}>
                <svg viewBox="0 0 40 40" width="100%" height="100%">
                  <circle cx={20} cy={22} r={10-i} fill={p.accent} opacity={.3 + i*.2}/>
                  <circle cx={14+i*2} cy={18} r={3} fill={p.accent}/>
                  <circle cx={26-i*2} cy={26} r={2.5} fill={p.accent} opacity={.7}/>
                </svg>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (layout === "barber") {
    return (
      <div style={wrapStyle}>
        <div style={{padding:"10px 14px", display:"flex", justifyContent:"space-between", alignItems:"center", borderBottom:`1px solid ${p.soft}`}}>
          <div style={{display:"flex", alignItems:"center", gap:6}}>
            <div style={{width:18, height:18, background: p.accent, borderRadius:4, color:p.ink, display:"grid", placeItems:"center", fontSize:9, fontWeight:800}}>{initials}</div>
            <span style={{fontSize:11, fontWeight:800}}>{name}</span>
          </div>
          <div style={{fontSize:9, opacity:.6}}>Tue–Sat</div>
        </div>
        <div style={{flex:1, padding:"18px 14px", display:"flex", flexDirection:"column", justifyContent:"space-between"}}>
          <div style={{fontSize:32, lineHeight:.9, letterSpacing:"-0.03em", fontWeight:800}}>
            Walk in.<br/><span style={{color:p.accent, fontFamily:"Fraunces, serif", fontStyle:"italic", fontWeight:400}}>Walk out sharp.</span>
          </div>
          <div style={{display:"flex", gap:6}}>
            <div style={{background:p.accent, color:p.ink, padding:"7px 12px", borderRadius:99, fontSize:10, fontWeight:700}}>Book a chair</div>
            <div style={{border:`1px solid ${p.soft}`, padding:"7px 12px", borderRadius:99, fontSize:10}}>Pricing</div>
          </div>
        </div>
      </div>
    );
  }

  if (layout === "wellness") {
    return (
      <div style={wrapStyle}>
        {navBar}
        <div style={{flex:1, padding:"16px", display:"grid", gridTemplateColumns:"1.3fr 1fr", gap:10}}>
          <div style={{display:"flex", flexDirection:"column", justifyContent:"space-between"}}>
            <div style={{fontSize:26, lineHeight:.95, letterSpacing:"-0.02em", fontFamily:"Fraunces, serif", fontWeight:400, fontStyle:"italic"}}>
              A practice<br/>worth keeping.
            </div>
            <div style={{display:"grid", gap:4}}>
              {["Mon · Vinyasa · 7am","Tue · Restore · 6pm","Wed · Slow Flow · 9am"].map(s => (
                <div key={s} style={{fontSize:8, fontFamily:"monospace", padding:"4px 6px", borderTop:`1px solid ${p.ink}22`, display:"flex", justifyContent:"space-between"}}>
                  <span>{s}</span><span style={{color:p.accent}}>book</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{background:p.accent, borderRadius:10, position:"relative"}}>
            <svg viewBox="0 0 80 100" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
              <circle cx="40" cy="50" r="22" fill="none" stroke={p.soft} strokeWidth="2"/>
              <circle cx="40" cy="50" r="14" fill="none" stroke={p.soft} strokeWidth="2"/>
              <circle cx="40" cy="50" r="6" fill={p.soft}/>
            </svg>
          </div>
        </div>
      </div>
    );
  }

  if (layout === "trading") {
    return (
      <div style={{...wrapStyle, fontFamily:"'JetBrains Mono', monospace"}}>
        <div style={{padding:"10px 14px", display:"flex", justifyContent:"space-between", alignItems:"center", borderBottom:`1px solid ${p.soft}`}}>
          <div style={{display:"flex", alignItems:"center", gap:6}}>
            <div style={{width:18, height:18, background: p.accent, borderRadius:4, color:p.bg, display:"grid", placeItems:"center", fontSize:9, fontWeight:800}}>{initials}</div>
            <span style={{fontSize:11, fontWeight:800, fontFamily:"'Bricolage Grotesque', sans-serif"}}>{name}</span>
          </div>
          <div style={{fontSize:9, color:p.accent}}>● LIVE · NYSE OPEN</div>
        </div>
        <div style={{flex:1, padding:"14px", display:"grid", gridTemplateColumns:"1.4fr 1fr", gap:10}}>
          <div style={{display:"flex", flexDirection:"column", justifyContent:"space-between"}}>
            <div>
              <div style={{fontSize:8, color:p.accent, letterSpacing:".15em", marginBottom:4}}>DAILY BRIEF · 06:00 AM</div>
              <div style={{fontSize:24, lineHeight:.95, letterSpacing:"-0.02em", fontWeight:800, fontFamily:"'Bricolage Grotesque', sans-serif"}}>
                Read it before<br/><span style={{color:p.accent}}>the bell rings.</span>
              </div>
            </div>
            <div style={{background:p.accent, color:"#000", padding:"7px 12px", borderRadius:4, fontSize:10, fontWeight:700, fontFamily:"'Bricolage Grotesque', sans-serif", alignSelf:"start"}}>Subscribe →</div>
          </div>
          <div style={{background:p.soft, borderRadius:6, padding:8, display:"flex", flexDirection:"column", gap:4}}>
            {[{s:"SPY",v:"+0.42%",up:true},{s:"QQQ",v:"+0.81%",up:true},{s:"NVDA",v:"-1.20%",up:false},{s:"BTC",v:"+2.15%",up:true}].map(t => (
              <div key={t.s} style={{display:"flex", justifyContent:"space-between", fontSize:9, padding:"3px 0", borderBottom:`1px dashed ${p.ink}22`}}>
                <span style={{fontWeight:700}}>{t.s}</span>
                <span style={{color: t.up ? p.accent : "#E11D48"}}>{t.v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  // default
  return <div style={wrapStyle}>{navBar}<div style={{padding:16, fontSize:24}}>{name}</div></div>;
}

window.MiniSite = MiniSite;