/* ============================================================
   TECHIYAT — landing page (with hero variations)
   ============================================================ */

function LandingNav({ go, onPersona }){
  return (
    <div style={{position:"sticky", top:0, zIndex:40, background:"rgba(244,243,238,.8)", backdropFilter:"blur(14px)", borderBottom:"1px solid var(--line)"}}>
      <div style={{maxWidth:1200, margin:"0 auto", padding:"15px 30px", display:"flex", alignItems:"center", gap:24}}>
        <div className="row gap10">
          <div className="side-mark" style={{width:36,height:36,background:"var(--pine)"}}><Mark size={21}/></div>
          <div className="col" style={{gap:0,lineHeight:1}}>
            <span className="serif" style={{fontSize:21, fontWeight:600, color:"var(--ink)"}}>Techiyat</span>
          </div>
        </div>
        <nav className="row gap18 grow" style={{marginLeft:18, fontSize:14, fontWeight:500, color:"var(--ink-2)"}}>
          <a className="lnav" onClick={()=>onPersona("founder")}>For founders</a>
          <a className="lnav" onClick={()=>onPersona("buyer")}>For acquirers</a>
          <a className="lnav" onClick={()=>onPersona("investor")}>For investors</a>
          <a className="lnav" onClick={()=>onPersona("ecosystem")}>Ecosystem</a>
          <a className="lnav" onClick={()=>go("trust")}>Trust</a>
        </nav>
        <button className="btn btn-dark btn-sm" onClick={()=>go("dashboard")}>Sign in</button>
      </div>
    </div>
  );
}

/* HERO A — split, with second-life motif */
function HeroSplit({ go }){
  return (
    <div style={{display:"grid", gridTemplateColumns:"1.05fr .95fr", gap:48, alignItems:"center"}}>
      <div className="fadein">
        <h1 className="serif" style={{fontSize:"clamp(36px,4.4vw,58px)", lineHeight:1.04, letterSpacing:"-.02em"}}>
          Give startup IP, talent, and technology a <span style={{color:"var(--moss)", fontStyle:"italic"}}>second life</span>.
        </h1>
        <p style={{fontSize:18, color:"var(--ink-2)", marginTop:20, maxWidth:520, lineHeight:1.55}}>
          Techiyat helps at-risk startups, investors, acquirers, and ecosystem partners preserve valuable
          technology and talent before it disappears.
        </p>
        <div className="row gap10 wrap" style={{marginTop:28}}>
          <button className="btn btn-primary btn-lg" onClick={()=>go("founder")}>Start confidential assessment <Icon name="arrowRight" size={17}/></button>
          <button className="btn btn-ghost btn-lg" onClick={()=>go("opportunities","buyer")}>Browse acquisition opportunities</button>
        </div>
        <div className="row gap18 wrap" style={{marginTop:30, fontSize:13, color:"var(--sage)"}}>
          <span className="row gap6"><Icon name="lock" size={14}/> Confidential by design</span>
          <span className="row gap6"><Icon name="shield" size={14}/> Approval-gated access</span>
          <span className="row gap6"><Icon name="check" size={14}/> Founder-controlled</span>
        </div>
      </div>
      <div className="fadein" style={{position:"relative"}}>
        <SecondLifeArt/>
      </div>
    </div>
  );
}

