// ─────────────────────────────────────────────────────────────
// Section B · Create-forest flow.
//
// Two variants:
//   B1 · Single-screen inline create — calm, progressive, scrolls.
//   B2 · Vibe-first wizard — picks a "kind of place" first
//        (Salon / Plaza / Study Hall / Campfire), each with different
//        defaults for size, moderation, content style. The wizard
//        builds visual confidence in what kind of forest is being made.
//
// Both end on the same confirmation beat (a forest glyph drawing
// itself in).
// ─────────────────────────────────────────────────────────────


// Shared chrome
function CreateHeader({ title = 'Plant a forest', subtitle, onBack }) {
  return (
    <div style={{ padding: '10px 14px 12px', display: 'flex', alignItems: 'center', gap: 10,
                  borderBottom: '0.5px solid #1F2B16', flexShrink: 0 }}>
      <button onClick={onBack} style={{ background: 'transparent', border: 'none', padding: 6,
                       color: '#C9D2BB', cursor: 'pointer', display: 'flex' }}>
        <FLIcons.ChevronLeft size={20}/>
      </button>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ font: '500 15px var(--font-sans)', color: '#F2EDE4' }}>{title}</div>
        {subtitle && (
          <div style={{ font: 'italic 400 11.5px var(--font-serif)', color: '#8A9678', marginTop: 1 }}>
            {subtitle}
          </div>
        )}
      </div>
    </div>
  );
}


// ──────────────────────────────────────────────────────────────
// B1 · Single-screen inline create.
// All the inputs are visible; the bottom confirmation grows from
// a glyph that animates as the user types into the name field.
// ──────────────────────────────────────────────────────────────
function CreateB1_Inline() {
  const [name, setName] = React.useState('Mission Bay Coffee Walks');
  const [blurb, setBlurb] = React.useState('a slow loop, a cup, no agenda.');
  const [join, setJoin] = React.useState('open'); // open | moderated | invite
  const [visibility, setVisibility] = React.useState('public'); // public | discoverable | unlisted

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: '#0B1306' }}>
      <CreateHeader subtitle="step 1 of 1 — keep it small to start." />

      <PhoneBody style={{ padding: '14px 16px 90px' }}>
        {/* Living preview at top */}
        <LivingPreview name={name} blurb={blurb} join={join} visibility={visibility} />

        <FieldLabel num="1" label="Name"/>
        <TextField value={name} onChange={setName} placeholder="e.g. Slow Cooking"/>
        <FieldHint>You can rename it any time. Lowercase, no spaces, optional.</FieldHint>

        <FieldLabel num="2" label="A single sentence"/>
        <TextField value={blurb} onChange={setBlurb} placeholder="a slow loop, a cup, no agenda."
          mono={false} italic/>
        <FieldHint>This is the only blurb members ever see. Make it earn it.</FieldHint>

        <FieldLabel num="3" label="Who can plant?"/>
        <RadioGroup value={join} onChange={setJoin}
          options={[
            { v: 'open',      label: 'Open',      hint: 'anyone joins with a tap' },
            { v: 'moderated', label: 'Moderated', hint: 'requests need approval' },
            { v: 'invite',    label: 'Invite-only', hint: 'referral code required' },
          ]}/>

        <FieldLabel num="4" label="Visibility"/>
        <RadioGroup value={visibility} onChange={setVisibility}
          options={[
            { v: 'public',       label: 'Public',       hint: 'appears in discover' },
            { v: 'discoverable', label: 'Discoverable', hint: 'only via search' },
            { v: 'unlisted',     label: 'Unlisted',     hint: 'shareable link only' },
          ]}/>

        <div style={{ marginTop: 18, display: 'flex', gap: 10 }}>
          <Btn kind="secondary" full>Cancel</Btn>
          <Btn kind="primary" full>Plant the forest</Btn>
        </div>
        <div style={{ font: 'italic 400 11.5px/1.55 var(--font-serif)', color: '#586552',
                      marginTop: 10, textAlign: 'center' }}>
          You will be its sole steward until the first folk arrives.
        </div>
      </PhoneBody>

      <BottomNavFolk active="forests" hasNewSunlight={false}/>
    </div>
  );
}


// The header preview card — name + blurb + glyph, updates live.
function LivingPreview({ name, blurb, join, visibility }) {
  const hot = name.length > 0;
  return (
    <div style={{
      position: 'relative', padding: '14px 14px 16px', borderRadius: 14,
      background: '#0F1A09', border: '0.5px solid #1F2B16',
      marginBottom: 18, overflow: 'hidden',
    }}>
      <SunbeamSweep/>
      <div style={{ font: '500 10px var(--font-sans)', color: '#76AB78',
                    letterSpacing: '0.14em', textTransform: 'uppercase' }}>Preview</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 12 }}>
        <BreathingForestGlyph size={44} hot={hot}/>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
            <span style={{ font: '500 17px var(--font-sans)', color: '#F2EDE4' }}>
              {name || 'untitled forest'}
            </span>
            <KindChip kind={visibility === 'public' ? 'public' : visibility === 'unlisted' ? 'private' : 'invite'}/>
            <JoinChip mode={join === 'invite' ? 'referral' : join}/>
          </div>
          <div style={{ font: 'italic 400 13px var(--font-serif)', color: '#A8C5A0', marginTop: 4 }}>
            {blurb || 'a single, honest sentence about this place.'}
          </div>
          <div style={{ font: '400 11px var(--font-sans)', color: '#586552', marginTop: 6 }}>
            you · 1 member · 0 growing
          </div>
        </div>
      </div>
    </div>
  );
}


