// Oserot. Operating studio across six disciplines.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "#2546ff",
  "diagram": "tree"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = ["#2546ff", "#e8420f", "#1a1a1a", "#1b8a4e"];

function accentFg(hex) {
  const h = String(hex).replace("#", "");
  const x = h.length === 3 ? h.replace(/./g, (c) => c + c) : h;
  const n = parseInt(x.slice(0, 6), 16);
  if (Number.isNaN(n)) return "#fff";
  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  return r * 299 + g * 587 + b * 114 > 148000 ? "#0c0c0a" : "#ffffff";
}

const ArrowRight = ({ size = 14 }) => (
  <svg viewBox="0 0 16 16" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
    <path d="M3 8h10M9 4l4 4-4 4" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

// ─── The practices ──────────────────────────────────────────
const DISCIPLINES = [
  {
    slug: "ai",
    name: "AI",
    focus: "Applied AI & agents.",
    body: "Production AI systems built for operators. Evals, agents, and the infrastructure to keep them honest. We measure outcomes, not demos.",
    status: "Active",
    since: "2023",
  },
  {
    slug: "forge",
    name: "Forge",
    focus: "Internal tooling.",
    body: "Operating consoles, admin platforms, and the systems that run inside serious companies. Built for the people who run the company.",
    status: "Active",
    since: "2024",
  },
  {
    slug: "studio",
    name: "Studio",
    focus: "Brand & product design.",
    body: "Identity systems, narrative, marketing surfaces, and product UI for the companies the other disciplines build, and a small number of outside partners.",
    status: "Active",
    since: "2022",
  },
  {
    slug: "atlas",
    name: "Atlas",
    focus: "Workflow automation.",
    body: "Durable pipelines that move work between humans and systems. We retire spreadsheets and ship reliable systems in their place.",
    status: "Active",
    since: "2024",
  },
  {
    slug: "labs",
    name: "Labs",
    focus: "Experimental products.",
    body: "Small bets on technologies and product surfaces we believe should exist. Occasionally they graduate from Labs into their own company.",
    status: "In flight",
    since: "2025",
  },
  {
    slug: "capital",
    name: "Capital",
    focus: "Equity partnerships.",
    body: "Long engagements with founders, traded in equity. We are operating partners first; the cap-table participation reflects the depth of the engagement.",
    status: "Soft launch",
    since: "2026",
  },
];

// ─── Nav ────────────────────────────────────────────────────
function Nav() {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#" className="brand">Oserot<span className="brand-mark">*</span></a>
        <a className="btn btn-primary" href="mailto:hello@oserot.com">Get in touch <ArrowRight /></a>
      </div>
    </nav>
  );
}

