import React, { useMemo, useState } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";

const initialCriteria = [
  { id: 1, name: "Price", weight: 30, a: 8, b: 6, c: 5 },
  { id: 2, name: "Quality", weight: 30, a: 7, b: 8, c: 9 },
  { id: 3, name: "Ease of use", weight: 20, a: 9, b: 7, c: 8 },
  { id: 4, name: "Long-term value", weight: 20, a: 7, b: 8, c: 9 }
];

function normalize(items) {
  const total = items.reduce((s, x) => s + x.weight, 0) || 1;
  return items.map(x => ({ ...x, weight: x.weight * 100 / total }));
}

function score(criteria, key) {
  return criteria.reduce((sum, c) => sum + c.weight * c[key] / 10, 0);
}

function Matrix() {
  const [options, setOptions] = useState(["Option A", "Option B", "Option C"]);
  const [criteria, setCriteria] = useState(initialCriteria);

  const normalized = useMemo(() => normalize(criteria), [criteria]);
  const scores = ["a","b","c"].map(k => score(normalized, k));
  const winner = scores.indexOf(Math.max(...scores));

  const updateWeight = (id, value) => {
    setCriteria(criteria.map(c => c.id === id ? { ...c, weight: Number(value) } : c));
  };
  const updateScore = (id, key, value) => {
    setCriteria(criteria.map(c => c.id === id ? { ...c, [key]: Number(value) } : c));
  };
  const addCriterion = () => {
    const id = Date.now();
    setCriteria([...criteria, { id, name: "New criterion", weight: 10, a: 5, b: 5, c: 5 }]);
  };

  return <section className="tool-card">
    <div className="tool-head">
      <div>
        <span className="eyebrow">INTERACTIVE TOOL</span>
        <h2>Decision Matrix</h2>
        <p>Give each criterion a weight, rate your options, and let Zekelo calculate the weighted result.</p>
      </div>
      <div className="winner">Best match <strong>{options[winner]}</strong></div>
    </div>

    <div className="matrix-wrap">
      <table className="matrix">
        <thead><tr>
          <th>Criterion</th><th>Weight</th><th>{options[0]}</th><th>{options[1]}</th><th>{options[2]}</th>
        </tr></thead>
        <tbody>
          {criteria.map(c => <tr key={c.id}>
            <td><input value={c.name} onChange={e => setCriteria(criteria.map(x => x.id===c.id ? {...x,name:e.target.value}:x))}/></td>
            <td><input className="num" type="number" min="0" max="100" value={c.weight} onChange={e=>updateWeight(c.id,e.target.value)}/>%</td>
            {["a","b","c"].map(k => <td key={k}><input className="score" type="number" min="0" max="10" value={c[k]} onChange={e=>updateScore(c.id,k,e.target.value)}/>/10</td>)}
          </tr>)}
        </tbody>
      </table>
    </div>

    <div className="result-grid">
      {scores.map((s,i) => <div className={"score-card "+(i===winner?"active":"")} key={i}>
        <span>{options[i]}</span><strong>{s.toFixed(1)}</strong><div className="bar"><i style={{width:`${Math.min(100,s*10)}%`}}/></div>
      </div>)}
    </div>
    <button className="secondary" onClick={addCriterion}>+ Add criterion</button>
  </section>;
}

function Sensitivity() {
  const [priceWeight, setPriceWeight] = useState(30);
  const [qualityWeight, setQualityWeight] = useState(40);
  const [easeWeight, setEaseWeight] = useState(30);
  const total = priceWeight + qualityWeight + easeWeight;
  const p = priceWeight/total, q=qualityWeight/total, e=easeWeight/total;
  const a = p*8 + q*7 + e*9;
  const b = p*6 + q*8 + e*7;
  const c = p*5 + q*9 + e*8;
  const scores=[a,b,c], winner=scores.indexOf(Math.max(...scores));
  return <section className="tool-card dark">
    <div className="tool-head">
      <div>
        <span className="eyebrow">SIGNATURE FEATURE</span>
        <h2>Decision Sensitivity</h2>
        <p>Drag the weights and watch the winner change. This is where a static comparison becomes a decision you can explore.</p>
      </div>
      <div className="winner dark-winner">Current winner <strong>Option {String.fromCharCode(65+winner)}</strong></div>
    </div>
    <div className="sensitivity">
      {[["Price",priceWeight,setPriceWeight],["Quality",qualityWeight,setQualityWeight],["Ease of use",easeWeight,setEaseWeight]].map(([label,val,setter])=>
        <label className="slider-row" key={label}><span>{label}<b>{Math.round(val/total*100)}%</b></span><input type="range" min="0" max="100" value={val} onChange={e=>setter(+e.target.value)}/></label>
      )}
    </div>
    <div className="big-chart">
      {[a,b,c].map((v,i)=><div className={"chart-col "+(i===winner?"selected":"")} key={i}><div className="column" style={{height:`${v*9}%`}}></div><strong>{v.toFixed(1)}</strong><span>Option {String.fromCharCode(65+i)}</span></div>)}
    </div>
    <div className="insight">Your current weights favor <strong>Option {String.fromCharCode(65+winner)}</strong>. Change a weight above to explore where the decision flips.</div>
  </section>
}