function FieldLabel({ num, label }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 16, marginBottom: 6 }}>
      <span style={{ font: '500 11px var(--font-mono)', color: '#586552' }}>{num}</span>
      <span style={{ font: '500 11.5px var(--font-sans)', color: '#A8C5A0',
                     letterSpacing: '0.10em', textTransform: 'uppercase' }}>{label}</span>
    </div>
  );
}
function FieldHint({ children }) {
  return (
    <div style={{ font: 'italic 400 11.5px var(--font-serif)', color: '#586552',
                  marginTop: 5, marginLeft: 2 }}>{children}</div>
  );
}
function TextField({ value, onChange, placeholder, italic = false, mono = false }) {
  return (
    <input value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder}
      style={{
        width: '100%', boxSizing: 'border-box',
        background: '#111D0A', border: '0.5px solid #2D3A22',
        borderRadius: 10, color: '#F2EDE4', padding: '11px 12px',
        font: italic ? 'italic 400 14px var(--font-serif)' :
              mono ? '500 14px var(--font-mono)' :
              '400 14px var(--font-sans)',
        outline: 'none', transition: 'border-color 140ms var(--ease-organic)',
      }}
      onFocus={e => e.currentTarget.style.borderColor = '#4F8E51'}
      onBlur={e => e.currentTarget.style.borderColor = '#2D3A22'}
    />
  );
}
function RadioGroup({ value, onChange, options }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {options.map(o => (
        <button key={o.v} onClick={() => onChange(o.v)} style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '11px 13px', textAlign: 'left',
          background: value === o.v ? '#1B3A1D' : '#111D0A',
          border: `0.5px solid ${value === o.v ? '#2C5F2E' : '#1F2B16'}`,
          borderRadius: 10, cursor: 'pointer', width: '100%',
          transition: 'background 140ms var(--ease-organic), border-color 140ms var(--ease-organic)',
        }}>
          <span style={{
            width: 16, height: 16, borderRadius: '50%',
            border: `1.5px solid ${value === o.v ? '#4F8E51' : '#445239'}`,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0,
          }}>
            {value === o.v && (
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#4F8E51',
                             animation: 'flBeadGrow 220ms var(--ease-organic) both' }}/>
            )}
          </span>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ font: '500 13px var(--font-sans)', color: '#F2EDE4' }}>{o.label}</div>
            <div style={{ font: 'italic 400 11.5px var(--font-serif)', color: '#8A9678' }}>{o.hint}</div>
          </div>
        </button>
      ))}
    </div>
  );
}