// ─── Hero ───────────────────────────────────────────────────
function Hero() {
  return (
    <section className="hero">
      <div className="container">
        <h1 className="hero-headline">
          Operating the next generation of <span className="accent">AI-native companies.</span>
        </h1>
        <div className="hero-foot">
          <p className="hero-lede">
            We partner with founders, operators, and established teams to design, build, and run technology companies in which AI is the operating system, not a feature. One senior team. Six disciplines. End to end.
          </p>
          <div className="hero-cta">
            <a className="btn btn-primary" href="mailto:hello@oserot.com">Get in touch <ArrowRight /></a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Approach (three pillars) ───────────────────────────────
const PILLARS = [
  {
    label: "Experience",
    body: "A decade of designing, shipping, and operating technology companies at scale. We have been on every side of the table the teams we work with now sit at.",
  },
  {
    label: "Strategy",
    body: "We deploy a senior, fully-formed team into the venture (engineering, design, operations) to compress the timeline from idea to durable, operated product.",
  },
  {
    label: "Approach",
    body: "We focus on operator-led, tech-enabled businesses where execution and operational excellence are the deciding edge. We commit deeply to a small number of partners each year.",
  },
];

function Approach() {
  return (
    <section className="section section-approach" id="approach">
      <div className="container reveal">
        <div className="sec-hd">
          <div>
            <div className="sec-kicker">Approach</div>
            <h2>How <em>we work.</em></h2>
          </div>
        </div>
        <div className="pillars">
          {PILLARS.map((p) => (
            <div className="pillar" key={p.label}>
              <h3>{p.label}</h3>
              <p>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Practices diagram ──────────────────────────────────────
function DisciplineDiagram() {
  return (
    <div className="diagram" aria-hidden="true">
      <div className="diagram-parent">
        <div className="parent-chip">
          <span className="parent-mark">●</span>
          <span className="parent-name">Oserot</span>
        </div>
      </div>
      <svg className="diagram-wires" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <line x1="600" y1="0" x2="600" y2="40" stroke="currentColor" strokeWidth="1" />
        <line x1="100" y1="40" x2="1100" y2="40" stroke="currentColor" strokeWidth="1" />
        {[100, 300, 500, 700, 900, 1100].map((x) => (
          <line key={x} x1={x} y1="40" x2={x} y2="120" stroke="currentColor" strokeWidth="1" />
        ))}
      </svg>
      <div className="diagram-children">
        {DISCIPLINES.map((b) => (
          <div className="child-chip" key={b.slug}>
            <span className="child-slug">oserot<span className="slash">/</span>{b.slug}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Practices tree (monospace) ─────────────────────────────
function DisciplineTree() {
  const longest = Math.max(...DISCIPLINES.map((b) => b.slug.length));
  const pad = (s) => s + " ".repeat(longest - s.length);
  return (
    <pre className="tree" aria-hidden="true">
      <span className="tree-root">oserot/</span>
      {"\n"}
      {DISCIPLINES.map((b, i) => {
        const last = i === DISCIPLINES.length - 1;
        return (
          <span key={b.slug}>
            <span className="tree-glyph">{last ? "└──" : "├──"}</span>{" "}
            <span className="tree-slug">{pad(b.slug + "/")}</span>{"   "}
            <span className="tree-focus">{b.focus}</span>{"\n"}
          </span>
        );
      })}
      <span className="tree-foot">{"\n"}# six disciplines. one operating partner.</span>
    </pre>
  );
}

// ─── Practices section ──────────────────────────────────────
function Disciplines() {
  return (
    <section className="section section-branches" id="disciplines">
      <div className="container reveal">
        <div className="sec-hd">
          <div>
            <div className="sec-kicker">Disciplines</div>
            <h2>We work across <em>six disciplines.</em></h2>
          </div>
        </div>

        <div className="branches">
          {DISCIPLINES.map((b, i) => (
            <div className="branch" key={b.slug}>
              <div className="branch-hd">
                <div className="branch-name">
                  <span className="branch-parent">oserot<span className="slash">/</span></span>
                  <span className="branch-leaf">{b.slug}</span>
                </div>
                <span className="branch-status" data-status={b.status}>{b.status}</span>
              </div>
              <h3>{b.focus}</h3>
              <p>{b.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Operating model ────────────────────────────────────────
function Studio() {
  return (
    <section className="section section-studio" id="studio">
      <div className="container reveal">
        <div className="studio-hd">
          <div className="studio-hd-left">
            <div className="sec-kicker">Operating model</div>
            <h2>Forward-deployed. <em>Inside the work.</em></h2>
          </div>
          <div className="studio-hd-right">
            <p className="studio-lede">We embed engineers, designers, and operators directly into the company we are working with.</p>
            <p className="studio-body">Same office. Same standups. Same on-call. Forward-deployed teams that ship production software, then transfer it to the people who will run it.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Closing statement ──────────────────────────────────────
function Closing() {
  return (
    <section className="closing reveal">
      <div className="container">
        <h2 className="closing-mark">
          Building<br />what should<br /><em>exist next.</em>
        </h2>
      </div>
    </section>
  );
}

// ─── Contact ────────────────────────────────────────────────
function Contact() {
  return (
    <section className="contact" id="contact">
      <div className="container reveal">
        <div className="sec-kicker">Engage</div>
        <h2>Building something <span className="accent">category-defining?</span></h2>
        <p className="lede">We commit deeply to a small number of partnerships each year. Tell us what you are building and which discipline you think it lives in. We will reply within the week.</p>
        <div className="actions">
          <a className="btn btn-primary" href="mailto:hello@oserot.com">Get in touch <ArrowRight /></a>
          <a className="btn" href="mailto:hello@oserot.com">hello@oserot.com</a>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ─────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-mark">
            <span className="footer-wordmark">Oserot<span className="brand-mark">*</span></span>
            <p className="footer-tag">An operating studio.<br />Working together since 2017.</p>
          </div>
          </div>

        <div className="footer-cols">
          <div className="footer-col">
            <div className="footer-col-label">Index</div>
            <ul>
              <li><a href="#approach">Approach</a></li>
              <li><a href="#disciplines">Disciplines</a></li>
              <li><a href="#studio">Operating model</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <div className="footer-col-label">Join us</div>
            <ul>
              <li><a href="Careers.html">Careers</a></li>
              <li><a href="Careers.html">Open roles <span className="role-count">7</span></a></li>
              <li><a href="Careers.html">Fellowship</a></li>
              <li><a href="mailto:hello@oserot.com?subject=General%20application">General application</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <div className="footer-col-label">Company</div>
            <address className="footer-address">
              Oserot S.r.l.<br />
              P.IVA 04186150043<br /><br />
              Corso Mazzini, 99<br />
              12011 Borgo San Dalmazzo (CN)<br />
              Italy
            </address>
          </div>
        </div>

        <div className="footer-legal">
          <div className="footer-legal-left">
            <span>© 2026 Oserot S.r.l.</span>
          </div>
          <div className="footer-legal-right">
            <a href="Privacy.html">Privacy</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ─── App ────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme);
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty("--accent-fg", accentFg(t.accent));
  }, [t.theme, t.accent]);

  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add("visible"); });
    }, { threshold: 0.08 });
    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <Hero />
      <Approach />
      <Disciplines />
      <Studio />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakRadio label="Mode" value={t.theme} options={["light", "dark"]}
                      onChange={(v) => setTweak("theme", v)} />
          <TweakColor label="Accent" value={t.accent} options={ACCENT_OPTIONS}
                      onChange={(v) => setTweak("accent", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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