/* HERO B — centered editorial with Hebrew watermark */
function HeroCentered({ go }){
  return (
    <div style={{textAlign:"center", position:"relative", padding:"10px 0 6px"}}>
      <div className="heb" aria-hidden="true" style={{position:"absolute", inset:0, display:"grid", placeItems:"center",
        fontSize:"clamp(90px,18vw,230px)", color:"var(--paper-sunken)", opacity:.6, pointerEvents:"none", lineHeight:1, zIndex:0}}>תחייה</div>
      <div style={{position:"relative", zIndex:1}} className="fadein">
        <div className="chip amber mb16" style={{margin:"0 auto 18px"}}><span className="chip-dot"/> Preserve what should not disappear</div>
        <h1 className="serif" style={{fontSize:"clamp(38px,5.6vw,72px)", lineHeight:1.02, maxWidth:920, margin:"0 auto", letterSpacing:"-.025em"}}>
          Give startup IP, talent, and technology a <span style={{color:"var(--moss)", fontStyle:"italic"}}>second life</span>.
        </h1>
        <p style={{fontSize:18.5, color:"var(--ink-2)", marginTop:22, maxWidth:600, marginInline:"auto", lineHeight:1.55}}>
          Techiyat helps at-risk startups, investors, acquirers, and ecosystem partners preserve valuable
          technology and talent before it disappears.
        </p>
        <div className="row gap10 wrap" style={{marginTop:30, justifyContent:"center"}}>
          <button className="btn btn-primary btn-lg" onClick={()=>go("founder")}>Start confidential assessment <Icon name="arrowRight" size={17}/></button>
          <button className="btn btn-ghost btn-lg" onClick={()=>go("opportunities","buyer")}>Browse acquisition opportunities</button>
        </div>
      </div>
    </div>
  );
}