// ──────────────────────────────────────────────────────────────
// B2 · Vibe-first wizard.
// 3 steps, each its own animated frame:
//   1. Pick a vibe
//   2. Name + blurb (inherits sensible defaults from vibe)
//   3. Confirm — glyph "draws itself" in
// ──────────────────────────────────────────────────────────────
function CreateB2_Wizard() {
  const [step, setStep] = React.useState(1);
  const [vibe, setVibe] = React.useState('study');
  const [name, setName] = React.useState('');
  const [blurb, setBlurb] = React.useState('');

  const vibeMeta = FOREST_VIBES.find(v => v.id === vibe);

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: '#0B1306' }}>
      <CreateHeader subtitle={`step ${step} of 3`} onBack={() => setStep(Math.max(1, step - 1))}/>

      <PhoneBody style={{ padding: '16px 16px 90px' }}>
        {/* Step indicator beads */}
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginBottom: 18 }}>
          {[1, 2, 3].map(s => (
            <span key={s} style={{
              width: s === step ? 24 : 8, height: 8, borderRadius: 4,
              background: s <= step ? '#4F8E51' : '#243319',
              transition: 'width 220ms var(--ease-organic), background 220ms var(--ease-organic)',
            }}/>
          ))}
        </div>

        {step === 1 && (
          <div key="s1" style={{ animation: 'flSheetEnter 360ms var(--ease-organic) both' }}>
            <h3 style={{ margin: '0 0 6px', font: '500 22px var(--font-sans)', color: '#F2EDE4',
                          letterSpacing: '-0.01em' }}>
              What kind of place?
            </h3>
            <p style={{ margin: '0 0 18px', font: 'italic 400 14px/1.5 var(--font-serif)', color: '#8A9678' }}>
              You can change everything later. Pick the room you'd want to walk into.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {FOREST_VIBES.map(v => (
                <VibeCard key={v.id} vibe={v} selected={v.id === vibe} onSelect={() => setVibe(v.id)}/>
              ))}
            </div>
            <Btn kind="primary" full style={{ marginTop: 20 }} onClick={() => setStep(2)}>
              Next — name your {vibeMeta.label.toLowerCase()}
            </Btn>
          </div>
        )}

        {step === 2 && (
          <div key="s2" style={{ animation: 'flSheetEnter 360ms var(--ease-organic) both' }}>
            <h3 style={{ margin: '0 0 6px', font: '500 22px var(--font-sans)', color: '#F2EDE4',
                          letterSpacing: '-0.01em' }}>
              Name your {vibeMeta.label}
            </h3>
            <p style={{ margin: '0 0 18px', font: 'italic 400 14px/1.5 var(--font-serif)',
                        color: '#8A9678' }}>
              {vibeMeta.serif}.
            </p>
            <FieldLabel num="1" label="Name"/>
            <TextField value={name} onChange={setName} placeholder="e.g. Slow Cooking"/>
            <FieldLabel num="2" label="A single sentence"/>
            <TextField value={blurb} onChange={setBlurb}
              placeholder={vibeMeta.id === 'study' ? 'one chapter a week, no rush.'
                         : vibeMeta.id === 'plaza' ? 'whatever\'s loud right now.'
                         : vibeMeta.id === 'salon' ? 'sharp opinions, room for them.'
                         :                           'warm seats, slow returns.'}
              italic/>
            <Btn kind="primary" full style={{ marginTop: 20 }}
              onClick={() => setStep(3)}>
              Confirm
            </Btn>
          </div>
        )}

        {step === 3 && (
          <div key="s3" style={{ animation: 'flSheetEnter 360ms var(--ease-organic) both' }}>
            <ConfirmDraw name={name || `untitled ${vibeMeta.label}`} blurb={blurb || vibeMeta.serif}
              vibe={vibeMeta}/>
            <Btn kind="primary" full style={{ marginTop: 24 }}>Plant the forest</Btn>
            <button style={{
              background: 'transparent', border: 'none', cursor: 'pointer',
              color: '#586552', font: 'italic 400 12.5px var(--font-serif)',
              padding: '14px 0 0', textAlign: 'center', width: '100%',
            }} onClick={() => setStep(2)}>
              ← change something
            </button>
          </div>
        )}
      </PhoneBody>

      <BottomNavFolk active="forests" hasNewSunlight={false}/>
    </div>
  );
}


function VibeCard({ vibe, selected, onSelect }) {
  return (
    <button onClick={onSelect} style={{
      padding: '14px 12px', textAlign: 'left',
      background: selected ? '#1B3A1D' : '#111D0A',
      border: `0.5px solid ${selected ? '#4F8E51' : '#1F2B16'}`,
      borderRadius: 14, cursor: 'pointer',
      position: 'relative', overflow: 'hidden',
      transition: 'background 140ms var(--ease-organic), border-color 140ms var(--ease-organic), transform 140ms var(--ease-organic)',
      transform: selected ? 'scale(1)' : 'scale(0.98)',
    }}>
      {selected && <SunbeamSweep/>}
      <ForestGlyph size={36} hot={selected} color={vibe.hue}/>
      <div style={{ marginTop: 10, font: '500 14px var(--font-sans)', color: '#F2EDE4' }}>{vibe.label}</div>
      <div style={{ font: 'italic 400 12px var(--font-serif)', color: selected ? '#A8C5A0' : '#586552',
                    marginTop: 3 }}>
        {vibe.serif}
      </div>
    </button>
  );
}


function ConfirmDraw({ name, blurb, vibe }) {
  return (
    <div style={{ textAlign: 'center' }}>
      <div style={{ display: 'inline-block', position: 'relative' }}>
        {/* Draw-in concentric rings */}
        <svg width="120" height="120" viewBox="0 0 120 120">
          {[55, 38, 22].map((r, i) => (
            <circle key={r} cx="60" cy="60" r={r} fill="none"
              stroke={vibe.hue} strokeWidth="1.4" strokeLinecap="round"
              strokeDasharray={2 * Math.PI * r}
              style={{
                strokeDashoffset: 2 * Math.PI * r,
                animation: `flBranchDraw 1.1s var(--ease-organic) ${i * 180}ms forwards`,
              }}/>
          ))}
          <circle cx="60" cy="60" r="6" fill="#D4960C"
            style={{ transformOrigin: '60px 60px', animation: 'flBeadGrow 360ms var(--ease-organic) 640ms both' }}/>
        </svg>
      </div>
      <h3 style={{ margin: '12px 0 4px', font: '500 22px var(--font-sans)', color: '#F2EDE4' }}>
        {name}
      </h3>
      <div style={{ font: 'italic 400 14px var(--font-serif)', color: '#A8C5A0' }}>
        {blurb}
      </div>
      <div style={{ marginTop: 18, padding: 12, background: '#111D0A',
                    border: '0.5px solid #1F2B16', borderRadius: 12,
                    font: 'italic 400 12.5px/1.55 var(--font-serif)', color: '#8A9678' }}>
        You'll be the first member. ForestLynk will quietly suggest your forest to folk who
        plant nearby ideas. No notification storm.
      </div>
    </div>
  );
}


Object.assign(window, {
  CreateB1_Inline, CreateB2_Wizard,
});