function App() {
  const [tool, setTool] = useState("matrix");
  return <div>
    <header className="nav">
      <a className="brand" href="#"><span className="brand-mark">Z</span>zekelo</a>
      <nav><a href="#tools">Tools</a><a href="#how">How it works</a><a href="#about">About</a></nav>
      <a className="nav-cta" href="#tools">Try a tool <span>↗</span></a>
    </header>

    <main>
      <section className="hero">
        <div className="hero-copy">
          <span className="eyebrow">VISUAL DECISION TOOLS</span>
          <h1>Make decisions<br/><em>you can see.</em></h1>
          <p>Compare options, explore trade-offs, and understand what actually changes your decision — with interactive tools built for real choices.</p>
          <div className="hero-actions"><a href="#tools" className="primary">Explore the tools <span>↓</span></a><a href="#how" className="text-link">Why Zekelo?</a></div>
        </div>
        <div className="hero-visual">
          <div className="orb orb-a"></div><div className="orb orb-b"></div>
          <div className="decision-card">
            <div className="mini-top"><span>YOUR DECISION</span><span>LIVE</span></div>
            <h3>Which option fits best?</h3>
            <div className="mini-row"><span>Option A</span><b>8.4</b><i style={{width:"84%"}}/></div>
            <div className="mini-row"><span>Option B</span><b>7.8</b><i style={{width:"78%"}}/></div>
            <div className="mini-row"><span>Option C</span><b>7.1</b><i style={{width:"71%"}}/></div>
            <div className="mini-foot">Adjust a weight → watch the result change</div>
          </div>
        </div>
      </section>

      <section className="strip"><span>COMPARE</span><span>WEIGH</span><span>VISUALIZE</span><span>UNDERSTAND</span><span>DECIDE</span></section>

      <section id="tools" className="section">
        <div className="section-intro"><span className="eyebrow">THE TOOLKIT</span><h2>Turn a messy choice into<br/>a <em>clear visual.</em></h2><p>Start with a simple framework. Then change the assumptions and see what happens.</p></div>
        <div className="tabs"><button className={tool==="matrix"?"selected":""} onClick={()=>setTool("matrix")}>Decision Matrix</button><button className={tool==="sensitivity"?"selected":""} onClick={()=>setTool("sensitivity")}>Sensitivity Analyzer</button></div>
        {tool==="matrix"?<Matrix/>:<Sensitivity/>}
      </section>

      <section id="how" className="how section">
        <div><span className="eyebrow">WHY ZEKELO</span><h2>Don't just get an answer.<br/><em>Understand the trade-off.</em></h2></div>
        <div className="steps">
          <article><span>01</span><h3>Frame</h3><p>Break your decision into the criteria that actually matter.</p></article>
          <article><span>02</span><h3>Explore</h3><p>Change weights, scores, and assumptions to test different priorities.</p></article>
          <article><span>03</span><h3>See</h3><p>Watch the result move. Find the point where your decision changes.</p></article>
        </div>
      </section>

      <section id="about" className="content-section">
        <span className="eyebrow">A BETTER WAY TO CHOOSE</span>
        <h2>Good decisions are rarely about finding the “right” answer.</h2>
        <p>They are about making trade-offs visible. Zekelo turns comparisons and decisions into interactive visual models, so you can understand why an option wins — and what would make another option win instead.</p>
      </section>
    </main>

    <footer><div className="brand"><span className="brand-mark">Z</span>zekelo</div><p>Visual tools for better decisions.</p><div><a href="#">Privacy</a><a href="#">Terms</a><a href="#">Contact</a></div></footer>
  </div>
}

createRoot(document.getElementById("root")).render(<App />);