/* HERO C — stat-forward */
function HeroStats({ go }){
  const stats = [["240+","companies preserved"],["₪1.9B","IP value kept in-ecosystem"],["1,100+","jobs retained in Israel"],["86%","matched within 60 days"]];
  return (
    <div className="fadein">
      <div style={{maxWidth:840}}>
        <div className="chip amber mb16"><span className="chip-dot"/> Built for the Israeli innovation ecosystem</div>
        <h1 className="serif" style={{fontSize:"clamp(36px,4.8vw,60px)", lineHeight:1.04, letterSpacing:"-.02em"}}>
          Give startup IP, talent, and technology a <span style={{color:"var(--moss)", fontStyle:"italic"}}>second life</span>.
        </h1>
        <p style={{fontSize:18, color:"var(--ink-2)", marginTop:18, maxWidth:560, lineHeight:1.55}}>
          Techiyat helps at-risk startups, investors, acquirers, and ecosystem partners preserve valuable technology and talent before it disappears.
        </p>
        <div className="row gap10 wrap" style={{marginTop:26}}>
          <button className="btn btn-primary btn-lg" onClick={()=>go("founder")}>Start confidential assessment <Icon name="arrowRight" size={17}/></button>
          <button className="btn btn-ghost btn-lg" onClick={()=>go("opportunities","buyer")}>Browse acquisition opportunities</button>
        </div>
      </div>
      <div className="grid g4" style={{marginTop:42, gap:0, border:"1px solid var(--line)", borderRadius:"var(--radius)", overflow:"hidden", background:"var(--paper-card)"}}>
        {stats.map((s,i)=>(
          <div key={i} className="stat" style={{padding:"22px 24px", borderRight:i<3?"1px solid var(--line)":"none"}}>
            <span className="sv" style={{color:"var(--pine)"}}>{s[0]}</span>
            <span className="sl">{s[1]}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* abstract "second life" art: concentric rings + sprout */
function SecondLifeArt(){
  return (
    <div style={{aspectRatio:"1/1", maxWidth:440, marginLeft:"auto", position:"relative",
      background:"radial-gradient(circle at 50% 46%, #fff, var(--paper-raised) 60%, var(--paper-sunken))",
      border:"1px solid var(--line)", borderRadius:"50%", boxShadow:"var(--shadow)", overflow:"hidden"}}>
      <svg viewBox="0 0 400 400" style={{position:"absolute", inset:0, width:"100%", height:"100%"}}>
        {[150,120,90,60].map((r,i)=>(
          <circle key={i} cx="200" cy="200" r={r} fill="none" stroke={i%2? "var(--line-2)":"var(--amber-line)"} strokeWidth={i===3?0:1} strokeDasharray={i===2? "2 7":"none"} opacity={.9-i*.12}/>
        ))}
        <circle cx="200" cy="200" r="58" fill="var(--pine)"/>
        <g stroke="#fff" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round" fill="none">
          <path d="M200 232V184"/>
          <path d="M200 196c0-13-9-20-22-20 0 13 9 20 22 20z"/>
          <path d="M200 206c0-11 9-17 21-17 0 11-9 17-21 17z"/>
        </g>
      </svg>
      <div className="heb" style={{position:"absolute", bottom:24, left:0, right:0, textAlign:"center", fontSize:15, color:"var(--sage)"}}>
        תחיית המתים · resurrection
      </div>
    </div>
  );
}

const AUDIENCES = [
  { id:"founder", icon:"user", t:"For founders", to:["founder"],
    d:"Confidentially explore IP sale, licensing, acqui-hire, merger, or a dignified soft landing — on your terms.", cta:"Start assessment" },
  { id:"buyer", icon:"building", t:"For acquirers", to:["opportunities","buyer"],
    d:"Discover anonymized, verified opportunities: patents, datasets, products, and teams in your target domains.", cta:"Browse opportunities" },
  { id:"investor", icon:"trend", t:"For investors", to:["portfolio","investor"],
    d:"See portfolio runway risk early and pursue structured outcomes instead of letting value quietly disappear.", cta:"View portfolio risk" },
  { id:"ecosystem", icon:"globe", t:"For ecosystem partners", to:["ecosystem","ecosystem"],
    d:"Surface grant-backed companies before assets vanish. Preserve Israeli IP and talent at the ecosystem level.", cta:"Open ecosystem view" }
];

const JOURNEY = [
  { n:"01", t:"Confidential assessment", d:"A founder privately submits company, asset, and runway details. Nothing is public." },
  { n:"02", t:"Readiness score", d:"Techiyat scores preservation potential and recommends next steps — never a failure grade." },
  { n:"03", t:"Anonymous listing", d:"The agent drafts a buyer-facing listing. The founder approves before anything is shared." },
  { n:"04", t:"Matched & preserved", d:"Verified buyers request founder-approved access. IP, data, and teams find a second home in Israel." }
];

const PERSONA_INFO = {
  founder: { icon:"user", title:"For founders", verb:"founder",
    tagline:"Confidentially explore a dignified second life for your company — on your terms.",
    gets:[
      ["heart","A Readiness Score for preservation potential"],
      ["spark","An anonymous, founder-approved listing"],
      ["eye","See which verified buyers are watching"],
      ["shield","Full control of what's visible, and when"]
    ] },
  buyer: { icon:"building", title:"For acquirers", verb:"buyer",
    tagline:"Discover anonymized, verified second-life opportunities in your target domains.",
    gets:[
      ["link","Opportunities ranked by strategic fit"],
      ["eyeOff","An anonymized, approval-gated marketplace"],
      ["layers","A deal pipeline from watchlist to close"],
      ["target","Patents, datasets, products, and teams"]
    ] },
  investor: { icon:"trend", title:"For investors", verb:"investor",
    tagline:"Catch runway risk early and pursue structured outcomes before value disappears.",
    gets:[
      ["pulse","Portfolio early-warning & soft-landing cues"],
      ["radar","Signal Radar detection, months early"],
      ["heart","Preserve IP and talent, protect founders"],
      ["handshake","Structured outcomes, not quiet write-offs"]
    ] },
  ecosystem: { icon:"globe", title:"For ecosystem partners", verb:"ecosystem",
    tagline:"Preserve Israeli IP, data, and talent at the level of the whole ecosystem.",
    gets:[
      ["layers","At-risk & preservation metrics by sector"],
      ["file","Grant reporting & obligation tracking"],
      ["users","A talent-retention pipeline inside Israel"],
      ["eyeOff","Aggregate, anonymized market signal"]
    ] }
};

function PersonaModal({ info, onClose, go }){
  if(!info) return null;
  const d = PERSONA_INFO[info];
  return (
    <Modal open={!!info} onClose={onClose} icon={d.icon} title={d.title}
      footer={<>
        <button className="btn btn-ghost" onClick={onClose}>Maybe later</button>
        <button className="btn btn-primary" onClick={()=>{ onClose(); go("dashboard", info); }}>Sign in <Icon name="arrowRight" size={15}/></button>
      </>}>
      <p style={{fontSize:15.5, color:"var(--ink)", lineHeight:1.5, marginBottom:18}}>{d.tagline}</p>
      <div className="eyebrow mb12">What Techiyat gives you</div>
      <div className="col gap12">
        {d.gets.map(([ic,t])=>(
          <div key={t} className="row gap12" style={{alignItems:"center"}}>
            <div className="side-mark" style={{width:34,height:34,background:"var(--paper-sunken)",boxShadow:"none",border:"1px solid var(--line)",flex:"none"}}><Icon name={ic} size={16} style={{color:"var(--pine)"}}/></div>
            <span style={{fontSize:13.5, color:"var(--ink-2)", whiteSpace:"nowrap"}}>{t}</span>
          </div>
        ))}
      </div>
      <div className="row gap8 mt16" style={{padding:"11px 13px", background:"var(--paper-raised)", border:"1px solid var(--line)", borderRadius:10}}>
        <Icon name="lock" size={14} style={{color:"var(--moss)", flex:"none"}}/>
        <span style={{fontSize:12.5, color:"var(--sage)"}}>Confidential by design · nothing is shared without your approval.</span>
      </div>
    </Modal>
  );
}

function Landing({ go, variant, setVariant }){
  const [info,setInfo] = useState(null);
  const Hero = variant==="centered"? HeroCentered : variant==="stats"? HeroStats : HeroSplit;
  return (
    <div style={{background:"var(--paper)", minHeight:"100vh"}}>
      <LandingNav go={go} onPersona={setInfo}/>
      <PersonaModal info={info} onClose={()=>setInfo(null)} go={go}/>

      {/* variant toggle */}
      <div style={{position:"fixed", right:18, bottom:18, zIndex:60, display:"flex", gap:4, background:"var(--paper-card)",
        border:"1px solid var(--line-2)", borderRadius:24, padding:4, boxShadow:"var(--shadow)"}}>
        {[["split","Split"],["centered","Editorial"],["stats","Stats"]].map(([k,l])=>(
          <button key={k} className="btn btn-sm" onClick={()=>setVariant(k)}
            style={{borderRadius:20, padding:"6px 13px", background: variant===k? "var(--pine)":"transparent", color: variant===k? "#fff":"var(--sage)", fontSize:12.5}}>{l}</button>
        ))}
      </div>

      <section style={{maxWidth:1200, margin:"0 auto", padding:"64px 30px 56px"}}>
        <Hero go={go}/>
      </section>

      {/* trust strip */}
      <section style={{borderBlock:"1px solid var(--line)", background:"var(--paper-raised)"}}>
        <div style={{maxWidth:1200, margin:"0 auto", padding:"20px 30px", display:"flex", gap:18, alignItems:"center", flexWrap:"wrap"}}>
          <span className="eyebrow">Confidential by design</span>
          <div className="row gap18 grow wrap" style={{fontSize:13.5, color:"var(--ink-2)", fontWeight:500}}>
            <span className="row gap6"><Icon name="eyeOff" size={15} style={{color:"var(--moss)"}}/> Anonymous listings</span>
            <span className="row gap6"><Icon name="lock" size={15} style={{color:"var(--moss)"}}/> Approval-gated profiles</span>
            <span className="row gap6"><Icon name="users" size={15} style={{color:"var(--moss)"}}/> Verified buyer network</span>
            <span className="row gap6"><Icon name="check" size={15} style={{color:"var(--moss)"}}/> Founder approval before intros</span>
            <span className="row gap6"><Icon name="file" size={15} style={{color:"var(--moss)"}}/> Full audit log</span>
          </div>
        </div>
      </section>

      {/* audiences */}
      <section style={{maxWidth:1200, margin:"0 auto", padding:"64px 30px 20px"}}>
        <div className="eyebrow mb12">One platform · four roles</div>
        <div className="grid g4 stagger" style={{marginTop:18}}>
          {AUDIENCES.map(a=>(
            <div key={a.id} className="card card-hover card-pad col" style={{gap:14}} onClick={()=>setInfo(a.id)}>
              <div className="side-mark" style={{width:42,height:42,background:"var(--paper-sunken)", boxShadow:"none", border:"1px solid var(--line)"}}>
                <Icon name={a.icon} size={20} style={{color:"var(--pine)"}}/>
              </div>
              <h3 className="serif" style={{fontSize:19}}>{a.t}</h3>
              <p style={{fontSize:14, color:"var(--ink-2)", lineHeight:1.5, flex:1}}>{a.d}</p>
              <span className="row gap6" style={{fontSize:13.5, fontWeight:600, color:"var(--moss)"}}>See what you get <Icon name="arrowRight" size={15}/></span>
            </div>
          ))}
        </div>
      </section>

      {/* journey: from shutdown to second life */}
      <section style={{maxWidth:1200, margin:"0 auto", padding:"56px 30px"}}>
        <div className="card" style={{overflow:"hidden"}}>
          <div className="card-pad" style={{padding:"28px 30px", borderBottom:"1px solid var(--line)"}}>
            <div className="eyebrow mb8">From shutdown to second life</div>
            <h2 className="serif" style={{fontSize:28}}>A dignified path, not a fire sale.</h2>
          </div>
          <div className="grid g4" style={{gap:0}}>
            {JOURNEY.map((j,i)=>(
              <div key={j.n} style={{padding:"26px 26px", borderRight:i<3?"1px solid var(--line)":"none"}}>
                <div className="mono" style={{fontSize:13, color:"var(--amber)", fontWeight:600}}>{j.n}</div>
                <h3 style={{fontSize:16.5, marginTop:10}}>{j.t}</h3>
                <p style={{fontSize:13.5, color:"var(--sage)", marginTop:8, lineHeight:1.5}}>{j.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* brand story */}
      <section style={{background:"var(--pine)", color:"var(--on-pine)"}}>
        <div style={{maxWidth:1200, margin:"0 auto", padding:"68px 30px", display:"grid", gridTemplateColumns:"1fr 1fr", gap:48, alignItems:"center"}}>
          <div>
            <div className="eyebrow mb16" style={{color:"var(--amber-2)"}}>Why Techiyat?</div>
            <div className="heb" style={{fontSize:52, color:"#fff", lineHeight:1.1, marginBottom:14}}>תחיית המתים</div>
            <p style={{fontSize:18, lineHeight:1.6, color:"rgba(238,243,239,.86)", maxWidth:520}}>
              Techiyat is inspired by the Hebrew phrase <em>Techiyat HaMeitim</em> — “resurrection of the dead.”
              For the Israeli tech ecosystem, it means that valuable IP, data, products, patents, and teams should
              not vanish just because a company could not continue independently.
            </p>
            <p style={{fontSize:15, lineHeight:1.6, color:"rgba(238,243,239,.6)", maxWidth:520, marginTop:16}}>
              Not a graveyard for failed companies. A preservation layer for second chances — keeping talent and
              technology inside Israel.
            </p>
          </div>
          <div className="grid g2" style={{gap:14}}>
            {[["The resurrection layer for startup IP.","leaf"],["Give valuable technology a second life.","sprout"],
              ["Preserve what should not disappear.","shield"],["Soft landings for IP, teams, and technology.","heart"]].map(([t,ic],i)=>(
              <div key={i} className="col" style={{gap:12, padding:"22px 20px", background:"rgba(255,255,255,.05)", border:"1px solid rgba(255,255,255,.1)", borderRadius:14}}>
                <Icon name={ic} size={22} style={{color:"var(--amber-2)"}}/>
                <span className="serif" style={{fontSize:18, color:"#fff", lineHeight:1.25}}>{t}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* israeli ecosystem */}
      <section style={{maxWidth:1200, margin:"0 auto", padding:"64px 30px"}}>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:48, alignItems:"center"}}>
          <div>
            <div className="eyebrow mb12">Built for the Israeli innovation ecosystem</div>
            <h2 className="serif" style={{fontSize:32, lineHeight:1.1}}>Designed with founders, VCs, corporates, and the Innovation Authority.</h2>
            <p style={{fontSize:15.5, color:"var(--ink-2)", marginTop:16, lineHeight:1.6, maxWidth:480}}>
              Lightweight, founder-controlled reporting that surfaces companies early enough to act — so IP can be
              licensed, teams retained, buyers matched, and grant-backed innovation continued in a new home.
            </p>
            <div className="row gap10 wrap" style={{marginTop:22}}>
              <span className="tag">Diagnostics</span><span className="tag">Cybersecurity</span><span className="tag">AI infra</span>
              <span className="tag">Medical imaging</span><span className="tag">Agritech</span><span className="tag">Fintech</span>
              <span className="tag">Defense tech</span><span className="tag">Robotics</span><span className="tag">Climate</span>
            </div>
          </div>
          <div className="card card-pad" style={{background:"var(--paper-raised)"}}>
            <div className="eyebrow mb16">Live ecosystem signal</div>
            <div className="col gap14">
              {window.TZ.ECO.sectors.slice(0,4).map(s=>(
                <div key={s.name}>
                  <div className="row between" style={{marginBottom:6}}>
                    <span style={{fontSize:13.5, fontWeight:500, color:"var(--ink)"}}>{s.name}</span>
                    <span className="mono" style={{fontSize:12, color:"var(--sage)"}}>{s.atRisk} at-risk · {s.preserved} preserved</span>
                  </div>
                  <Meter value={Math.round(s.preserved/s.atRisk*100)} tone="amber" thin/>
                </div>
              ))}
            </div>
            <button className="btn btn-ghost btn-block mt24" onClick={()=>go("ecosystem","ecosystem")}>Open ecosystem view <Icon name="arrowRight" size={15}/></button>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{maxWidth:1200, margin:"0 auto", padding:"20px 30px 72px"}}>
        <div className="card" style={{textAlign:"center", padding:"56px 30px", background:"radial-gradient(circle at 50% 0%, var(--paper-raised), var(--paper-card))"}}>
          <div className="heb" style={{fontSize:22, color:"var(--amber)", marginBottom:14}}>תחיית המתים</div>
          <h2 className="serif" style={{fontSize:"clamp(28px,3.6vw,42px)", maxWidth:860, margin:"0 auto", lineHeight:1.08}}>
            Preserve what should not disappear.
          </h2>
          <p style={{fontSize:16.5, color:"var(--ink-2)", marginTop:16, maxWidth:460, marginInline:"auto", textWrap:"balance"}}>
            Start a confidential assessment today. Nothing is shared without your approval.
          </p>
          <div className="row gap10 wrap" style={{justifyContent:"center", marginTop:26}}>
            <button className="btn btn-primary btn-lg" onClick={()=>go("founder")}>Start here <Icon name="arrowRight" size={17}/></button>
          </div>
        </div>
      </section>

      <footer style={{borderTop:"1px solid var(--line)", background:"var(--paper-raised)"}}>
        <div style={{maxWidth:1200, margin:"0 auto", padding:"30px", display:"flex", gap:18, alignItems:"center", flexWrap:"wrap"}}>
          <div className="row gap10">
            <div className="side-mark" style={{width:30,height:30,background:"var(--pine)"}}><Mark size={18}/></div>
            <span className="serif" style={{fontSize:17, fontWeight:600, color:"var(--ink)"}}>Techiyat</span>
            <span className="heb muted" style={{fontSize:14}}>· תחיית המתים</span>
          </div>
          <span className="grow muted" style={{fontSize:13}}>The confidential resurrection layer for startup IP, talent, and technology.</span>
          <span className="muted" style={{fontSize:12.5}}>Confidential by design · Tel Aviv · Be'er Sheva</span>
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { Landing });