'use client';
import { useId, useState, type CSSProperties } from 'react';
import { styles } from '@/lib/catalog';
const picture = (id: string) =>
  `https://cdn.polyhaven.com/asset_img/thumbs/${id}.png?width=700&height=700`;
function ObjectImage({
  id,
  className = '',
}: {
  id: string;
  className?: string;
}) {
  return <img className={className} src={picture(id)} alt="" loading="lazy" />;
}
function Building() {
  return (
    <svg
      viewBox="0 0 500 350"
      className="world-building"
      aria-label="Архитектурная композиция"
    >
      <path fill="#cecac0" d="M30 300V120L255 25l215 110v165Z" />
      <path fill="#53534c" d="m255 25 215 110v165H255Z" />
      <path fill="#e4dfd3" d="M30 120 255 25v275H30Z" />
      {[0, 1, 2, 3, 4].map((n) => (
        <path
          key={n}
          d={`M${65 + n * 38} ${125 - n * 16}v150`}
          stroke="#727366"
          strokeWidth="13"
        />
      ))}
      <path fill="#f4f0e1" d="M5 290h485v30H5z" />
    </svg>
  );
}
import { stylePrinciples } from '@/lib/style-principles';

export function StyleWorld({
  id,
  small = false,
}: {
  id: string;
  small?: boolean;
}) {
  const uid = useId().replaceAll(':', ''),
    [tab, setTab] = useState(0);
  const s = styles.find((s) => s.id === id) || styles[0];
  const go = small
    ? undefined
    : () =>
        document.getElementById(uid + '-more')?.scrollIntoView({
          behavior: matchMedia('(prefers-reduced-motion:reduce)').matches
            ? 'instant'
            : 'smooth',
          block: 'start',
        });
  const Action = ({ children }: { children: React.ReactNode }) =>
    small ? (
      <span className="world-action">{children}</span>
    ) : (
      <button className="world-action" onClick={go}>
        {children}
      </button>
    );
  const nav = (
    <div className="world-nav">
      <b>
        {
          (
            {
              swiss: 'Form / Office',
              editorial: 'The Observed',
              brutalist: 'OFF—GRID',
              minimal: 'mono.',
              luxury: 'MAISON AURE',
              technical: 'VECTOR / SYSTEMS',
              playful: 'hello, odd!',
              organic: 'root & ritual',
              retro: 'SUNNY SIDE',
              saas: 'Outline',
              gallery: 'Galerie 04',
              cyber: 'SYNTH / LAB',
              newspaper: 'THE COMMON PAPER',
              terminal: 'root@studio:~',
              desktop: 'Personal space.exe',
              deco: 'THE ASTER',
              bauhaus: 'FORM + SOUND',
              blueprint: 'PLAN / PRACTICE',
              botanical: 'HERBARIUM',
              cinematic: 'OTHER HOURS',
              raw: 'The Independent Web',
              memphis: 'ODD COMPANY',
              fashion: 'FORME',
              dashboard: 'Metric',
            } as Record<string, string>
          )[id]
        }
      </b>
      <span>
        {['terminal', 'technical', 'blueprint'].includes(id)
          ? 'SYSTEM ONLINE / 2026'
          : 'Selected work · About'}
      </span>
    </div>
  );
  return (
    <div
      className={`style-world world-${id} ${small ? 'world-small' : 'world-full'}`}
      style={
        {
          '--world-bg': s.bg,
          '--world-fg': s.fg,
          '--world-accent': s.accent,
        } as CSSProperties
      }
    >
      <div className="world-hero">
        {nav}
        {id === 'swiss' && (
          <>
            <div className="swiss-grid">
              <span className="world-index">
                001—
                <br />
                DESIGN & DIRECTION
              </span>
              <h2>
                Good design
                <br />
                is a position.
              </h2>
              <div className="swiss-disc" />
              <p>
                Independent design office.
                <br />
                Zurich, Switzerland.
              </p>
            </div>
            <div className="swiss-footer">
              IDENTITY / DIGITAL / ENVIRONMENTS{' '}
              <Action>Selected projects ↗</Action>
            </div>
          </>
        )}
        {id === 'editorial' && (
          <>
            <div className="editorial-cover">
              <span>ESSAYS ON CULTURE / ISSUE 08</span>
              <h2>
                The art of
                <br />
                <em>paying attention.</em>
              </h2>
              <div className="editorial-art">
                <ObjectImage id="marble_bust_01" />
                <small>FIG. 01 / AN EXERCISE IN SEEING</small>
              </div>
              <p>
                What happens when we look
                <br />a little longer?
              </p>
              <Action>Read the issue →</Action>
            </div>
          </>
        )}
        {id === 'brutalist' && (
          <>
            <div className="brutal-banner">INDEPENDENT MINDS. LOUD IDEAS.</div>
            <h2 className="brutal-title">
              NOT
              <br />
              ANOTHER
              <br />
              <em>STUDIO.</em>
            </h2>
            <div className="brutal-sticker">
              100%
              <br />
              HUMAN
              <br />
              ENERGY
            </div>
            <div className="brutal-bottom">
              <span>DESIGN THAT TAKES UP SPACE.</span>
              <Action>SHOW ME THE WORK ↗</Action>
            </div>
          </>
        )}
        {id === 'minimal' && (
          <>
            <div className="minimal-product">
              <ObjectImage id="ceramic_vase_01" />
              <span>01 / A quieter everyday</span>
              <h2>
                Only what
                <br />
                you need.
              </h2>
              <Action>Explore the collection →</Action>
            </div>
          </>
        )}
        {id === 'luxury' && (
          <>
            <div className="luxury-frame">
              <span>OBJECTS OF ENDURING CHARACTER</span>
              <ObjectImage id="brass_goblets" />
              <h2>
                The art
                <br />
                <em>of keeping.</em>
              </h2>
              <Action>Discover the maison</Action>
            </div>
            <span className="luxury-year">EST. MMXX / PARIS</span>
          </>
        )}
        {id === 'technical' && (
          <>
            <div className="technical-head">
              <span>V.04 / ENGINEERING SYSTEMS</span>
              <h2>
                MEASURE.
                <br />
                UNDERSTAND.
                <br />
                ADVANCE.
              </h2>
            </div>
            <div className="technical-diagram">
              <svg viewBox="0 0 400 200">
                <path
                  d="M15 110h55l20-80 35 150 30-100 30 70 25-60h175"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                />
                {[50, 100, 150].map((y) => (
                  <path
                    key={y}
                    d={`M0 ${y}h400`}
                    stroke="currentColor"
                    opacity=".15"
                  />
                ))}
              </svg>
              <span>FREQUENCY RESPONSE / 48 kHz</span>
            </div>
            <div className="technical-data">
              <b>
                99.98<small>RELIABILITY</small>
              </b>
              <b>
                0.012<small>LATENCY / MS</small>
              </b>
              <Action>VIEW DOCUMENTATION ↗</Action>
            </div>
          </>
        )}
        {id === 'playful' && (
          <>
            <div className="playful-title">
              <span>hey.</span>
              <span>let’s</span>
              <span>play!</span>
            </div>
            <div className="playful-face">
              <i />
              <i />
              <b>⌣</b>
            </div>
            <div className="playful-bottom">
              <p>
                Big ideas start
                <br />
                with a little curiosity.
              </p>
              <Action>Find your thing ↗</Action>
            </div>
          </>
        )}
        {id === 'organic' && (
          <>
            <div className="organic-layout">
              <div>
                <span>SMALL DAILY RITUALS</span>
                <h2>
                  Come back
                  <br />
                  <em>to yourself.</em>
                </h2>
                <p>
                  Made slowly.
                  <br />
                  Inspired by the natural world.
                </p>
                <Action>Find your ritual →</Action>
              </div>
              <div className="organic-window">
                <ObjectImage id="potted_plant_02" />
              </div>
            </div>
            <div className="organic-bottom">
              ROOTED IN NATURE / MADE WITH CARE
            </div>
          </>
        )}
        {id === 'retro' && (
          <>
            <div className="retro-ribbon">FRESHLY BREWED & ALWAYS SUNNY</div>
            <div className="retro-sign">
              <span>YOUR FRIENDLY NEIGHBOURHOOD</span>
              <h2>
                Good morning,
                <br />
                good people.
              </h2>
              <b>☀</b>
              <Action>TAKE A LOOK AT THE MENU</Action>
            </div>
            <div className="retro-footer">
              COFFEE / BREAKFAST / SOMETHING SWEET
            </div>
          </>
        )}
        {id === 'saas' && (
          <>
            <div className="saas-head">
              <span>LESS ADMIN. MORE MOMENTUM.</span>
              <h2>
                Make room
                <br />
                for better work.
              </h2>
              <Action>Open your workspace →</Action>
            </div>
            <div className="saas-window">
              <aside>
                O.
                <hr />
                Inbox
                <br />
                Projects
                <br />
                Team
              </aside>
              <div>
                <b>Brand refresh</b>
                <p>Everything moving forward.</p>
                <div className="saas-kanban">
                  {['Planned', 'In progress', 'Done'].map((t, i) => (
                    <section key={t}>
                      <small>{t}</small>
                      <article>
                        {
                          [
                            'Research notes',
                            'Identity exploration',
                            'Project brief',
                          ][i]
                        }
                      </article>
                      <article>
                        {['Moodboard', 'Website concept', 'Kick-off'][i]}
                      </article>
                    </section>
                  ))}
                </div>
              </div>
            </div>
          </>
        )}
        {id === 'gallery' && (
          <>
            <div className="gallery-room">
              <aside>
                EXHIBITIONS
                <br />
                ARTISTS
                <br />
                VISIT
                <br />
                <br />
                01—06
              </aside>
              <div>
                <ObjectImage id="marble_bust_01" />
                <small>Study of a figure / Collection 2026</small>
              </div>
              <h2>
                In the
                <br />
                <em>presence</em>
                <br />
                of form.
              </h2>
            </div>
            <div className="gallery-bottom">
              CONTEMPORARY OBJECTS & IDEAS
              <Action>Visit the exhibition ↗</Action>
            </div>
          </>
        )}
        {id === 'cyber' && (
          <>
            <div className="cyber-orb" />
            <div className="cyber-cross">+</div>
            <h2 className="cyber-title">
              BEYOND
              <br />
              THE SIGNAL.
            </h2>
            <div className="cyber-meta">
              <span>
                NEW FREQUENCIES
                <br />
                48° 51′ 24″ N
              </span>
              <Action>ENTER THE FREQUENCY ↗</Action>
            </div>
          </>
        )}
        {id === 'newspaper' && (
          <>
            <div className="newspaper-date">
              Vol. XXIV / Independent since 1998{' '}
              <span>Tuesday, September 8</span>
            </div>
            <h2 className="newspaper-title">
              A city learns
              <br />
              to slow down
            </h2>
            <div className="newspaper-columns">
              <article>
                <b>The quiet revolution next door</b>
                <p>
                  Between the morning rush and the evening light, a different
                  rhythm is taking shape.
                </p>
              </article>
              <div>
                <Building />
                <small>New spaces for a changing community</small>
              </div>
              <article>
                <b>Notes from the neighbourhood</b>
                <p>
                  Good places begin with the people who call them home. A
                  conversation on what comes next.
                </p>
              </article>
            </div>
          </>
        )}
        {id === 'terminal' && (
          <div className="terminal-screen">
            <p>$ connect studio.network</p>
            <pre>
              {
                '  /\\     OPEN SYSTEMS\n /__\\    INDEPENDENT SOFTWARE\n/    \\   VERSION 2.6.0'
              }
            </pre>
            <p>
              Connection established.
              <br />
              Welcome, curious human.
            </p>
            <h2>
              Build something
              <br />
              worth opening.
            </h2>
            <div className="terminal-options">
              [01] projects
              <br />
              [02] documentation
              <br />
              [03] people
            </div>
            <Action>$ explore --all ↵</Action>
          </div>
        )}
        {id === 'desktop' && (
          <>
            <div className="desktop-icons">
              ▤<br />
              My files
              <br />
              <br />▧<br />
              Gallery
            </div>
            <div className="desktop-window">
              <div className="desktop-title">
                Welcome.txt <span>_ □ ×</span>
              </div>
              <div className="desktop-menu">File　Edit　View　Help</div>
              <h2>
                The internet
                <br />
                is a place
                <br />
                to make things.
              </h2>
              <p>Your personal corner of the world wide web.</p>
              <div className="desktop-tabs">
                {['About me', 'My work', 'Guestbook'].map((t, i) =>
                  small ? (
                    <span key={t}>{t}</span>
                  ) : (
                    <button
                      key={t}
                      onClick={() => setTab(i)}
                      aria-pressed={tab === i}
                    >
                      {t}
                    </button>
                  ),
                )}
              </div>
              <p className="desktop-status">
                {
                  [
                    'Designing, collecting and learning since 1995.',
                    'Selected projects: Index, Pixel Garden, Home Page.',
                    'Thank you for stopping by. Make yourself at home.',
                  ][tab]
                }
              </p>
            </div>
            <div className="desktop-taskbar">
              <b>▦ Start</b>
              <span>Welcome.txt</span>
              <time>09:41 AM</time>
            </div>
          </>
        )}
        {id === 'deco' && (
          <div className="deco-frame">
            <span>A STAY ABOVE THE EVERYDAY</span>
            <div className="deco-lines">✧</div>
            <h2>
              THE
              <br />
              GRAND
              <br />
              ESCAPE
            </h2>
            <p>AN INTIMATE CITY RETREAT</p>
            <Action>DISCOVER YOUR STAY</Action>
            <div className="deco-steps" />
          </div>
        )}
        {id === 'bauhaus' && (
          <>
            <div className="bauhaus-shapes">
              <i />
              <b />
              <em />
            </div>
            <h2 className="bauhaus-type">
              form
              <br />& sound
            </h2>
            <div className="bauhaus-details">
              <span>
                EXPERIMENTAL ARTS
                <br />
                18—24 SEPTEMBER
              </span>
              <Action>PROGRAMME →</Action>
            </div>
          </>
        )}
        {id === 'blueprint' && (
          <>
            <div className="blueprint-title">
              <span>PROJECT NO. 026 / SECTION A—A</span>
              <h2>
                SPACE.
                <br />
                WITH PURPOSE.
              </h2>
            </div>
            <div className="blueprint-drawing">
              <Building />
              <span>← 12,600 →</span>
              <b>+ 04.500</b>
            </div>
            <div className="blueprint-footer">
              RESIDENTIAL / CULTURAL / PUBLIC
              <Action>OPEN PROJECT INDEX ↗</Action>
            </div>
          </>
        )}
        {id === 'botanical' && (
          <>
            <div className="botanical-paper">
              <div>
                <span>FIELD NOTES / NO. 014</span>
                <h2>
                  Collected
                  <br />
                  <em>in the wild.</em>
                </h2>
                <p>
                  A living archive of the
                  <br />
                  things we often walk past.
                </p>
                <Action>Open the herbarium →</Action>
              </div>
              <figure>
                <ObjectImage id="fern_02" />
                <figcaption>
                  <i>Dryopteris filix-mas</i>
                  <br />
                  Woodland specimen / Plate XIV
                </figcaption>
              </figure>
            </div>
          </>
        )}
        {id === 'cinematic' && (
          <>
            <div
              className="cinema-image"
              style={{ backgroundImage: `url(${picture('lilienstein')})` }}
            />
            <span className="cinema-time">
              00:04:28:12 / A FILM BY OTHER HOURS
            </span>
            <h2 className="cinema-title">
              AFTER
              <br />
              THE LIGHT.
            </h2>
            <div className="cinema-bottom">
              <span>
                A story told
                <br />
                between moments.
              </span>
              <Action>EXPLORE THE FILM ↗</Action>
              <span>2026 / 16 MM</span>
            </div>
          </>
        )}
        {id === 'raw' && (
          <div className="raw-document">
            <h2>The Independent Web Directory</h2>
            <p>A small collection of useful things on the internet.</p>
            <hr />
            <h3>Contents</h3>
            <ul>
              {[
                'People making things',
                'Notes on design',
                'Useful tools',
                'Web experiments',
                'About this archive',
              ].map((t) => (
                <li key={t}>
                  <Action>{t}</Action>
                </li>
              ))}
            </ul>
            <hr />
            <p>Maintained with care. Last updated: September 2026.</p>
            <p>
              <i>Built from links, headings and ordinary HTML.</i>
            </p>
          </div>
        )}
        {id === 'memphis' && (
          <>
            <div className="memphis-dots" />
            <div className="memphis-squiggle">〰〰</div>
            <h2 className="memphis-title">
              NORMAL
              <br />
              IS
              <br />
              <em>BORING.</em>
            </h2>
            <div className="memphis-strip">
              <span>AN OPEN SPACE FOR ODD IDEAS</span>
              <Action>COME PLAY ↗</Action>
            </div>
          </>
        )}
        {id === 'fashion' && (
          <>
            <h2 className="fashion-logo">FORME</h2>
            <div className="fashion-diptych">
              <figure>
                <ObjectImage id="sofa_02" />
                <figcaption>LOOK 01 / THE SOFT STRUCTURE</figcaption>
              </figure>
              <figure>
                <ObjectImage id="ArmChair_01" />
                <figcaption>LOOK 02 / A NEW CLASSIC</figcaption>
              </figure>
            </div>
            <div className="fashion-foot">
              COLLECTION / AUTUMN 2026<Action>VIEW THE EDIT →</Action>
            </div>
          </>
        )}
        {id === 'dashboard' && (
          <div className="dashboard-sample">
            <aside>
              ◧ Overview
              <br />☷ Reports
              <br />◷ Activity
              <br />⚙ Settings
            </aside>
            <main>
              <div className="dashboard-heading">
                <h2>Good morning, Alex.</h2>
                <span>Last 30 days ▾</span>
              </div>
              <div className="dashboard-metrics">
                {[
                  ['Revenue', '$42,860', '+12.8%'],
                  ['Customers', '1,204', '+8.2%'],
                  ['Conversion', '4.6%', '+1.2%'],
                ].map(([t, n, d]) => (
                  <div key={t}>
                    <span>{t}</span>
                    <b>{n}</b>
                    <small>{d}</small>
                  </div>
                ))}
              </div>
              <div className="dashboard-chart">
                {[20, 40, 32, 58, 43, 73, 66, 92, 70, 84, 95, 79, 98].map(
                  (h, i) => (
                    <i key={i} style={{ height: h + '%' }} />
                  ),
                )}
              </div>
              <table>
                <tbody>
                  <tr>
                    <th>Project</th>
                    <th>Status</th>
                    <th>Revenue</th>
                  </tr>
                  <tr>
                    <td>Brand platform</td>
                    <td>Completed</td>
                    <td>$12,400</td>
                  </tr>
                  <tr>
                    <td>Summer campaign</td>
                    <td>In progress</td>
                    <td>$8,200</td>
                  </tr>
                </tbody>
              </table>
            </main>
          </div>
        )}
      </div>
      {!small && (
        <section id={uid + '-more'} className="world-continuation">
          <span>DESIGN ANATOMY / {s.name}</span>
          <h2>
            {id === 'newspaper'
              ? 'Behind the front page.'
              : id === 'terminal'
                ? '$ inspect --principles'
                : id === 'raw'
                  ? 'How this page is built'
                  : 'A language of its own.'}
          </h2>
          <div>
            {(stylePrinciples[id] || []).map((t, i) => (
              <article key={t}>
                <b>0{i + 1}</b>
                <h3>{t}</h3>
              </article>
            ))}
          </div>
          <p>
            {s.industry}. Это самостоятельный образец направления: адаптируй
            контент и структуру под задачу, сохрани узнаваемые принципы.
          </p>
        </section>
      )}
    </div>
  );
}