// Readable view — the "escape hatch" for non-technical visitors.
// Brutal monochrome editorial, but with no shell metaphor. Pure information design.

const { useState: useState3 } = React;

function ReadableView({ onBack }) {
  return (
    <div className="absolute inset-0 bg-[#fafaf7] text-black overflow-auto" style={{ fontFamily: "'Inter', ui-sans-serif, system-ui, sans-serif" }}>
      <div className="max-w-3xl mx-auto px-8 py-12">
        {/* Top bar */}
        <div className="flex items-center justify-between mb-12 text-[11px] font-mono uppercase tracking-[0.25em]">
          <span>{P.name}</span>
          <button onClick={onBack} className="border border-black px-3 py-1.5 hover:bg-black hover:text-white transition-colors">↘ back to terminal</button>
        </div>

        {/* Hero */}
        <h1 className="font-serif font-black leading-[0.9] tracking-tight" style={{ fontFamily: "'GT Sectra', 'Playfair Display', 'Georgia', serif", fontSize: "clamp(48px, 8vw, 96px)" }}>
          {P.name}
        </h1>
        <p className="mt-4 text-[18px] text-black/70 max-w-2xl leading-relaxed">{P.about.description}</p>

        {/* Sections */}
        <Section label="01 / Experience">
          <div className="space-y-4">
            {P.experiences.map(e => (
              <div key={e.company} className="grid grid-cols-[140px_1fr] gap-4 border-b border-black/10 pb-4">
                <span className="font-mono text-[12px] text-black/60 tabular-nums pt-0.5">{e.period}</span>
                <div>
                  <div><strong>{e.position}</strong> · {e.company}</div>
                  <div className="text-black/60 text-[14px] mt-0.5">{e.note}</div>
                </div>
              </div>
            ))}
          </div>
        </Section>

        <Section label="02 / Selected Projects">
          <div className="space-y-5">
            {P.projects.map((p, i) => (
              <div key={p.name} className="grid grid-cols-[40px_1fr] gap-4">
                <span className="font-mono text-[12px] text-black/40 tabular-nums">{String(i + 1).padStart(2, "0")}</span>
                <div>
                  <div className="flex items-baseline gap-3 flex-wrap">
                    <a href={p.link} target="_blank" rel="noreferrer" className="text-[20px] font-semibold underline-offset-4 hover:underline">{p.name}</a>
                    <span className="text-[12px] font-mono text-black/50 uppercase tracking-wider">{p.subtitle}</span>
                  </div>
                  <p className="mt-1 text-[15px] leading-relaxed">{p.description}</p>
                  <div className="mt-1 text-[12px] font-mono text-black/50">{p.tech.join(" · ")}</div>
                </div>
              </div>
            ))}
          </div>
        </Section>

        <Section label="03 / Stack">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4">
            {[
              ["languages", P.skills.languages],
              ["frameworks", P.skills.frameworks],
              ["databases", P.skills.databases],
              ["tools", P.skills.tools],
            ].map(([k, v]) => (
              <div key={k}>
                <div className="text-[10px] font-mono uppercase tracking-[0.25em] text-black/50 mb-1">{k}</div>
                <div className="text-[14px]">{v.join(" · ")}</div>
              </div>
            ))}
          </div>
        </Section>

        <Section label="04 / Contact">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-1 text-[14px]">
            <Row k="Email" v={P.contact.email} href={`mailto:${P.contact.email}`} />
            <Row k="LinkedIn" v={P.contact.linkedin.replace("https://", "")} href={P.contact.linkedin} />
            <Row k="GitHub" v={P.contact.github.replace("https://", "")} href={P.contact.github} />
            <Row k="Calendar" v="cal.com — book 15 min" href={P.contact.calendar} />
          </div>
          <div className="mt-6">
            <a href={P.resume.url} download className="inline-block border border-black px-4 py-2 text-[13px] font-mono uppercase tracking-wider hover:bg-black hover:text-white transition-colors">↓ Download Resume (updated {P.resume.lastUpdated})</a>
          </div>
        </Section>

        <div className="mt-16 mb-8 text-[10px] font-mono uppercase tracking-[0.25em] text-black/40 flex items-center justify-between">
          <span>© {P.name} · {new Date().getFullYear()}</span>
          <span>typeset in inter &amp; serif</span>
        </div>
      </div>
    </div>
  );
}

function Section({ label, children }) {
  return (
    <section className="mt-14">
      <div className="text-[10px] font-mono uppercase tracking-[0.3em] text-black/50 border-b-2 border-black pb-1 mb-5">{label}</div>
      {children}
    </section>
  );
}

function Row({ k, v, href }) {
  return (
    <div className="flex gap-3 py-1 border-b border-black/10">
      <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-black/50 w-20 pt-1">{k}</span>
      <a href={href} target="_blank" rel="noreferrer" className="underline underline-offset-2 decoration-black/30 hover:decoration-black">{v}</a>
    </div>
  );
}

window.ReadableView = ReadableView;